.elementor-165 .elementor-element.elementor-element-45d8c94{--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;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D8DED8;--border-color:#D8DED8;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:40px;--padding-bottom:20px;--padding-left:40px;--padding-right:40px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-165 .elementor-element.elementor-element-2455813{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:left;}.elementor-165 .elementor-element.elementor-element-2455813 .elementor-heading-title{font-family:var( --e-global-typography-339cb6d-font-family ), Sans-serif;font-size:var( --e-global-typography-339cb6d-font-size );font-weight:var( --e-global-typography-339cb6d-font-weight );line-height:var( --e-global-typography-339cb6d-line-height );word-spacing:var( --e-global-typography-339cb6d-word-spacing );color:var( --e-global-color-primary );}.elementor-165 .elementor-element.elementor-element-e26dc65{--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;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D8DED8;--border-color:#D8DED8;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:40px;--padding-right:40px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-165 .elementor-element.elementor-element-fee495d{--divider-border-style:solid;--divider-color:#D8DED8B0;--divider-border-width:1px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-165 .elementor-element.elementor-element-fee495d .elementor-divider-separator{width:100%;}.elementor-165 .elementor-element.elementor-element-fee495d .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-165 .elementor-element.elementor-element-3fd09ea3{--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;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#D8DED8;--border-color:#D8DED8;--padding-top:0px;--padding-bottom:50px;--padding-left:40px;--padding-right:40px;}.elementor-165 .elementor-element.elementor-element-644ef83d{--display:flex;--gap:50px 0px;--row-gap:50px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-165 .elementor-element.elementor-element-ab94db2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-165 .elementor-element.elementor-element-045da78{--divider-border-style:solid;--divider-color:#D8DED8B0;--divider-border-width:1px;margin:-32px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-165 .elementor-element.elementor-element-045da78 .elementor-divider-separator{width:100%;}.elementor-165 .elementor-element.elementor-element-045da78 .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-165 .elementor-element.elementor-element-236ebdf1{--display:flex;--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:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.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-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-165 .elementor-element.elementor-element-10315317{--grid-columns:3;}.elementor-165 .elementor-element.elementor-element-10315317 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-165 .elementor-element.elementor-element-10315317 .e-loop-item > .elementor-section, .elementor-165 .elementor-element.elementor-element-10315317 .e-loop-item > .elementor-section > .elementor-container, .elementor-165 .elementor-element.elementor-element-10315317 .e-loop-item > .e-con, .elementor-165 .elementor-element.elementor-element-10315317 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}@media(min-width:768px){.elementor-165 .elementor-element.elementor-element-45d8c94{--width:2600px;}.elementor-165 .elementor-element.elementor-element-e26dc65{--width:2600px;}.elementor-165 .elementor-element.elementor-element-3fd09ea3{--width:2600px;}.elementor-165 .elementor-element.elementor-element-644ef83d{--width:100%;}}@media(max-width:1440px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-165 .elementor-element.elementor-element-2455813 .elementor-heading-title{font-size:var( --e-global-typography-339cb6d-font-size );line-height:var( --e-global-typography-339cb6d-line-height );word-spacing:var( --e-global-typography-339cb6d-word-spacing );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-165 .elementor-element.elementor-element-2455813 .elementor-heading-title{font-size:var( --e-global-typography-339cb6d-font-size );line-height:var( --e-global-typography-339cb6d-line-height );word-spacing:var( --e-global-typography-339cb6d-word-spacing );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-165 .elementor-element.elementor-element-10315317{--grid-columns:2;}}@media(max-width:767px){.elementor-165 .elementor-element.elementor-element-45d8c94{--padding-top:20px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-165 .elementor-element.elementor-element-2455813 .elementor-heading-title{font-size:var( --e-global-typography-339cb6d-font-size );line-height:var( --e-global-typography-339cb6d-line-height );word-spacing:var( --e-global-typography-339cb6d-word-spacing );}.elementor-165 .elementor-element.elementor-element-e26dc65{--padding-top:20px;--padding-bottom:20px;--padding-left:16px;--padding-right:16px;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-165 .elementor-element.elementor-element-3fd09ea3{--padding-top:0px;--padding-bottom:20px;--padding-left:16px;--padding-right:16px;}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-165 .elementor-element.elementor-element-10315317{--grid-columns:1;}}/* Start custom CSS for wp-widget-wpc_filters_widget, class: .elementor-element-ab94db2 */<!-- 筛选器外层容器 -->
<div class="filter-wrapper">

  <!-- Price -->
  <div class="filter-block">
    <h4>Price</h4>
    <div class="price-range">
      <input type="number" value="45"> -
      <input type="number" value="899">
    </div>
  </div>

  <!-- Search -->
  <div class="filter-block">
    <h4>Search by title</h4>
    <input type="text" placeholder="🔍 Search...">
  </div>

  <!-- Light Type -->
  <div class="filter-block">
    <h4>Light Type</h4>
    <button>LED</button>
    <button>Unlit</button>
  </div>

  <!-- Tree Height -->
  <div class="filter-block">
    <h4>Tree Height</h4>
    <div class="tree-grid">
      <button>5ft</button>
      <button>6ft</button>
      <button>7ft</button>
      <button>8ft</button>
      <button>9ft</button>
      <button>4ft</button>
      <button>7.5ft</button>
      <button>6.5ft</button>
      <button>3ft</button>
      <button>1.6ft</button>
      <button>2ft</button>
      <button>4.5ft</button>
    </div>
  </div>

  <!-- Product Tags -->
  <div class="filter-block">
    <h4>Product tags</h4>
    <p>There are no filter terms yet</p>
  </div>
</div>


<style>
/* 外层 Grid 布局 */
.filter-wrapper {
  display: grid;
  grid-template-columns: 20% 30% 20% 30%; /* 4列布局 */
  gap: 20px; /* 列间距 */
  align-items: flex-start;
  margin: 20px 0;
}

/* 每个区块 */
.filter-block {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 标题 */
.filter-block h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: bold;
}

/* 输入框 */
.filter-block input[type="text"],
.filter-block input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 按钮 */
.filter-block button {
  margin: 4px 4px 0 0;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.filter-block button:hover {
  background: #f2f2f2;
  border-color: #999;
}

/* Tree Height 多列按钮 */
.tree-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列 */
  gap: 6px;
}

/* 响应式 */
@media (max-width: 1024px) {
  .filter-wrapper {
    grid-template-columns: 1fr 1fr; /* 平板两列 */
  }
}

@media (max-width: 768px) {
  .filter-wrapper {
    grid-template-columns: 1fr; /* 手机一列 */
  }
}
</style>/* End custom CSS */