.elementor-6 .elementor-element.elementor-element-8288a3b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-db7a232{--e-image-carousel-slides-to-show:1;width:100%;max-width:100%;}.elementor-6 .elementor-element.elementor-element-db7a232 > .elementor-widget-container{margin:-11px -11px -11px -11px;}.elementor-6 .elementor-element.elementor-element-db7a232.elementor-element{--align-self:center;}.elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button.elementor-swiper-button-next{font-size:48px;color:#3A1C54;}.elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button.elementor-swiper-button-next svg{fill:#3A1C54;}.elementor-6 .elementor-element.elementor-element-db7a232 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;}.elementor-6 .elementor-element.elementor-element-2ad0473{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-2531988 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-6 .elementor-element.elementor-element-2531988.elementor-element{--align-self:center;}.elementor-6 .elementor-element.elementor-element-509dcbf{--display:flex;--min-height:499px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:-9px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-509dcbf:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-509dcbf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zleygroup.cn/wp-content/uploads/2025/07/58e7128166511d7c72dc5ae46fe0b59c-3.jpg");background-size:cover;}.elementor-6 .elementor-element.elementor-element-d2840ce{--display:flex;}.elementor-6 .elementor-element.elementor-element-f1f4111 > .elementor-widget-container{margin:156px 2px 0px -29px;padding:75px 0px 0px -7px;}.elementor-6 .elementor-element.elementor-element-f1f4111.elementor-element{--align-self:center;}.elementor-6 .elementor-element.elementor-element-5f24af4{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-5f24af4:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-5f24af4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zleygroup.cn/wp-content/uploads/2025/08/464aabe99bed451010615fd1d954326c.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6 .elementor-element.elementor-element-5f24af4.e-con{--align-self:center;}.elementor-6 .elementor-element.elementor-element-83cc107{--display:flex;--min-height:521px;}.elementor-6 .elementor-element.elementor-element-9d85bbe{width:100%;max-width:100%;}.elementor-6 .elementor-element.elementor-element-9d85bbe > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0vw 0vw 0vw 59vw;}.elementor-6 .elementor-element.elementor-element-9d85bbe.elementor-element{--align-self:stretch;}.elementor-6 .elementor-element.elementor-element-c3a98e7{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;}.elementor-6 .elementor-element.elementor-element-c3a98e7 > .elementor-widget-container{margin:-83px 28px 0px -2px;padding:135px 0px 0px 0px;}.elementor-6 .elementor-element.elementor-element-c3a98e7.elementor-element{--align-self:flex-end;}.elementor-6 .elementor-element.elementor-element-c3a98e7.elementor-wc-products  ul.products{grid-column-gap:7px;grid-row-gap:9px;}.elementor-6 .elementor-element.elementor-element-c3a98e7 .woocommerce .woocommerce-loop-category__title{color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-5cc1445{--display:flex;}.elementor-6 .elementor-element.elementor-element-5cc1445.e-con{--align-self:center;}.elementor-6 .elementor-element.elementor-element-adfcd46{width:100%;max-width:100%;}.elementor-6 .elementor-element.elementor-element-adfcd46 > .elementor-widget-container{margin:34px 0px 0px -10px;}.elementor-6 .elementor-element.elementor-element-adfcd46.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-6 .elementor-element.elementor-element-509dcbf{--margin-top:125px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-f1f4111 > .elementor-widget-container{margin:13px 0px 0px 0px;padding:-15px 0px 3px 3px;}.elementor-6 .elementor-element.elementor-element-9d85bbe > .elementor-widget-container{margin:0px 0px 0px -146px;}.elementor-6 .elementor-element.elementor-element-c3a98e7 > .elementor-widget-container{margin:-112px 0px 0px -35px;}.elementor-6 .elementor-element.elementor-element-c3a98e7{--container-widget-width:283px;--container-widget-flex-grow:0;width:var( --container-widget-width, 283px );max-width:283px;}.elementor-6 .elementor-element.elementor-element-5cc1445{--width:500px;--min-height:0px;}.elementor-6 .elementor-element.elementor-element-adfcd46 > .elementor-widget-container{margin:0px 0px 0px -14px;}.elementor-6 .elementor-element.elementor-element-adfcd46.elementor-element{--align-self:stretch;}}/* Start custom CSS for image-carousel, class: .elementor-element-db7a232 */@media (max-width: 768px) {
  /* 只作用于当前这个小部件 */
  .elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button,
  .elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button-prev,
  .elementor-6 .elementor-element.elementor-element-db7a232 .elementor-swiper-button-next {
    display: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2531988 *//* ===== 布局：左文案 + 右滑动区 ===== */
.featured-section{
  display:flex; flex-direction:row; align-items:flex-start;
  gap:40px; padding:40px; background:#e8e6f1; flex-wrap:nowrap;
}
.left-panel{ flex:0 0 25%; display:flex; flex-direction:column; color:#3a1c54; }
.left-panel h2{ font-size:28px; font-weight:700; margin-bottom:12px; }
.description{ font-size:14px; margin:10px 0; line-height:1.6; }
.discover-btn{ border:1.5px solid #3a1c54; background:transparent; color:#3a1c54;
  padding:8px 18px; font-weight:700; border-radius:30px; cursor:pointer; }

.right-panel{ flex:1; position:relative; min-width:0; }
.product-slider{ display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:10px; }

/* ===== 导航按钮：长圆形，箭头居中 ===== */
.nav-buttons{ display:flex; gap:16px; margin:10px 0; }
.arrow-btn{
  width:120px; height:42px; border:2px solid #3a1c54; color:#3a1c54;
  background:transparent; border-radius:999px; font-size:18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; /* 居中 */
}

/* ===== 卡片：保持 260px 宽 ===== */
.product-card{
  flex:0 0 260px; background:#f4f1f9; border-radius:8px; padding:20px;
  box-sizing:border-box; text-align:left; position:relative; overflow:hidden;
}
.card-link{ color:inherit; text-decoration:none; display:block; }

/* ===== 图片区域：220px 高，悬停只在图片内切换 ===== */
.image-wrapper{ position:relative; width:100%; height:220px; border-radius:6px; overflow:hidden; }
.image-wrapper .main-img,
.image-wrapper .hover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:6px; transition:opacity .25s ease-in-out;
}
.image-wrapper .main-img{ z-index:1; opacity:1; }
.image-wrapper .hover-img{ z-index:2; opacity:0; }
.product-card:hover .image-wrapper .main-img{ opacity:0; }
.product-card:hover .image-wrapper .hover-img{ opacity:1; }

/* 悬停底部居中的 READ MORE（显示在两张图之上） */
.read-more-overlay{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px;
  padding:10px 22px; border-radius:10px; background:#fff; color:#3a1c54;
  font-weight:700; font-size:14px; letter-spacing:.5px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:3;
}
.product-card:hover .read-more-overlay{ opacity:1; pointer-events:auto; }

/* ===== 标题左 + 分类徽章改为在标题下方 ===== */
.card-head{
  display:flex; align-items:flex-start; justify-content:flex-start;
  gap:10px; margin-top:12px; color:#3a1c54; flex-wrap:wrap;   /* 允许换到下一行 */
}
.card-title{
  font-size:16px;
  line-height:1.3; font-weight:700; margin:0;
  flex:0 0 100%; min-width:0;                                 /* 标题独占第一行 */
  white-space:normal; word-break:normal; overflow-wrap:break-word;
}
.badge{
  display:inline-flex; align-items:center;                    /* 徽章在标题下方 */
  background:#a388c5; color:#fff; border-radius:999px;
  padding:2px 10px; font-size:12px; line-height:1.6; margin:6px 0 0 0;
  white-space:normal; max-width:100%; overflow:visible; text-overflow:clip;
}

/* 分隔线 + 只显示 INCI 文本 */
.divider{ margin:12px 0; border:none; border-top:1px solid #d8d8d8; }
.card-desc{ margin:0; font-size:13px; color:#555; line-height:1.5; }

/* 兜底：清理旧的 .read-more 规则（你已不再使用它） */
.read-more{ display:none !important; }

/* 平板以下堆叠 */
@media (max-width:1024px){
  .featured-section{ flex-wrap:wrap; }
  .left-panel{ flex:0 0 100%; }
  .right-panel{ flex:0 0 100%; }
}


/* 隐藏横向滚动条（灰色滑轮） */
.product-slider{
  -ms-overflow-style: none;      /* IE/Edge */
  scrollbar-width: none;         /* Firefox */
}
.product-slider::-webkit-scrollbar{ display:none; } /* WebKit */

/* 导航按钮：长圆&箭头居中 */
.arrow-btn{
  width:120px; height:42px; border:2px solid #3a1c54; color:#3a1c54;
  background:transparent; border-radius:999px; font-size:18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}

/* 卡片尺寸（保持 260 宽）、图片区域 220 高，悬停只在图片内切换 */
.product-card{ flex:0 0 260px; }
.image-wrapper{ position:relative; width:100%; height:220px; border-radius:6px; overflow:hidden; }
.image-wrapper .main-img,
.image-wrapper .hover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:6px; transition:opacity .25s ease-in-out;
}
.image-wrapper .main-img{ z-index:1; opacity:1; }
.image-wrapper .hover-img{ z-index:2; opacity:0; }
.product-card:hover .image-wrapper .main-img{ opacity:0; }
.product-card:hover .image-wrapper .hover-img{ opacity:1; }

/* 悬停时底部居中 READ MORE （盖在图片上，第二张图之上） */
.read-more-overlay{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px;
  padding:10px 22px; border-radius:10px; background:#fff; color:#3a1c54;
  font-weight:700; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:3;
}
.product-card:hover .read-more-overlay{ opacity:1; pointer-events:auto; }

/* 标题左 + 徽章在标题下方（第二处重复定义同步调整） */
.card-head{ display:flex; align-items:flex-start; justify-content:flex-start; gap:10px; margin-top:12px; flex-wrap:wrap; }
.card-title{
  font-size:16px; line-height:1.3; font-weight:700; margin:0;
  flex:0 0 100%; min-width:0;
  white-space:normal; word-break:normal; overflow-wrap:break-word;
}
.badge{
  display:inline-flex; align-items:center;
  background:#a388c5; color:#fff; border-radius:999px; padding:2px 10px; font-size:12px; line-height:1.6;
  margin:-5px 0 0 0; white-space:normal; max-width:100%; overflow:visible; text-overflow:clip;
}

/* 分隔线与描述（只显示 INCI 文本） */
.divider{ margin:12px 0; border:none; border-top:0px solid #3A1C54; }
.card-desc{ margin:0; font-size:13px; color:#555; line-height:1.5; }
.card-head { margin-bottom: 6px; }          /* 标题与线的距离 */
.divider   { margin: 20px 0 12px; }          /* 上 20px，下 12px */
.card-desc { margin-top: 10px; }             /* 线与描述的距离 */


/* 兜底：如果页面上还有旧的 .read-more 规则，隐藏它避免冲突 */
.read-more{ display:none !important; }


/* 让 .featured-section 脱离 Astra 中心容器，左右贴边（full-bleed） */
.featured-section{
  /* 保持你原先的背景色和内边距，但做成全宽 */
  width: 100vw;                          /* 占满视口宽度 */
  margin-left: calc(50% - 50vw);         /* 向左“出血” */
  margin-right: calc(50% - 50vw);        /* 向右“出血” */
  padding-left: clamp(32px, 6vw, 80px);  /* 两侧留一点呼吸感 */
  padding-right: clamp(32px, 6vw, 80px);
  box-sizing: border-box;
}

/* 区块内部仍按你的两栏布局，只是有了更多横向空间 */
.featured-section .left-panel{ max-width: 520px; }   /* 左栏一个合理上限，可按需调 */
.product-slider{ gap: 32px; }                        /* 视口更宽时，卡片之间稍微拉开 */


/* ===== 补丁（贴在你现有CSS最后）===== */

/* 1) 标题强制横排，防止被主题/组件改成竖排 */
.featured-section .product-card { writing-mode: horizontal-tb !important; }
.featured-section .product-card .card-head{
  display:flex; align-items:flex-start; justify-content:flex-start; flex-wrap:wrap;
}
.featured-section .product-card .card-title{
  transform: none !important;                 /* 覆盖可能的 rotate */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  font-size: 16px; line-height: 1.3; margin: 0;
}
/* —— 这里把省略号限制去掉，允许在下一行完整显示 —— */
.featured-section .product-card .badge{
  display:inline-flex; align-items:center;
  white-space:normal; max-width:100%; overflow:visible; text-overflow:clip;
}

/* 2) 控制卡片高度：图片 220px；描述最多 2 行 */
.featured-section .product-card .image-wrapper{
  height: 220px; border-radius: 6px; overflow: hidden; position: relative;
}
.featured-section .product-card p { margin: 0; } /* 去掉 p 默认外边距 */
.featured-section .product-card .card-desc{
  font-size: 13px; color: #555; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
  min-height: 3em; /* 两行的兜底高度，让卡片齐行 */
}

/* 仅在图片区域做悬停切图（保持第二张图不铺满整个卡片） */
.featured-section .product-card .image-wrapper .main-img,
.featured-section .product-card .image-wrapper .hover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; border-radius:6px; transition: opacity .25s ease-in-out;
}
.featured-section .product-card .image-wrapper .main-img{ opacity:1; z-index:1; }
.featured-section .product-card .image-wrapper .hover-img{ opacity:0; z-index:2; }
.featured-section .product-card:hover .image-wrapper .main-img{ opacity:0; }
.featured-section .product-card:hover .image-wrapper .hover-img{ opacity:1; }

/* 悬停时底部居中的 READ MORE，盖在图片上 */
.featured-section .product-card .read-more-overlay{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px;
  padding:10px 22px; border-radius:10px; background:#fff; color:#3a1c54;
  font-weight:700; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:3;
}
.featured-section .product-card:hover .read-more-overlay{
  opacity:1; pointer-events:auto;
}

/* （可选）桌面端觉得拥挤，只显示 3 张卡片 */
// @media (min-width: 1025px){
//   .featured-section .product-slider .product-card:nth-child(n+4){ display:none; }
// }


/* 让 READ MORE 始终一行显示 */
.product-card .read-more-overlay{
  white-space: nowrap;                 /* 不换行 */
  display: inline-flex;                /* 居中对齐内容 */
  align-items: center;
  justify-content: center;
  padding: 12px 28px;                  /* 稍加内边距，避免挤成两行 */
  min-width: 180px;                    /* 给它一个最小宽度 */
  max-width: calc(100% - 24px);        /* 不超过卡片宽度 */
  letter-spacing: .08em;               /* 字间距适当，避免因字距过大换行 */
  overflow: hidden;                    /* 极端情况下避免溢出 */
  text-overflow: clip;                 /* 不需要省略号就用 clip */
  line-height: 1;                      /* 保证垂直紧凑 */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f1f4111 */.about-section {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 18px;
  box-sizing: border-box;
}

/* 按钮完全独立定位，可随意控制位置 */
.who-we-are-btn {
  position: absolute;
  left: 80px;
  top: 60px;
  z-index: 99;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: 2.8px solid #fff;
  border-radius: 40px;
  padding: 0.62em 2.6em;
  cursor: pointer;
  letter-spacing: 1.2px;
  outline: none;
  transition:
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    border-color 0.2s,
    transform 0.25s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  min-width: 178px;
  min-height: 52px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.who-we-are-btn:hover,
.who-we-are-btn:focus {
  background: rgba(255,255,255,0.13);
  color: #fff;
  box-shadow: 0 0 10px 4px #fff2;
  border-color: #fff;
  transform: scale(1.12);
}

.about-cards-row {
  display: flex;
  gap: 36px;          /* 保持原有间距 */
  align-items: center;
  position: relative;
  margin-left: 600px; /* 可根据需要调整整体右移 */
  overflow: visible;  /* 放大时不裁切 */
}

/* —— 单卡片 —— */
.about-card {
  background: #d0c5e7;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 24px 0 rgba(56,56,99,0.14);
  cursor: pointer;
  border: 2.8px solid #3A1C54;

  /* 普通状态下，不对 transform 做动画（避免抖动） */
  transition:
    transform 0s,
    box-shadow 0.7s,
    background 0.5s,
    opacity 0.5s,
    border-color 0.4s;

  z-index: 1;
  overflow: hidden;
}
.about-card-icon {
  margin-bottom: -20px;
  transition: opacity 0.5s;
}
.about-card-icon img {
  width: 100px;
  height: 100px;
  filter: grayscale(45%);
  opacity: 0.9;
}

/* 仅放大标题字号 */
.about-card-title {
  font-size: 1.15rem;        /* 0.93rem → 1.15rem */
  font-weight: bold;
  color: #3A1C54;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 0;
  transition: opacity 0.5s;
}

/* 描述字号保持原值 */
.about-card-desc {
  opacity: 0;
  max-height: 0;
  font-size: 0.49rem;        /* 不变 */
  color: #3A1C54;
  text-align: center;
  padding: 0 7px;
  margin: 0;
  pointer-events: none;
  line-height: 1.5;
  transition: opacity 0.5s, max-height 0.5s, padding 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* —— 悬停/聚焦：放大向左（以右侧为基点） —— */
.about-card:hover,
.about-card:focus {
  transition:
    transform 0.3s ease,     /* 放大时做动画 */
    box-shadow 0.7s,
    background 0.5s,
    opacity 0.5s,
    border-color 0.4s;

  transform: scale(2.15);
  transform-origin: right center;
  box-shadow: 0 16px 72px 0 rgba(56,56,99,0.28);
  background: #fff;
  z-index: 10;
  opacity: 1;
  border-color: #3A1C54;
}
.about-card:hover .about-card-title,
.about-card:hover .about-card-icon {
  opacity: 0;
  pointer-events: none;
}
.about-card:hover .about-card-desc,
.about-card:focus .about-card-desc {
  opacity: 1;
  max-height: 1000px;
  padding: 0 15px;
  pointer-events: auto;
}

/* ============ 关键新增：推开“悬停卡片左侧的所有卡片” ============ */
/* 仅桌面端启用；移动端为 2×2 网格不做推开逻辑 */
@media (min-width: 601px) {
  /* 计算左推距离：放大额外宽度 + 一点缓冲(≈半个 gap) */
  .about-cards-row {
    --card-size: 180px;   /* 对应 .about-card 的宽高 */
    --scale: 2.15;        /* 与 :hover 的 scale 保持一致 */
    --push: calc( (var(--scale) - 1) * var(--card-size) + 18px );
  }

  /* 推开所有在“悬停/聚焦卡片”左边的兄弟（使用 ~ 后续兄弟选择器） */
  .about-card:has(~ .about-card:hover),
  .about-card:has(~ .about-card:focus) {
    transform: translateX(calc(var(--push) * -1));
    transition: transform 0.3s ease; /* 覆盖默认 0s，平滑左移 */
  }
}

/* —— 响应式 —— */
@media (max-width: 950px) {
  .about-section { padding: 0 8px; }
  .about-cards-row { gap: 8px; margin-left: 0; }
  .about-card { width: 90px; height: 90px; }
  .about-card-icon img { width: 17px; height: 17px; }

  /* 仅放大标题的小屏字号 */
  .about-card-title { font-size: 0.82rem; }  /* 0.67rem → 0.82rem */
  .about-card-desc  { font-size: 0.45rem; }  /* 保持原值 */

  .who-we-are-btn {
    left: 12px;
    top: 20px;
    min-width: 120px;
    min-height: 36px;
    font-size: 0.9rem;
    padding: 0.4em 1.2em;
  }
}

@media (max-width: 600px) {
  .about-section { padding-top: 18px; }
  .about-cards-row {
    flex-direction: column;
    gap: 12px;
    margin-left: 0;
  }
  .about-card { margin-bottom: 0; }
  .who-we-are-btn {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 20px;
  }
}

/* ≤600px：切换 2×2 网格与四个角的放大原点，保持你原逻辑 */
@media (max-width: 600px) {
  /* 1. 整体切换成竖向，所有元素水平居中 */
  .about-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1rem !important;
  }

  /* 2. 按钮改成静态流式，水平居中 */
  .who-we-are-btn {
    position: static !important;
    margin: 0 0 1rem !important;
    left: auto !important;
    top: auto !important;
  }

  /* 3. 卡片容器切成 2 列 Grid，并水平居中 */
  .about-cards-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    justify-items: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
  }

  /* 4. 卡片尺寸调整（同步变量以免突兀） */
  .about-card {
    width: 140px !important;
    height: 140px !important;
    margin: 0 !important;
  }

  /* 5. 放大朝网格中心的 transform-origin */
  .about-cards-row .about-card:nth-child(1):hover,
  .about-cards-row .about-card:nth-child(1):focus {
    transform-origin: top left !important;
  }
  .about-cards-row .about-card:nth-child(2):hover,
  .about-cards-row .about-card:nth-child(2):focus {
    transform-origin: top right !important;
  }
  .about-cards-row .about-card:nth-child(3):hover,
  .about-cards-row .about-card:nth-child(3):focus {
    transform-origin: bottom left !important;
  }
  .about-cards-row .about-card:nth-child(4):hover,
  .about-cards-row .about-card:nth-child(4):focus {
    transform-origin: bottom right !important;
  }
}

/* 小屏隐藏图标（保留原规则） */
@media (max-width: 768px) {
  .about-card-icon {
    display: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9d85bbe *//* === ① 容器：强制用 Grid 并允许换行 === */
body .woocommerce ul.products{
    display:grid !important;                 /* 覆盖 Elementor / 主题自带的 flex */
    grid-template-columns:repeat(4,1fr);     /* 桌面 4 列 */
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

/* === ② 产品项：去掉旧的 width 并保持正方形 === */
body .woocommerce ul.products li.product-category{
    width:auto !important;                   /* 抹掉你之前写死的 160px */
    aspect-ratio:1 / 1;
    overflow:hidden;
}

/* === ③ 平板（≤1024 px）：3 列 === */
@media (max-width:1024px){
    body .woocommerce ul.products{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

/* === ④ 手机（≤767 px）：2 列 === */
@media (max-width:767px){
    body .woocommerce ul.products{
        grid-template-columns:repeat(2,1fr) !important;
    }
}/* End custom CSS */
/* Start custom CSS for wc-categories, class: .elementor-element-c3a98e7 *//* —— 一、彻底移除主题/Elementor 白色 hover 遮罩 —— */
.woocommerce ul.products li.product-category a::before,
.woocommerce ul.products li.product-category a:hover::before {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* —— 二、基础布局 —— */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 0;
}
.woocommerce ul.products li.product-category {
  width: 160px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.woocommerce ul.products li.product-category a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.woocommerce ul.products li.product-category img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

/* —— 三、标题：左上角，无阴影 —— */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 0;
  background: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: bold;
  z-index: 5;
}

/* —— 四、用 li::before 做底部全宽渐变遮罩 —— */
.woocommerce ul.products li.product-category::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 80px !important; /* 可调 */
  background: linear-gradient(to bottom, rgba(41,30,65,0) 0%, #291E41 100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important;
}

/* —— 六、悬停联动：显示遮罩 —— */
.woocommerce ul.products li.product-category:hover img {
  transform: scale(1.05) !important;
}
.woocommerce ul.products li.product-category:hover::before {
  opacity: 1 !important;
}


/* —— 五、用 ::after 做悬停按钮 —— */
.woocommerce ul.products li.product-category a::after {
  content: "READ MORE";
  position: absolute;
  bottom: 16px;           /* 离底部留 16px */
  left: 50%;
  transform: translateX(-50%);
  background: #B6B2D6;     /* 按钮背景色 */
  color: #3A1C54;          /* 按钮文字色 */
  font-size: 14px;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 0px;      /* 矩形角度，改小成 4px 或 0 */
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3;
}


/* —— 六、悬停联动 —— */
.woocommerce ul.products li.product-category:hover img {
  transform: scale(1.05);
}
.woocommerce ul.products li.product-category:hover a::before {
  opacity: 1;
}
.woocommerce ul.products li.product-category:hover a::after {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}

/* —— 七、移动端自适应 —— */
@media (max-width: 768px) {
  .woocommerce ul.products li.product-category {
    width: 44vw;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-adfcd46 *//* === Ultra-wide 连续自适应（微调：主卡更小、侧卡多露）=== */
.custom-slider-section{
  /* 1) 总体宽度边界（稍微收一点） */
  --card-min: 320px;
  --card-ideal: 58vw;          /* 原 62vw -> 58vw，让主卡更娇小 */
  --card-max: 920px;           /* 原 960px -> 920px，避免过高 */

  /* 2) 主/侧缩放与露头 */
  --scale-active: 1.07;        /* 原 1.12 -> 1.07，降低中心放大高度 */
  --side-scale: .88;           /* 新增：侧卡缩小一点点 */
  --card-w: clamp(var(--card-min), var(--card-ideal), var(--card-max));
  --peek: clamp(80px, calc(var(--card-w) * 0.18), 280px);
  /* ↑ 露头 = 18% 的卡片宽，最低 80px、最多 280px */

  /* 3) 箭头尺寸与距离 */
  --arrow-size: clamp(36px, 4vw, 56px);
  --arrow-offset: 56px;        /* 原 64 -> 56，贴近一点 */
}

/* 容器别裁切，放大后不被截断 */
.custom-slider-section .custom-slider{ overflow: visible; }

/* 轨道由 clamp 控制，16:9 比例；彻底摆脱固定尺寸 */
.custom-slider-section .slider-track{
  width: var(--card-w) !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  position: relative;
}

/* 卡片统一占满轨道，去掉固定宽高 */
.custom-slider-section .slider-slide{
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

/* —— 三态：主卡 + 左右露头 —— */
.custom-slider-section .slider-slide.active{
  transform: translate(-50%, -50%) scale(var(--scale-active)) !important;
  filter: none !important; z-index: 10; pointer-events: auto;
}
.custom-slider-section .slider-slide.left{
  transform: translate(calc(-50% - var(--peek)), -50%) scale(var(--side-scale)) !important;
  filter: blur(6px) brightness(.88) !important;
  opacity: 1; z-index: 5; pointer-events: none;
}
.custom-slider-section .slider-slide.right{
  transform: translate(calc(-50% + var(--peek)), -50%) scale(var(--side-scale)) !important;
  filter: blur(6px) brightness(.88) !important;
  opacity: 1; z-index: 5; pointer-events: none;
}

/* 媒体盒填满卡片 */
.custom-slider-section .yt-box,
.custom-slider-section .slider-slide iframe{
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border-radius: 32px; border: none; display: block;
  object-fit: cover; background:#000;
}


/* === MOBILE 最终补丁：更窄视频 + 可见露头 + 箭头贴外沿，对原样式强制覆盖 === */
@media (max-width:600px){

  /* 旋钮：按需改这几个就行 */
  .custom-slider-section{
    --w: 66vw;        /* 视频可视宽度（越小越矮；64–70vw 之间调） */
    --scale: 1.02;    /* 中间卡轻微放大；不要放大 = 1 */
    --peek: 14vw;     /* 左右露头（增大=露得更多） */
    --gap: -15px;       /* 箭头与视频边距 */
    --arrow: 26px;    /* 箭头大小 */
  }

  /* 1) 轨道：严格 16:9 + 限高；清掉桌面的 min-height 影响 */
  .custom-slider-section .slider-track{
    width: clamp(280px, var(--w), 700px) !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    min-height: 0 !important;              /* 覆盖你桌面写的 420px */
    position: relative !important;
    margin: 0 auto !important;
    overflow: visible !important;
    display: block !important;
  }

  /* 2) 卡片：以轨道中心为参照（top/left:50%），再用 translate 摆位 */
  .custom-slider-section .slider-slide{
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 100% !important; height: auto !important;
    aspect-ratio: 16/9 !important;
    border-radius: 16px !important;
    background: transparent !important; overflow: hidden !important;
  }
  .custom-slider-section .slider-slide.active{
    transform: translate(-50%,-50%) scale(var(--scale)) !important;
    z-index:10 !important; filter:none !important; pointer-events:auto !important;
  }
  .custom-slider-section .slider-slide.left{
    transform: translate(calc(-50% - var(--peek)),-50%) scale(.90) !important;
    opacity:1 !important; z-index:5 !important; filter: blur(6px) !important; pointer-events:none !important;
  }
  .custom-slider-section .slider-slide.right{
    transform: translate(calc(-50% + var(--peek)),-50%) scale(.90) !important;
    opacity:1 !important; z-index:5 !important; filter: blur(6px) !important; pointer-events:none !important;
  }

  /* 3) 视频盒/封面/iframe 全部 16:9 铺满（覆盖你原来的 90vw/52vw） */
  .custom-slider-section .yt-box,
  .custom-slider-section .slider-slide iframe{
    width:100% !important; height:auto !important; aspect-ratio:16/9 !important;
    border:0 !important; display:block !important;
  }

  /* 4) 箭头：不要再贴屏幕边。按“放大后的视频外沿”来放，且钳位不出屏 */
  .custom-slider-section .slider-arrow{
    position: absolute !important;
    top: 50% !important; transform: translateY(-50%) !important;
    width: var(--arrow) !important; height: var(--arrow) !important;
    z-index: 120 !important;
  }
  /* 先把你之前 left:8px/right:8px 彻底清零 */
  .custom-slider-section .slider-arrow-left,
  .custom-slider-section .slider-arrow-right{ left:auto !important; right:auto !important; }

  .custom-slider-section .slider-arrow-left{
    left: max(
      8px,
      calc( 50%
            - (clamp(280px, var(--w), 700px) * var(--scale) * .5)
            - var(--gap) - (var(--arrow)/2) )
    ) !important;
  }
  .custom-slider-section .slider-arrow-right{
    left: min(
      calc(100vw - var(--arrow) - 8px),
      calc( 50%
            + (clamp(280px, var(--w), 700px) * var(--scale) * .5)
            + var(--gap) - (var(--arrow)/2) )
    ) !important;
  }
}


/* === 手机端最终修正：去钉死、变窄、露头、箭头贴外且对称 === */
@media (max-width:600px){

  /* 统一旋钮 */
  .custom-slider-section{
    --w: 66vw;      /* 视频可视宽度：太宽就 64vw/62vw */
    --scale: 1.02;  /* 中间卡放大；不要放大=1 */
    --peek: 14vw;   /* 左右露头 */
    --gap: 10px;    /* 箭头与视频外缘的距离（必须是正数） */
    --arrow: 26px;  /* 箭头大小 */
    --pad: 0px;     /* 距屏幕最小留白；容器左右有 12px padding 就设 12px */
  }

  /* 先把手机端旧定位统统清零（压过你原来的 8px/auto 等） */
  .custom-slider-section .slider-arrow{
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    width:var(--arrow) !important; height:var(--arrow) !important;
    left:auto !important; right:auto !important; z-index:120 !important;
  }

  /* 轨道：严格 16:9 + 居中；清掉桌面 min-height 泄漏 */
  .custom-slider-section .slider-track{
    width: var(--w) !important;
    aspect-ratio: 16/9 !important;
    height:auto !important; min-height:0 !important;
    position:relative !important; margin-inline:auto; overflow:visible !important;
  }

  /* 卡片/封面/iframe：不要 90vw/52vw，统一跟轨道等比 */
  .custom-slider-section .slider-slide{
    position:absolute !important; top:50% !important; left:50% !important;
    width:100% !important; height:auto !important; aspect-ratio:16/9 !important;
    border-radius:16px !important; background:transparent !important; overflow:hidden !important;
  }
  .custom-slider-section .yt-box,
  .custom-slider-section .slider-slide iframe{
    width:100% !important; height:auto !important; aspect-ratio:16/9 !important; object-fit:cover !important;
  }

  /* 三态（按你的露头/放大） */
  .custom-slider-section .slider-slide.active{
    transform: translate(-50%, -50%) scale(var(--scale)) !important; z-index:10 !important; filter:none !important;
  }
  .custom-slider-section .slider-slide.left{
    transform: translate(calc(-50% - var(--peek)), -50%) scale(.90) !important;
    opacity:1; z-index:5; filter:blur(6px); pointer-events:none;
  }
  .custom-slider-section .slider-slide.right{
    transform: translate(calc(-50% + var(--peek)), -50%) scale(.90) !important;
    opacity:1; z-index:5; filter:blur(6px); pointer-events:none;
  }

  /* 箭头：按“放大后的视频外沿”对称定位（整颗在外），并钳在屏内 */
  .custom-slider-section .custom-slider > .slider-arrow-left{
    left: max(
      var(--pad),
      calc( 50% - (var(--w) * var(--scale) * .5) - var(--gap) - var(--arrow) )
    ) !important;
    right:auto !important;
  }
  .custom-slider-section .custom-slider > .slider-arrow-right{
    left: min(
      calc(100vw - var(--pad) - var(--arrow)),
      calc( 50% + (var(--w) * var(--scale) * .5) + var(--gap) )
    ) !important;
    right:auto !important;
  }
}

/* === Desktop 复位：箭头离视频更远，且只用 left 定位（不受旧 right 影响）=== */
@media (min-width:601px){
  .custom-slider-section{
    /* 调这一个就能控制桌面端箭头距离视频外缘的间距 */
    --arrow-offset: 96px;  /* 想更远就 112px / 128px；想近就 80px */
  }

  /* 统一用 left + 变量计算，清掉任何 right 的干扰 */
  .custom-slider-section .slider-arrow-left{
    left: calc(50% - (var(--card-w) * var(--scale-active) * .5) - var(--arrow-offset)) !important;
    right: auto !important;
  }
  .custom-slider-section .slider-arrow-right{
    left: calc(50% + (var(--card-w) * var(--scale-active) * .5) + var(--arrow-offset)) !important;
    right: auto !important;
  }

  /* 如果你发现桌面箭头尺寸也被改小了，可以在这里恢复：*/
  .custom-slider-section .slider-arrow{
    width: clamp(36px, 4vw, 56px) !important;
    height: clamp(36px, 4vw, 56px) !important;
  }
}/* End custom CSS */