/**
 * XS 主题区块插件 —— 样式入口
 *
 * 编译产物：assets/css/xs-blocks.css
 * 构建命令（在插件目录下）：
 *   node build/build-css.js
 *
 * ⚠ 不要直接用 tailwindcss CLI 覆盖产物！
 * build/build-css.js 会在 Tailwind 编译之后再走一步「作用域化」，见下。
 *
 * ============================ 为什么必须作用域化 ============================
 * 插件 CSS 与主题 CSS 都作用于整个页面，且插件在主题**之后**加载。
 * 插件里的 Tailwind 工具类含 `.hidden` 这种通用名，会把主题的同类规则压掉。
 * 实测后果（2026-10-08）：首页 hero 图片的 `lg:block` 被插件的
 * `.hidden{display:none}` 覆盖 → 桌面端图片不显示、轮播高度塌成 0 →
 * 首页整版错乱。
 *
 * 所以构建脚本会把本文件产出的**每条选择器**都加上 `.xs-scope` 前缀：
 *   .hidden{}   →  .xs-scope .hidden{}
 * 各区块的包装元素（render.php 里 get_block_wrapper_attributes 的 class）
 * 都带 `xs-scope`，因此规则只作用于区块内部，不再影响站点其它元素。
 *
 * ============================ 因此本文件的写法约定 ============================
 * 1. 直接写顶层规则，**不要用 @layer** —— 层叠顺序依赖加载顺序，难以预测；
 *    作用域化后每条规则优先级已经明确。
 * 2. 选择器只需写「区块内部的样子」，不必自己加 .xs-scope（脚本会加）。
 * 3. 已带 .xs-scope 的选择器会被脚本跳过（幂等），需要「区块自身」的规则
 *    （如 box-sizing 重置）就显式写 .xs-scope。
 * 4. Tailwind preflight 在 tailwind.config.js 里**已关闭** ——
 *    它是全局标签级重置，会重置整站标题/段落/表单。区块需要的基础规则
 *    写在本文件下方「区块内的最小重置」一节。
 */
.xs-scope .container{
  width: 100%;
}
@media (min-width: 480px){.xs-scope .container{
    max-width: 480px;
  }
}
@media (min-width: 640px){.xs-scope .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){.xs-scope .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){.xs-scope .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){.xs-scope .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){.xs-scope .container{
    max-width: 1536px;
  }
}
.xs-scope .pointer-events-none{
  pointer-events: none;
}
.xs-scope .pointer-events-auto{
  pointer-events: auto;
}
.xs-scope .\!static{
  position: static !important;
}
.xs-scope .static{
  position: static;
}
.xs-scope .absolute{
  position: absolute;
}
.xs-scope .relative{
  position: relative;
}
.xs-scope .inset-0{
  inset: 0px;
}
.xs-scope .bottom-0{
  bottom: 0px;
}
.xs-scope .left-0{
  left: 0px;
}
.xs-scope .left-4{
  left: 1rem;
}
.xs-scope .right-0{
  right: 0px;
}
.xs-scope .right-4{
  right: 1rem;
}
.xs-scope .top-1\/2{
  top: 50%;
}
.xs-scope .z-10{
  z-index: 10;
}
.xs-scope .mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.xs-scope .my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.xs-scope .-ml-2{
  margin-left: -0.5rem;
}
.xs-scope .-mr-2{
  margin-right: -0.5rem;
}
.xs-scope .mb-2{
  margin-bottom: 0.5rem;
}
.xs-scope .mb-3{
  margin-bottom: 0.75rem;
}
.xs-scope .mb-4{
  margin-bottom: 1rem;
}
.xs-scope .mb-6{
  margin-bottom: 1.5rem;
}
.xs-scope .mb-8{
  margin-bottom: 2rem;
}
.xs-scope .ml-4{
  margin-left: 1rem;
}
.xs-scope .mt-2{
  margin-top: 0.5rem;
}
.xs-scope .mt-4{
  margin-top: 1rem;
}
.xs-scope .mt-6{
  margin-top: 1.5rem;
}
.xs-scope .mt-8{
  margin-top: 2rem;
}
.xs-scope .block{
  display: block;
}
.xs-scope .inline-block{
  display: inline-block;
}
.xs-scope .flex{
  display: flex;
}
.xs-scope .inline-flex{
  display: inline-flex;
}
.xs-scope .grid{
  display: grid;
}
.xs-scope .hidden{
  display: none;
}
.xs-scope .aspect-square{
  aspect-ratio: 1 / 1;
}
.xs-scope .aspect-video{
  aspect-ratio: 16 / 9;
}
.xs-scope .h-10{
  height: 2.5rem;
}
.xs-scope .h-11{
  height: 2.75rem;
}
.xs-scope .h-12{
  height: 3rem;
}
.xs-scope .h-14{
  height: 3.5rem;
}
.xs-scope .h-4{
  height: 1rem;
}
.xs-scope .h-5{
  height: 1.25rem;
}
.xs-scope .h-6{
  height: 1.5rem;
}
.xs-scope .h-7{
  height: 1.75rem;
}
.xs-scope .h-9{
  height: 2.25rem;
}
.xs-scope .h-auto{
  height: auto;
}
.xs-scope .h-full{
  height: 100%;
}
.xs-scope .min-h-\[200px\]{
  min-height: 200px;
}
.xs-scope .min-h-\[240px\]{
  min-height: 240px;
}
.xs-scope .\!w-auto{
  width: auto !important;
}
.xs-scope .w-10{
  width: 2.5rem;
}
.xs-scope .w-11{
  width: 2.75rem;
}
.xs-scope .w-12{
  width: 3rem;
}
.xs-scope .w-14{
  width: 3.5rem;
}
.xs-scope .w-4{
  width: 1rem;
}
.xs-scope .w-5{
  width: 1.25rem;
}
.xs-scope .w-6{
  width: 1.5rem;
}
.xs-scope .w-7{
  width: 1.75rem;
}
.xs-scope .w-9{
  width: 2.25rem;
}
.xs-scope .w-auto{
  width: auto;
}
.xs-scope .w-full{
  width: 100%;
}
.xs-scope .min-w-0{
  min-width: 0px;
}
.xs-scope .max-w-3xl{
  max-width: 48rem;
}
.xs-scope .max-w-4xl{
  max-width: 56rem;
}
.xs-scope .max-w-\[1120px\]{
  max-width: 1120px;
}
.xs-scope .max-w-\[672px\]{
  max-width: 672px;
}
.xs-scope .max-w-\[720px\]{
  max-width: 720px;
}
.xs-scope .max-w-\[896px\]{
  max-width: 896px;
}
.xs-scope .shrink-0{
  flex-shrink: 0;
}
.xs-scope .grow{
  flex-grow: 1;
}
.xs-scope .-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.xs-scope .cursor-default{
  cursor: default;
}
.xs-scope .grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.xs-scope .grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xs-scope .grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xs-scope .grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xs-scope .grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.xs-scope .grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.xs-scope .flex-row{
  flex-direction: row;
}
.xs-scope .flex-col{
  flex-direction: column;
}
.xs-scope .flex-wrap{
  flex-wrap: wrap;
}
.xs-scope .items-start{
  align-items: flex-start;
}
.xs-scope .items-end{
  align-items: flex-end;
}
.xs-scope .items-center{
  align-items: center;
}
.xs-scope .items-baseline{
  align-items: baseline;
}
.xs-scope .items-stretch{
  align-items: stretch;
}
.xs-scope .justify-start{
  justify-content: flex-start;
}
.xs-scope .justify-center{
  justify-content: center;
}
.xs-scope .justify-between{
  justify-content: space-between;
}
.xs-scope .gap-0{
  gap: 0px;
}
.xs-scope .gap-0\.5{
  gap: 0.125rem;
}
.xs-scope .gap-1{
  gap: 0.25rem;
}
.xs-scope .gap-10{
  gap: 2.5rem;
}
.xs-scope .gap-12{
  gap: 3rem;
}
.xs-scope .gap-2{
  gap: 0.5rem;
}
.xs-scope .gap-3{
  gap: 0.75rem;
}
.xs-scope .gap-4{
  gap: 1rem;
}
.xs-scope .gap-6{
  gap: 1.5rem;
}
.xs-scope .gap-7{
  gap: 1.75rem;
}
.xs-scope .gap-8{
  gap: 2rem;
}
.xs-scope .gap-x-0{
  -moz-column-gap: 0px;
       column-gap: 0px;
}
.xs-scope .gap-y-8{
  row-gap: 2rem;
}
.xs-scope .space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.xs-scope .self-center{
  align-self: center;
}
.xs-scope .overflow-hidden{
  overflow: hidden;
}
.xs-scope .rounded-2xl{
  border-radius: 1rem;
}
.xs-scope .rounded-full{
  border-radius: 9999px;
}
.xs-scope .rounded-lg{
  border-radius: 0.5rem;
}
.xs-scope .rounded-xl{
  border-radius: 0.75rem;
}
.xs-scope .border{
  border-width: 1px;
}
.xs-scope .border-t{
  border-top-width: 1px;
}
.xs-scope .border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.xs-scope .border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.xs-scope .border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.xs-scope .border-primary{
  --tw-border-opacity: 1;
  border-color: rgb(var(--xs-primary, 0 95 190) / var(--tw-border-opacity, 1));
}
.xs-scope .border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.xs-scope .border-white\/15{
  border-color: rgb(255 255 255 / 0.15);
}
.xs-scope .bg-black\/10{
  background-color: rgb(0 0 0 / 0.1);
}
.xs-scope .bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}
.xs-scope .bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.xs-scope .bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.xs-scope .bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}
.xs-scope .bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}
.xs-scope .bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.xs-scope .bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.xs-scope .bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.xs-scope .bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--xs-primary, 0 95 190) / var(--tw-bg-opacity, 1));
}
.xs-scope .bg-primary\/10{
  background-color: rgb(var(--xs-primary, 0 95 190) / 0.1);
}
.xs-scope .bg-primary\/5{
  background-color: rgb(var(--xs-primary, 0 95 190) / 0.05);
}
.xs-scope .bg-transparent{
  background-color: transparent;
}
.xs-scope .bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.xs-scope .bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}
.xs-scope .bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.xs-scope .bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.xs-scope .from-black\/70{
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.xs-scope .from-black\/80{
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.xs-scope .from-gray-200{
  --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.xs-scope .from-primary-dark{
  --tw-gradient-from: rgb(var(--xs-primary-dark, 0 61 122) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--xs-primary-dark, 0 61 122) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.xs-scope .via-black\/20{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.xs-scope .via-black\/60{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.xs-scope .to-gray-300{
  --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);
}
.xs-scope .to-primary{
  --tw-gradient-to: rgb(var(--xs-primary, 0 95 190) / 1) var(--tw-gradient-to-position);
}
.xs-scope .to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.xs-scope .object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.xs-scope .object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.xs-scope .p-1{
  padding: 0.25rem;
}
.xs-scope .p-3{
  padding: 0.75rem;
}
.xs-scope .p-5{
  padding: 1.25rem;
}
.xs-scope .p-6{
  padding: 1.5rem;
}
.xs-scope .p-8{
  padding: 2rem;
}
.xs-scope .px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.xs-scope .px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.xs-scope .px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.xs-scope .px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.xs-scope .py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.xs-scope .py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.xs-scope .py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.xs-scope .py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.xs-scope .py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.xs-scope .py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.xs-scope .py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.xs-scope .pb-4{
  padding-bottom: 1rem;
}
.xs-scope .pb-6{
  padding-bottom: 1.5rem;
}
.xs-scope .pb-8{
  padding-bottom: 2rem;
}
.xs-scope .pl-8{
  padding-left: 2rem;
}
.xs-scope .pt-16{
  padding-top: 4rem;
}
.xs-scope .pt-4{
  padding-top: 1rem;
}
.xs-scope .pt-6{
  padding-top: 1.5rem;
}
.xs-scope .pt-8{
  padding-top: 2rem;
}
.xs-scope .text-left{
  text-align: left;
}
.xs-scope .text-center{
  text-align: center;
}
.xs-scope .text-right{
  text-align: right;
}
.xs-scope .text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.xs-scope .text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.xs-scope .text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.xs-scope .text-\[13px\]{
  font-size: 13px;
}
.xs-scope .text-\[15px\]{
  font-size: 15px;
}
.xs-scope .text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.xs-scope .text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.xs-scope .text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.xs-scope .text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.xs-scope .text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.xs-scope .font-bold{
  font-weight: 700;
}
.xs-scope .font-medium{
  font-weight: 500;
}
.xs-scope .font-semibold{
  font-weight: 600;
}
.xs-scope .leading-none{
  line-height: 1;
}
.xs-scope .leading-relaxed{
  line-height: 1.625;
}
.xs-scope .leading-snug{
  line-height: 1.375;
}
.xs-scope .leading-tight{
  line-height: 1.25;
}
.xs-scope .text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.xs-scope .text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.xs-scope .text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.xs-scope .text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.xs-scope .text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.xs-scope .text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.xs-scope .text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.xs-scope .text-primary{
  --tw-text-opacity: 1;
  color: rgb(var(--xs-primary, 0 95 190) / var(--tw-text-opacity, 1));
}
.xs-scope .text-primary\/25{
  color: rgb(var(--xs-primary, 0 95 190) / 0.25);
}
.xs-scope .text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.xs-scope .text-white\/25{
  color: rgb(255 255 255 / 0.25);
}
.xs-scope .text-white\/60{
  color: rgb(255 255 255 / 0.6);
}
.xs-scope .text-white\/70{
  color: rgb(255 255 255 / 0.7);
}
.xs-scope .text-white\/80{
  color: rgb(255 255 255 / 0.8);
}
.xs-scope .text-white\/85{
  color: rgb(255 255 255 / 0.85);
}
.xs-scope .opacity-0{
  opacity: 0;
}
.xs-scope .opacity-60{
  opacity: 0.6;
}
.xs-scope .shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.xs-scope .outline{
  outline-style: solid;
}
.xs-scope .transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.xs-scope .transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.xs-scope .transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.xs-scope .transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.xs-scope .transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.xs-scope .transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.xs-scope .duration-200{
  transition-duration: 200ms;
}
/* ============================================================
 * 区块内的最小重置
 *
 * ⚠ 本插件**刻意关闭 Tailwind 的 preflight**（见 tailwind.config.js）：
 * preflight 是全局标签级重置，会重置整站的 h1~h6 / p / img / input，
 * 而主题自己已经处理了这些。开着它会污染站点样式（实测造成首页版面塌陷）。
 *
 * 下面这些是区块自身需要的基础规则，全部会被构建脚本收进 .xs-scope 之内，
 * 只作用于区块包装元素及其后代。
 * ============================================================ */
.xs-scope, .xs-scope *, .xs-scope *::before, .xs-scope *::after{
  box-sizing: border-box;
}
/* 区块内的图片默认按盒子缩放，不撑破容器（Tailwind preflight 原本提供这条） */
.xs-scope img, .xs-scope svg, .xs-scope video{
  display: block;
  max-width: 100%;
  height: auto;
}
/* 区块内的标题与段落去掉浏览器默认外边距（主题正文样式不适用于区块内部） */
.xs-scope h1, .xs-scope h2, .xs-scope h3, .xs-scope h4, .xs-scope h5, .xs-scope h6, .xs-scope p{
  margin: 0;
}
.xs-scope ul, .xs-scope ol{
  margin: 0;
  padding: 0;
  list-style: none;
}
.xs-scope a{
  color: inherit;
  text-decoration: inherit;
}
/* 表单控件继承字体（区块里可能放按钮） */
.xs-scope button, .xs-scope input, .xs-scope select, .xs-scope textarea{
  font: inherit;
  color: inherit;
  margin: 0;
}
/* ============================================================
 * 区块主题色 —— 全部颜色都走这几个 CSS 变量
 *
 * 这里给的是**默认值**（XS Pro 的配色）。后台「设置 → XS 区块」
 * 保存的颜色会以内联 \3c style> 覆盖它们（见 xs-blocks.php 的
 * xs_blocks_print_color_vars()），所以改配色**不需要重新编译 CSS**。
 *
 * 值是 RGB 通道（空格分隔），配合 Tailwind 的 <alpha-value> 使用，
 * 这样 bg-primary/5 这类透明度写法仍然有效。
 * ============================================================ */
.xs-scope :root{
  --xs-primary: 0 95 190;
  /* #005fbe */
  --xs-primary-light: 51 136 212;
  /* #3388d4 */
  --xs-primary-dark: 0 61 122;
  /* #003d7a */
  --xs-secondary: 205 139 132;
  /* #cd8b84 */
  --xs-secondary-light: 224 180 176;
  --xs-secondary-dark: 160 101 94;
  --xs-surface: 248 245 240;
  /* #f8f5f0 */
}
/* ============================================================
 * 区块自身的钩子类（前台交互与外观，不依赖任何主题）
 * 类名契约与 render.php 一致，改动时必须同步。
 * ============================================================ */
/* ---------- FAQ 手风琴 ---------- */
.xs-scope .xs-faq-block .product-faq-answer{
  overflow: hidden;
  transition: height 0.25s ease;
}
.xs-scope .xs-faq-block .product-faq-answer.faq-closed{
  height: 0;
}
/* 展开态：按钮与箭头高亮 */
.xs-scope .product-faq-toggle.faq-active{
  background-color: rgb(var(--xs-primary, 0 95 190));
}
.xs-scope .product-faq-toggle.faq-active, .xs-scope .product-faq-toggle.faq-active span, .xs-scope .product-faq-toggle.faq-active .iconify{
  color: #fff;
}
.xs-scope .product-faq-toggle.faq-active .faq-chevron{
  transform: rotate(180deg);
}
.xs-scope .faq-chevron{
  transition: transform 0.2s ease;
}
/* ---------- 社媒图标 ---------- */
/* 图标底：平时透明，悬停浮出白底 + 黑图标。
   hover:bg-white / hover:text-gray-900 由 Tailwind 工具类提供；
   这里补一条过渡，保证颜色切换平滑。 */
.xs-scope .xs-social-block a .iconify, .xs-scope .xs-social-block span .iconify{
  transition: color 0.2s ease;
}
/* ---------- 轮播滑块 ---------- */
/* Swiper 本体样式由 assets/vendors/swiper/swiper-bundle.min.css 提供。
   这里只补分页器的位置修正（render.php 给分页容器加了 !w-auto !static）。 */
.xs-scope .xs-slider-block .swiper-pagination{
  position: static;
  width: auto;
}
/* 封面流/创意效果需要可见的溢出 */
.xs-scope .xs-slider-block .swiper-3d{
  perspective: 1200px;
}
/* ---------- 卡片链接的按钮样式 ---------- */
/* card-grid-item 的「链接样式」选项会输出 btn-primary / btn-outline。
 *
 * ⚠ 主题里虽然也有这两个类，但它们是 **.entry-content 作用域**的，
 * 而且只设文字颜色与 text-decoration —— 没有按钮外观（无内边距、无背景、无圆角）。
 * 所以那个「实心按钮 / 边框按钮」选项在区块里原本是名不副实的。
 * 插件在这里补上完整按钮外观，作用域限定在九宫格卡片内，不干扰主题正文。 */
.xs-scope .xs-card-grid-item .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #fff;
  background-color: rgb(var(--xs-primary, 0 95 190));
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.xs-scope .xs-card-grid-item .btn-primary:hover{
  color: #fff;
  background-color: rgb(var(--xs-primary-dark, 0 61 122));
}
.xs-scope .xs-card-grid-item .btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--xs-primary, 0 95 190));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(var(--xs-primary, 0 95 190));
  background-color: transparent;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.xs-scope .xs-card-grid-item .btn-outline:hover{
  color: #fff;
  background-color: rgb(var(--xs-primary, 0 95 190));
  border-color: rgb(var(--xs-primary, 0 95 190));
}
/* ---------- 九宫格 ---------- */
/* 图片比例：render.php 的 $ratio_map 对 4:3 用的是自定义类 xs-ar-4-3
   （不是 Tailwind 的 aspect-[4/3]），这里给出定义，否则该选项无效果。
   1:1 与 16:9 用的是 Tailwind 的 aspect-square / aspect-video，由工具类提供。 */
.xs-scope .xs-card-grid-block .xs-ar-4-3, .xs-scope .xs-card-grid-item .xs-ar-4-3{
  aspect-ratio: 4 / 3;
}
/* 卡片悬停动画（card-grid 的 hoverAnimation 选项）。
   类名契约来自 render.php 的 $hover_map：xs-card-hover-lift / -scale / -glow。
   ⚠ 这三个类名在 XS Pro 主题里正是「只存在于数据库正文、Tailwind 扫不到」的那批，
   主题重建 CSS 时会被丢掉 —— 插件自带定义后就不再依赖主题产物。 */
.xs-scope .xs-card-grid-item.xs-card-hover-lift{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.xs-scope .xs-card-grid-item.xs-card-hover-lift:hover, .xs-scope .xs-card-hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.xs-scope .xs-card-grid-item.xs-card-hover-scale{
  transition: transform 0.3s ease;
}
.xs-scope .xs-card-grid-item.xs-card-hover-scale:hover, .xs-scope .xs-card-hover-scale:hover{
  transform: scale(1.03);
}
.xs-scope .xs-card-grid-item.xs-card-hover-glow{
  transition: box-shadow 0.3s ease;
}
.xs-scope .xs-card-grid-item.xs-card-hover-glow:hover, .xs-scope .xs-card-hover-glow:hover{
  box-shadow: 0 0 20px 4px rgb(var(--xs-primary, 0 95 190) / 0.25);
}
/* ============================================================
 * 提示框（callout）
 *
 * 语气色通过 CSS 变量传入（render.php 写在 wrapper 的 style 上）：
 *   --xs-callout-accent / -bg / -border
 * 这样四种语气共用一套规则，不必为每种语气各写一遍。
 * ============================================================ */
.xs-scope .xs-callout{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--xs-callout-bg, rgb(var(--xs-primary, 0 95 190) / 0.06));
  border-left: 4px solid var(--xs-callout-accent, rgb(var(--xs-primary, 0 95 190)));
  border-radius: 8px;
  box-sizing: border-box;
}
.xs-scope .xs-callout-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--xs-callout-accent, rgb(var(--xs-primary, 0 95 190)));
}
/* ⚠ 必须给明确尺寸：Iconify 未就位时 .iconify 是空元素，不给宽高会塌成 0 */
.xs-scope .xs-callout-icon .iconify{
  display: block;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}
.xs-scope .xs-callout-body{
  min-width: 0;
  flex: 1 1 auto;
}
.xs-scope .xs-callout-title{
  font-size: 16px;
  font-weight: 600;
  color: var(--xs-callout-accent, rgb(var(--xs-primary, 0 95 190)));
  margin: 0 0 6px;
}
.xs-scope .xs-callout-text{
  font-size: 14px;
  line-height: 1.75;
  color: #374151;
}
.xs-scope .xs-callout-text p{
  margin: 0 0 8px;
}
.xs-scope .xs-callout-text p:last-child{
  margin-bottom: 0;
}
/* ============================================================
 * 特色列表（feature-list）
 *
 * 条目外观大多用 Tailwind 工具类，这里只补工具类表达不了的：
 * 图标盒的固定尺寸兜底。
 * ============================================================ */
.xs-scope .xs-feature-icon .iconify{
  display: block;
}
/* 整条可点击时给出反馈 */
.xs-scope a.xs-feature-item{
  transition: transform 0.25s ease;
}
.xs-scope a.xs-feature-item:hover{
  transform: translateY(-2px);
}
/* ============================================================
 * 数据统计（stats）
 * ============================================================ */
.xs-scope .xs-stats-number{
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* 条目之间的竖分隔线。
 *
 * 做法：给条目加 border-left，再用 CSS 把**每行第一列**的左边框去掉。
 * 列数在手机/平板/桌面三档不同，所以三档各写一组规则，由 PHP 输出的
 * data 属性（xs-cols-mobile / -tablet / -desktop）提供列数。
 *
 * 为什么不画在网格容器上：容器背景线无法感知内容高度，
 * 也处理不好换行；为什么不放在"每行最后一列"：那要按列数算 nth-child，
 * 而放第一列只需要一条 `nth-child(kn+1)` 规则，更简单。
 *
 * ⚠ 必须在 .xs-scope 作用域内 —— 见文件顶部的说明。
 */
.xs-scope .xs-stats-divided .xs-stats-item{
  min-height: 72px;
  justify-content: center;
  padding-left: 16px;
  border-left: 1px solid rgb(var(--xs-primary, 0 95 190) / 0.15);
}
/* 深色底：换成半透明白线（同样需要重复父类提权重） */
.xs-scope .xs-stats-on-dark .xs-stats-divided.xs-stats-divided .xs-stats-item{
  border-left-color: rgba(255, 255, 255, 0.18);
}
/* 每行第一列无线。
 *
 * ⚠ 选择器把 .xs-stats-divided 写了**两遍**（`.xs-stats-divided.xs-stats-divided`）
 * 是故意的：上面那条基础规则有 3 个类（.scope 由构建脚本加 → .split .item），
 * 若这里只写 `[data-...] .item` 就只有 2 个类，**权重不够、去不掉边框**。
 * 重复父类把权重提到 4，才能稳定压过基础规则。
 */
.xs-scope .xs-stats-divided.xs-stats-divided .xs-stats-item:nth-child(2n + 1){
  border-left: 0;
  padding-left: 0;
}
/* 平板端 */
@media (min-width: 640px){.xs-scope .xs-stats-divided[data-xs-cols-tablet] .xs-stats-item{
    border-left-width: 1px;
    padding-left: 16px;
  }
.xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-tablet="1"] .xs-stats-item:nth-child(1n + 1), .xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-tablet="2"] .xs-stats-item:nth-child(2n + 1), .xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-tablet="3"] .xs-stats-item:nth-child(3n + 1), .xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-tablet="4"] .xs-stats-item:nth-child(4n + 1){
    border-left-width: 0;
    padding-left: 0;
  }
}
/* 桌面端 */
@media (min-width: 1024px){.xs-scope .xs-stats-divided[data-xs-cols-desktop] .xs-stats-item{
    border-left-width: 1px;
    padding-left: 16px;
  }
.xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-desktop="1"] .xs-stats-item:nth-child(1n + 1), .xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-desktop="2"] .xs-stats-item:nth-child(2n + 1), .xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-desktop="3"] .xs-stats-item:nth-child(3n + 1), .xs-scope .xs-stats-divided.xs-stats-divided[data-xs-cols-desktop="4"] .xs-stats-item:nth-child(4n + 1){
    border-left-width: 0;
    padding-left: 0;
  }
}
/* ============================================================
 * 客户评价（testimonials）
 * ============================================================ */
.xs-scope .testimonial-swiper .swiper-slide{
  height: auto;
}
.xs-scope .testimonial-swiper .swiper-wrapper{
  align-items: stretch;
}
/* Swiper 分页圆点：默认样式可能与主题冲突，这里统一为居中的小圆点 */
.xs-scope .xs-testimonials-block .swiper-pagination{
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.xs-scope .xs-testimonials-block .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  margin: 0;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}
.xs-scope .xs-testimonials-block .swiper-pagination-bullet-active{
  opacity: 1;
}
.xs-scope .xs-testimonial-rating .iconify{
  display: block;
}
/* 评价正文里的段落间距 */
.xs-scope .xs-testimonial-quote p{
  margin: 0 0 8px;
}
.xs-scope .xs-testimonial-quote p:last-child{
  margin-bottom: 0;
}
.xs-scope .hover\:-translate-y-1:hover{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.xs-scope .hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.xs-scope .hover\:border-primary:hover{
  --tw-border-opacity: 1;
  border-color: rgb(var(--xs-primary, 0 95 190) / var(--tw-border-opacity, 1));
}
.xs-scope .hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.xs-scope .hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.xs-scope .hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.xs-scope .hover\:text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--xs-primary, 0 95 190) / var(--tw-text-opacity, 1));
}
.xs-scope .hover\:text-primary-dark:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--xs-primary-dark, 0 61 122) / var(--tw-text-opacity, 1));
}
.xs-scope .hover\:text-primary-light:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--xs-primary-light, 51 136 212) / var(--tw-text-opacity, 1));
}
.xs-scope .hover\:opacity-100:hover{
  opacity: 1;
}
.xs-scope .hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.xs-scope .hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.xs-scope .group\/slider:hover .group-hover\/slider\:opacity-100{
  opacity: 1;
}
@media (min-width: 640px){.xs-scope .sm\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
.xs-scope .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.xs-scope .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px){.xs-scope .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
.xs-scope .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.xs-scope .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.xs-scope .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){.xs-scope .lg\:my-3{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
.xs-scope .lg\:-ml-5{
    margin-left: -1.25rem;
  }
.xs-scope .lg\:-mr-5{
    margin-right: -1.25rem;
  }
.xs-scope .lg\:mb-8{
    margin-bottom: 2rem;
  }
.xs-scope .lg\:w-1\/3{
    width: 33.333333%;
  }
.xs-scope .lg\:w-2\/3{
    width: 66.666667%;
  }
.xs-scope .lg\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
.xs-scope .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.xs-scope .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.xs-scope .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
.xs-scope .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
.xs-scope .lg\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
.xs-scope .lg\:flex-row{
    flex-direction: row;
  }
.xs-scope .lg\:gap-12{
    gap: 3rem;
  }
.xs-scope .lg\:p-8{
    padding: 2rem;
  }
.xs-scope .lg\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }
.xs-scope .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }
.xs-scope .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
.xs-scope .lg\:py-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
.xs-scope .lg\:pb-12{
    padding-bottom: 3rem;
  }
.xs-scope .lg\:pb-16{
    padding-bottom: 4rem;
  }
.xs-scope .lg\:pb-8{
    padding-bottom: 2rem;
  }
.xs-scope .lg\:pl-12{
    padding-left: 3rem;
  }
.xs-scope .lg\:pt-12{
    padding-top: 3rem;
  }
.xs-scope .lg\:pt-16{
    padding-top: 4rem;
  }
.xs-scope .lg\:pt-8{
    padding-top: 2rem;
  }
.xs-scope .lg\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
.xs-scope .lg\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }
}