.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-meta .product_meta .detail-container:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-681 .elementor-element.elementor-element-0d0556a{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-681 .elementor-element.elementor-element-0d0556a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-681 .elementor-element.elementor-element-f467301{--display:flex;}.elementor-681 .elementor-element.elementor-element-17c06b8{--display:flex;}.elementor-681 .elementor-element.elementor-element-efdb30e{--display:flex;}.elementor-681 .elementor-element.elementor-element-64ef843{--display:flex;}.elementor-681 .elementor-element.elementor-element-07f0371{--display:flex;}.elementor-681 .elementor-element.elementor-element-4224d7b{--display:flex;}.elementor-681 .elementor-element.elementor-element-8b4d4c5{--display:flex;}.elementor-681 .elementor-element.elementor-element-82482cf{--display:flex;}.elementor-681 .elementor-element.elementor-element-daa87d1{--display:flex;}.elementor-681 .elementor-element.elementor-element-1e1cb66{--display:flex;}.elementor-681 .elementor-element.elementor-element-47b8272{--display:flex;}.elementor-681 .elementor-element.elementor-element-2c1b848{--display:flex;}.elementor-681 .elementor-element.elementor-element-33c6e15{--display:flex;}.elementor-681 .elementor-element.elementor-element-0160b23{--display:flex;}.elementor-681 .elementor-element.elementor-element-af1b3a8{--display:flex;}.elementor-681 .elementor-element.elementor-element-77120c5{--display:flex;}.elementor-681 .elementor-element.elementor-element-2b8bffc{--display:flex;}.elementor-681 .elementor-element.elementor-element-7b3c464{--display:flex;}.elementor-681 .elementor-element.elementor-element-c89293b{--display:flex;}.elementor-681 .elementor-element.elementor-element-cb6e736{--display:flex;}.elementor-681 .elementor-element.elementor-element-f3138ab{--display:flex;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-681 .elementor-element.elementor-element-0e4c2df{--grid-columns:3;}.elementor-681 .elementor-element.elementor-element-0e4c2df .elementor-loop-container{grid-auto-rows:1fr;}.elementor-681 .elementor-element.elementor-element-0e4c2df .e-loop-item > .elementor-section, .elementor-681 .elementor-element.elementor-element-0e4c2df .e-loop-item > .elementor-section > .elementor-container, .elementor-681 .elementor-element.elementor-element-0e4c2df .e-loop-item > .e-con, .elementor-681 .elementor-element.elementor-element-0e4c2df .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}@media(max-width:1024px){.elementor-681 .elementor-element.elementor-element-0e4c2df{--grid-columns:2;}}@media(max-width:767px){.elementor-681 .elementor-element.elementor-element-0e4c2df{--grid-columns:1;}}/* Start custom CSS for container, class: .elementor-element-f467301 *//* ============================================================================
   BYLEN 产品详情页 / INSTALLATION LOGIC

   作用：还原设计图中“Specify the complete system.”四步安装逻辑区域。
   范围：只负责 Installation Logic，不包含 Engineering Detail，
         也不包含 Recommended Applications。

   Elementor 结构必须与 installation-logic-structure.html 一致：
   Section
   └─ Inner
      ├─ Intro
      │  ├─ Heading（Kicker + Title）
      │  └─ Description
      └─ Steps
         └─ Step × 4（Number + Title + Copy）
   ============================================================================ */

/* 01. 区域最外层
   浅灰背景与规格区保持一致；上下留白对应设计图的开阔版式。 */
.elementor-681 .elementor-element.elementor-element-f467301 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(76px, 6.4vw, 98px) 10px 86px !important;
  color: #101820;
  background: #f4f7f9 !important;
}

/* Elementor 的 Boxed Container 会额外生成 1280px 的包装层；解除该限制。 */
.elementor-681 .elementor-element.elementor-element-f467301 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
}

/* 02. 内容宽度
   与当前产品详情页其他主体区域使用相同的最大宽度和左右安全距离。 */
.bylen-installation-inner {
  width: calc(100% - 48px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding: 0 36px !important;
}

/* 03. 上方介绍区
   左边是 Kicker + 主标题，右边是说明文字；底部留出 48px 后进入步骤区。 */
.bylen-installation-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr) !important;
  align-items: end !important;
  gap: clamp(56px, 6vw, 100px) !important;
  width: 100% !important;
  margin: 0 0 48px !important;
  padding: 0 10px !important;
}

/* Elementor 容器和小工具默认宽度可能不是 100%，这里统一清除。 */
.bylen-installation-heading,
.bylen-installation-kicker,
.bylen-installation-title,
.bylen-installation-description {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bylen-installation-heading {
  gap: 0 !important;
  padding: 0 !important;
}

/* 04. 蓝色小标题：INSTALLATION LOGIC */
.bylen-installation-kicker,
.bylen-installation-kicker .elementor-heading-title {
  margin-top: 0 !important;
  color: #53636d !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.bylen-installation-kicker {
  margin-bottom: 0 !important;
}

.bylen-installation-kicker .elementor-heading-title {
  margin-bottom: 18px !important;
}

/* 05. 主标题
   Manrope 中等字重；使用紧凑行高和负字距还原设计图。 */
.bylen-installation-title,
.bylen-installation-title .elementor-heading-title {
  max-width: 760px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #101820 !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 43px !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}

/* 06. 右侧说明文字 */
.bylen-installation-description,
.bylen-installation-description p {
  max-width: 610px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #68737d !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* 07. 四步总容器
   顶部深色双像素线是这个区域最重要的视觉基准。 */
.bylen-installation-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: calc(100% - 20px) !important;
  margin: 0 10px !important;
  padding: 0 !important;
  border-top: 2px solid #101820 !important;
}

/* 08. 单个步骤
   每列等宽；竖线由每个 Step 的右边框构成，最后一列不显示右边框。 */
.bylen-installation-step {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
  min-height: 244px;
  margin: 0 !important;
  padding: 28px 30px 32px !important;
  border-right: 1px solid #d9e1e7 !important;
}

.bylen-installation-step:first-child {
  padding-left: 0 !important;
}

.bylen-installation-step:last-child {
  padding-right: 0 !important;
  border-right: 0 !important;
}

/* 09. 步骤编号，例如 01 / CONTROL */
.bylen-installation-step-number,
.bylen-installation-step-number .elementor-heading-title {
  margin: 0 !important;
  color: #087dff !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* 10. 步骤标题
   margin-top:68px 形成设计图中编号与标题之间的大块呼吸空间。 */
.bylen-installation-step-title,
.bylen-installation-step-title .elementor-heading-title {
  color: #101820 !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}

.bylen-installation-step-title {
  margin: 68px 0 14px !important;
}

.bylen-installation-step-title .elementor-heading-title {
  margin: 0 !important;
}

/* 11. 步骤说明 */
.bylen-installation-step-copy,
.bylen-installation-step-copy p {
  margin: 0 !important;
  color: #68737d !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

/* 12. 平板：四列改为两列
   第一行第 1、2 项增加底边线；第 2 项取消右边线。 */
@media (max-width: 1100px) {
  .bylen-installation-intro {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr) !important;
    gap: 44px !important;
  }

  .bylen-installation-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bylen-installation-step:nth-child(2) {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .bylen-installation-step:nth-child(-n + 2) {
    border-bottom: 1px solid #d9e1e7 !important;
  }

  .bylen-installation-step:nth-child(3) {
    padding-left: 0 !important;
  }
}

/* 13. 手机：介绍和步骤全部改为单列 */
@media (max-width: 767px) {
  .elementor-681 .elementor-element.elementor-element-f467301 {
    padding: 64px 0 !important;
  }

  .bylen-installation-inner {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .bylen-installation-intro {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 22px !important;
    margin-bottom: 38px !important;
    padding: 0 !important;
  }

  .bylen-installation-title,
  .bylen-installation-title .elementor-heading-title {
    font-size: 39px !important;
  }

  .bylen-installation-description,
  .bylen-installation-description p {
    font-size: 14px !important;
  }

  .bylen-installation-steps {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .bylen-installation-step,
  .bylen-installation-step:first-child,
  .bylen-installation-step:nth-child(2),
  .bylen-installation-step:nth-child(3),
  .bylen-installation-step:last-child {
    min-height: 0;
    padding: 27px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d9e1e7 !important;
  }

  .bylen-installation-step:last-child {
    border-bottom: 0 !important;
  }

  .bylen-installation-step-title {
    margin-top: 34px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1e1cb66 *//* ============================================================================
   BYLEN 产品详情页 / DOWNLOADS
   仅负责 Downloads 区域；粘贴到 Section — Downloads 的 Custom CSS。
   ============================================================================ */

/* 外层 Container 使用 Elementor 的 .elementor-681 .elementor-element.elementor-element-1e1cb66；同时解除 Boxed 包装层限制。 */
.elementor-681 .elementor-element.elementor-element-1e1cb66 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 98px 10px !important;
  color: #101820;
  background: #ffffff !important;
}

.elementor-681 .elementor-element.elementor-element-1e1cb66 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
}

/* 与 Technical Data 使用相同的主体宽度。 */
.bylen-downloads-inner {
  width: calc(100% - 48px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding: 0 36px !important;
  gap: 0 !important;
}

/* 标题与说明左右排列。 */
.bylen-downloads-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr) !important;
  align-items: end !important;
  width: 100% !important;
  margin: 0 0 48px !important;
  padding: 0 10px !important;
  gap: clamp(56px, 6vw, 100px) !important;
}

.bylen-downloads-heading {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.bylen-downloads-kicker,
.bylen-downloads-title,
.bylen-downloads-description {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 统一分区 Kicker：IBM Plex Mono、灰色、与主标题间距 18px。 */
.bylen-downloads-kicker,
.bylen-downloads-kicker .elementor-heading-title {
  margin-top: 0 !important;
  color: #53636d !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.bylen-downloads-kicker {
  margin-bottom: 0 !important;
}

.bylen-downloads-kicker .elementor-heading-title {
  margin-bottom: 18px !important;
}

/* 统一分区主标题。 */
.bylen-downloads-title,
.bylen-downloads-title .elementor-heading-title {
  max-width: 760px;
  margin: 0 !important;
  color: #101820 !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 43px !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}

.bylen-downloads-description,
.bylen-downloads-description p {
  max-width: 610px;
  margin: 0 !important;
  color: #68737d !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* 三张资源卡片。 */
.bylen-downloads-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: calc(100% - 20px) !important;
  margin: 0 10px !important;
  padding: 0 !important;
  gap: 6px !important;
}

.bylen-downloads-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 235px;
  margin: 0 !important;
  padding: 28px !important;
  gap: 0 !important;
  border: 1px solid #d9e1e7 !important;
  background: #ffffff !important;
}

.bylen-downloads-card-type,
.bylen-downloads-card-title,
.bylen-downloads-card-copy,
.bylen-downloads-card-action,
.bylen-downloads-card-status {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bylen-downloads-card-type,
.bylen-downloads-card-type .elementor-heading-title {
  margin: 0 !important;
  color: #76858f !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.bylen-downloads-card-title,
.bylen-downloads-card-title .elementor-heading-title {
  color: #101820 !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}

.bylen-downloads-card-title {
  margin: 42px 0 10px !important;
}

.bylen-downloads-card-title .elementor-heading-title {
  margin: 0 !important;
}

.bylen-downloads-card-copy,
.bylen-downloads-card-copy p {
  margin: 0 !important;
  color: #68737d !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.bylen-downloads-card-action,
.bylen-downloads-card-status {
  margin-top: auto !important;
  padding-top: 24px !important;
}

.bylen-downloads-card-action .elementor-button {
  min-height: 0 !important;
  padding: 0 !important;
  color: #101820 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
}

.bylen-downloads-card-action .elementor-button:hover,
.bylen-downloads-card-action .elementor-button:focus-visible {
  color: #087dff !important;
  background: transparent !important;
}

.bylen-downloads-card-status,
.bylen-downloads-card-status .elementor-heading-title {
  color: #98a3aa !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

@media (max-width: 1024px) {
  .bylen-downloads-intro {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 22px !important;
  }

  .bylen-downloads-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bylen-downloads-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .elementor-681 .elementor-element.elementor-element-1e1cb66 {
    padding: 64px 0 !important;
  }

  .bylen-downloads-inner {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .bylen-downloads-intro {
    margin-bottom: 38px !important;
    padding: 0 !important;
  }

  .bylen-downloads-title,
  .bylen-downloads-title .elementor-heading-title {
    font-size: 39px !important;
  }

  .bylen-downloads-description,
  .bylen-downloads-description p {
    font-size: 14px !important;
  }

  .bylen-downloads-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .bylen-downloads-card:last-child {
    grid-column: auto;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b3c464 *//* ============================================================================
   BYLEN 产品详情页 / RELATED PRODUCTS

   作用：还原产品详情页底部“Related COB configurations.”动态相关产品区域。
   粘贴位置：Section — Related Products → Advanced → Custom CSS。

   本文件同时负责两部分：
   1. Single Product Template 中的分区标题与 Loop Grid；
   2. Loop Item — Related COB Product 中的单张动态产品卡片。

   Elementor 结构与 CSS Class：
   Section — Related Products       = bylen-related-section（最外层，CSS 使用 .elementor-681 .elementor-element.elementor-element-7b3c464）
   └─ Related Products — Inner      = bylen-related-inner
      ├─ Related Products — Introduction = bylen-related-intro
      │  ├─ Related Products — Heading Block = bylen-related-heading
      │  │  ├─ Related Products — Kicker = bylen-related-kicker
      │  │  └─ Related Products — Title  = bylen-related-section-title
      │  └─ Related Products — Description = bylen-related-description
      └─ Related Products — Grid    = bylen-related-grid

   Loop Item 模板结构：
   Related Product — Card           = bylen-related-card
   ├─ Related Product — Image       = bylen-related-image
   └─ Related Product — Body        = bylen-related-body
      ├─ Related Product — Meta     = bylen-related-meta
      │  ├─ Related Product — Model = bylen-related-product-model
      │  └─ Related Product — Series = bylen-related-product-series
      ├─ Related Product — Title    = bylen-related-title
      └─ Related Product — Specs    = bylen-related-specs
         └─ 每个动态参数 Heading    = bylen-related-spec

   动态数据来源：
   - Model：WooCommerce SKU；
   - Series：ACF Color Type；
   - Title：Elementor Post Title；
   - Voltage / Power / Width / CRI：对应 ACF 字段；
   - Image：当前允许使用占位图，产品资料完善后改为动态 Featured Image。
   ============================================================================ */

/* 01. 分区最外层
   .elementor-681 .elementor-element.elementor-element-7b3c464 代表当前 Section — Related Products Container。
   使用全宽浅灰背景；左右 10px 用于对齐 Elementor 现有产品详情布局。 */
.elementor-681 .elementor-element.elementor-element-7b3c464 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 98px 10px !important;
  color: #101820;
  background: #f4f7f9 !important;
}

/* 01-A. 与 Installation Logic、Downloads 完全一致：
   解除 Elementor 在 Boxed Container 外自动生成的 1280px 包装层限制。
   缺少这一层覆盖时，即使 Section 选了 Full Width，Related Products 的
   实际内容宽度和左右起点仍可能与上一分区不同。 */
.elementor-681 .elementor-element.elementor-element-7b3c464 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
}

/* 02. 主体内容宽度
   与 Technical Data、Installation Logic 和 Downloads 使用相同的 1600px 上限。
   48px 外围安全距离与 36px 内边距共同保持宽屏和普通桌面的稳定对齐。 */
.bylen-related-inner {
  width: calc(100% - 48px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding: 0 36px !important;
  gap: 0 !important;
}

/* 03. 标题介绍区
   桌面端左侧为 Kicker + H2，右侧为说明正文；底部 48px 后进入产品网格。
   minmax 防止长标题或长正文把页面横向撑开。 */
.bylen-related-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr) !important;
  align-items: end !important;
  width: 100% !important;
  margin: 0 0 48px !important;
  padding: 0 10px !important;
  gap: clamp(56px, 6vw, 100px) !important;
}

/* 04. Heading Block
   清除 Elementor Container 默认的 padding 和 gap，避免 Kicker 与标题间距叠加。 */
.bylen-related-heading {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* 清除三个标题组件自身的左右偏移，让它们从同一垂直基准线开始。 */
.bylen-related-kicker,
.bylen-related-section-title,
.bylen-related-description {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 05. 分区 Kicker：COMPARE THE RANGE
   与 Technical Data 等其他分区统一使用 IBM Plex Mono、灰色和 10px 字号。 */
.bylen-related-kicker,
.bylen-related-kicker .elementor-heading-title {
  margin-top: 0 !important;
  color: #53636d !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

/* Widget 外层不承担间距，避免 Elementor 外层与内部标题重复计算 margin。 */
.bylen-related-kicker {
  margin-bottom: 0 !important;
}

/* Kicker 与 H2 之间只保留一次 18px 间距。 */
.bylen-related-kicker .elementor-heading-title {
  margin-bottom: 18px !important;
}

/* 06. 分区主标题
   与产品页其他同级分区统一为 Manrope 43px / 500，不使用随屏幕放大的 clamp。 */
.bylen-related-section-title,
.bylen-related-section-title .elementor-heading-title {
  max-width: 760px;
  margin: 0 !important;
  color: #101820 !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 43px !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}

/* 07. 右侧说明正文
   610px 最大宽度避免宽屏时形成过长的阅读行。 */
.bylen-related-description,
.bylen-related-description p {
  max-width: 610px;
  margin: 0 !important;
  color: #68737d !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* 08. Loop Grid Widget 外层
   左右 10px 与 Introduction 内容边界一致。 */
.bylen-related-grid {
  width: calc(100% - 20px) !important;
  margin: 0 10px !important;
  padding: 0 !important;
}

/* Elementor Loop Grid 真正控制列数的是内部 .elementor-loop-container。
   桌面端固定三列；6px 缝隙还原设计参考中紧凑的产品卡片排列。 */
.bylen-related-grid .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

/* 09. 单个动态产品卡片
   height:100% 配合 Loop Grid Equal Height，让三张卡片底部参数行保持齐平。
   默认边框透明，Hover 时显示品牌蓝边框并轻微上移。 */
.bylen-related-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid transparent;
  background: #ffffff !important;
  transition: border-color 180ms ease, transform 180ms ease;
}

/* 卡片 Hover 反馈只改变边框和位移，不改变内容尺寸。 */
.bylen-related-card:hover {
  border-color: #087dff;
  transform: translateY(-2px);
}

/* 10. 产品图片 Widget
   Widget 自身占满卡片宽度，不保留 Elementor 默认 margin。 */
.bylen-related-image {
  width: 100% !important;
  margin: 0 !important;
}

/* 统一使用 1.6:1 的横向产品图比例。
   object-fit:cover 允许当前占位图和未来 Featured Image 以同一比例裁切。 */
.bylen-related-image img {
  display: block;
  width: 100% !important;
  aspect-ratio: 1.6 / 1;
  object-fit: cover;
  background: #cbd4da;
}

/* 11. 卡片文字区
   flex:1 让 Body 占据图片下方剩余高度，为底部 Specs 的自动对齐提供空间。 */
.bylen-related-body {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 24px !important;
  gap: 0 !important;
  align-items: stretch !important;
  text-align: left !important;
}

/* Elementor 的 Loop Item 可能在各个 Heading Widget 上保存了居中设置。
   这里统一覆盖卡片正文内的对齐方式，避免型号、系列和参数出现在卡片中线。 */
.bylen-related-body .elementor-widget,
.bylen-related-body .elementor-widget-container,
.bylen-related-body .elementor-heading-title {
  text-align: left !important;
}

/* 12. 型号与系列 Meta 行
   两个动态值横向排列并允许窄卡片换行。 */
.bylen-related-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  justify-content: flex-start !important;
}

/* Model 和 Series 的 Widget 宽度只随内容增长，不各自占满整行。 */
.bylen-related-product-model,
.bylen-related-product-series {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* 型号允许收缩；产品型号过长时使用省略号，避免把 Color Series 挤到下一行。 */
.bylen-related-product-model {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.bylen-related-product-model .elementor-heading-title {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Color Series 保持完整显示，并与型号处在同一基线上。 */
.bylen-related-product-series {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* 技术辅助信息统一使用 IBM Plex Mono。
   由原来的 9px 提高为 11px，保证桌面端实际阅读清晰。 */
.bylen-related-product-model .elementor-heading-title,
.bylen-related-product-series .elementor-heading-title {
  margin: 0 !important;
  color: #53636d !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* Atomic Heading 可能不使用传统 .elementor-heading-title 标记，
   因此同时覆盖 Widget 内的链接和普通文本节点。 */
.bylen-related-meta,
.bylen-related-meta * {
  color: #637580 !important;
  text-align: left !important;
}

/* 颜色层级：
   型号使用品牌蓝作为产品识别信息；系列保持技术灰，避免整张卡片过度彩色。
   这些规则放在通用 Meta 覆盖之后，以保证 Elementor 全局颜色无法覆盖。 */
.bylen-related-product-model,
.bylen-related-product-model * {
  color: #087dff !important;
}

.bylen-related-product-series,
.bylen-related-product-series * {
  color: #53636d !important;
}

/* 动态值可能由 Elementor 输出为链接。
   分别指定颜色，避免旧的通用灰色链接规则覆盖型号的品牌蓝。 */
.bylen-related-product-model a {
  color: #087dff !important;
  text-decoration: none !important;
}

.bylen-related-product-series a {
  color: #53636d !important;
  text-decoration: none !important;
}

/* 在 Color Series 前插入中点，保证型号被省略时分隔符仍然可见。 */
.bylen-related-product-series .elementor-heading-title::before {
  content: "· ";
  color: #8aa4b5 !important;
}

/* 13. 动态产品标题 Widget 外层
   上方 12px 与 Meta 分隔；下方 18px 为参数行留出呼吸空间。 */
.bylen-related-title {
  width: 100% !important;
  margin: 12px 0 18px !important;
}

/* 产品标题由 Post Title 动态读取，使用 H3 语义。 */
.bylen-related-title .elementor-heading-title {
  margin: 0 !important;
  color: #101820 !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}

/* 清除主题默认链接色和下划线，让动态标题继承卡片标题样式。 */
.bylen-related-title a {
  color: inherit !important;
  text-decoration: none !important;
}

/* 14. 四个动态参数总容器
   margin-top:auto 把参数行推到卡片底部；顶部细线建立清晰的信息分区。 */
.bylen-related-specs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 16px 0 0 !important;
  gap: 8px 16px !important;
  border-top: 1px solid #d9e1e7 !important;
  justify-content: flex-start !important;
}

/* 每个参数只占内容宽度，四项可在空间不足时自然换行。 */
.bylen-related-spec {
  flex: 0 0 auto !important;
  width: fit-content !important;
  margin: 0 !important;
  align-self: center !important;
  text-align: left !important;
}

/* Voltage、Power、PCB Width、CRI 统一为 IBM Plex Mono 技术数据样式。
   提高到 12px，让底部参数比 Kicker 更容易阅读。 */
.bylen-related-spec .elementor-heading-title {
  margin: 0 !important;
  color: #53636d !important;
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* 同时兼容 Elementor 新版 Heading / Atomic Heading 的内部结构。 */
.bylen-related-specs,
.bylen-related-specs * {
  color: #53636d !important;
  text-align: left !important;
}

/* 防止参数 Heading 的 Widget Container 被 Elementor 拉伸成整行。 */
.bylen-related-spec > .elementor-widget-container {
  width: fit-content !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 15. 平板响应式
   标题区改为上下排列；产品卡片由三列改为两列。 */
@media (max-width: 1024px) {
  .bylen-related-intro {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 22px !important;
  }

  .bylen-related-grid .elementor-loop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 16. 手机响应式
   页面安全距离统一为 16px；标题缩小为 39px；产品卡片改为单列。 */
@media (max-width: 767px) {
  .elementor-681 .elementor-element.elementor-element-7b3c464 {
    padding: 64px 0 !important;
  }

  .bylen-related-inner {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .bylen-related-intro {
    margin-bottom: 38px !important;
    padding: 0 !important;
  }

  .bylen-related-section-title,
  .bylen-related-section-title .elementor-heading-title {
    font-size: 39px !important;
  }

  .bylen-related-description,
  .bylen-related-description p {
    font-size: 14px !important;
  }

  .bylen-related-grid {
    width: 100% !important;
    margin: 0 !important;
  }

  .bylen-related-grid .elementor-loop-container {
    grid-template-columns: 1fr !important;
  }
}/* End custom CSS */