.elementor-3253 .elementor-element.elementor-element-b682871{--display:flex;--min-height:28vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--overflow:hidden;--overlay-opacity:1;--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-3253 .elementor-element.elementor-element-b682871:not(.elementor-motion-effects-element-type-background), .elementor-3253 .elementor-element.elementor-element-b682871 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zdzcool.com/wp-content/uploads/2026/07/资源-1@2x-3.webp");background-position:center center;background-repeat:repeat;background-size:cover;}.elementor-3253 .elementor-element.elementor-element-b682871::before, .elementor-3253 .elementor-element.elementor-element-b682871 > .elementor-background-video-container::before, .elementor-3253 .elementor-element.elementor-element-b682871 > .e-con-inner > .elementor-background-video-container::before, .elementor-3253 .elementor-element.elementor-element-b682871 > .elementor-background-slideshow::before, .elementor-3253 .elementor-element.elementor-element-b682871 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3253 .elementor-element.elementor-element-b682871 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3253 .elementor-element.elementor-element-3cb8492{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3253 .elementor-element.elementor-element-79760b9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-3253 .elementor-element.elementor-element-79760b9 .elementor-heading-title{font-family:"MiSans-Medium", Sans-serif;font-size:34px;font-weight:200;text-transform:none;font-style:normal;text-decoration:none;line-height:1.3em;letter-spacing:0px;color:var( --e-global-color-text );}.elementor-3253 .elementor-element.elementor-element-b27e34a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;font-family:"MiSans-Medium", Sans-serif;font-size:20px;font-weight:100;color:var( --e-global-color-text );}.elementor-3253 .elementor-element.elementor-element-8a8a19b{--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-3253 .elementor-element.elementor-element-0f59534{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.elementor-3253 .elementor-element.elementor-element-0f59534 .elementor-heading-title{font-family:"MiSans-Medium", Sans-serif;font-size:36px;}.elementor-3253 .elementor-element.elementor-element-3c8b63b{--display:flex;}.elementor-3253 .elementor-element.elementor-element-7261f2e{--grid-columns:4;--load-more-button-align:center;}.elementor-3253 .elementor-element.elementor-element-7261f2e .elementor-button{background-color:#4EAEC5;font-weight:100;fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-radius:100px 100px 100px 100px;}body.elementor-page-3253:not(.elementor-motion-effects-element-type-background), body.elementor-page-3253 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0F0F0;}@media(min-width:768px){.elementor-3253 .elementor-element.elementor-element-b682871{--width:100%;}}@media(max-width:1024px){.elementor-3253 .elementor-element.elementor-element-b682871{--padding-top:50px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-3253 .elementor-element.elementor-element-79760b9 .elementor-heading-title{font-size:50px;}.elementor-3253 .elementor-element.elementor-element-7261f2e{--grid-columns:2;}}@media(max-width:767px){.elementor-3253 .elementor-element.elementor-element-b682871{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-3253 .elementor-element.elementor-element-3cb8492{--min-height:0px;}.elementor-3253 .elementor-element.elementor-element-79760b9 .elementor-heading-title{font-size:23px;}.elementor-3253 .elementor-element.elementor-element-b27e34a{font-size:14px;}.elementor-3253 .elementor-element.elementor-element-7261f2e{--grid-columns:1;}}/* Start custom CSS for html, class: .elementor-element-e6376ab *//* =======================================================
   ZHICOOL Product Filter
   Cascading Display Version
======================================================= */

:root {

    --zc-primary: #4EAEC5;
    --zc-text: #353E46;
    --zc-text-light: #6B7280;
    --zc-border: #E9EEF2;
    --zc-bg: #FFFFFF;
    --zc-radius: 12px;

}


/* ==============================
      Filter Layout
============================== */

.zc-filter {

    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    align-items: flex-start;

}


/* ==============================
      Filter Item
============================== */

.zc-filter-item {

    width: 178px;

    position: relative;

}


/* ==============================
      Cascading Hidden State
============================== */

/*
 * 第二、三、四级筛选器未启用时，
 * JavaScript 会添加 zc-filter-hidden 类。
 */

.zc-filter-item.zc-filter-hidden {

    display: none !important;

}


/* ==============================
      Label
============================== */

.zc-filter-label {

    display: block;

    margin-bottom: 10px;

    font-family: "MiSans", sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 20px;

    color: var(--zc-text);

}


/* ==============================
      Button
============================== */

.zc-filter-button {

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    height: 44px !important;

    padding: 0 16px !important;

    background: #FCFCFC !important;

    border: 1px solid #F0F0F0 !important;

    border-radius: 12px !important;

    box-shadow: none !important;

    color: #353E46 !important;

    cursor: pointer;

    transition:
        background-color .2s,
        border-color .2s,
        opacity .2s;

}


.zc-filter-button:hover {

    background: #FCFCFC !important;

    border-color: var(--zc-primary) !important;

}


/* Focus */

.zc-filter-button:focus {

    outline: none;

    border-color: var(--zc-primary) !important;

}


/* ==============================
      Text
============================== */

.zc-filter-text {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-family: "MiSans", sans-serif;

    font-size: 13px;

    font-weight: 400;

    color: #697684;

}


/* ==============================
      Arrow
============================== */

.zc-filter-arrow {

    width: 18px;

    height: 18px;

    flex: 0 0 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-left: 8px;

    transition: transform .25s;

}


.zc-filter-arrow svg {

    width: 16px;

    height: 16px;

    color: #8D99A5;

}


/* 展开 */

.zc-filter-item.active .zc-filter-arrow {

    transform: rotate(180deg);

}


/* ==============================
      Dropdown
============================== */

.zc-dropdown {

    position: absolute;

    left: 0;

    top: 100%;

    width: 100%;

    margin-top: 8px;

    background: #FFFFFF;

    border-radius: 12px;

    border: 1px solid var(--zc-border);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity .25s,
        visibility .25s,
        transform .25s;

    z-index: 999;

}


/* 展开 */

.zc-filter-item.active .zc-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}


/* ==============================
      List
============================== */

.zc-dropdown-list {

    max-height: 280px;

    margin: 0;

    padding: 6px 0;

    overflow-x: hidden;

    overflow-y: auto;

    list-style: none;

}


/* ==============================
      Dropdown Item
============================== */

.zc-dropdown-item {

    min-height: 40px;

    padding: 8px 14px;

    display: flex;

    align-items: center;

    cursor: pointer;

    transition:
        background-color .2s,
        color .2s;

    font-family: "MiSans", sans-serif;

    font-size: 13px;

    line-height: 20px;

    color: var(--zc-text);

}


/* Hover */

.zc-dropdown-item:hover {

    background: var(--zc-primary);

    color: #FFFFFF;

}


/* Active */

.zc-dropdown-item.active {

    background: var(--zc-primary);

    color: #FFFFFF;

}


/* ==============================
      Disabled
============================== */

.zc-filter-button.disabled,
.zc-filter-button:disabled {

    background: #F7F8FA !important;

    cursor: not-allowed;

    opacity: .65;

}


/* ==============================
      Responsive
============================== */

@media (max-width: 1024px) {

    .zc-filter {

        gap: 12px;

    }

    .zc-filter-item {

        width: calc(50% - 6px);

    }

}


@media (max-width: 767px) {

    .zc-filter {

        flex-direction: column;

        gap: 14px;

    }

    .zc-filter-item {

        width: 100%;

    }

}.zc-filter-item.zc-filter-loading .zc-filter-button {
    opacity: .65;
    cursor: wait;
    pointer-events: none;
}

.zc-filter-item.zc-filter-loading .zc-filter-arrow {
    animation: zc-filter-loading .7s linear infinite;
}

@keyframes zc-filter-loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3c8b63b */@media (max-width: 767px) {

  /* 手机端两列 */
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .elementor-loop-container,
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .elementor-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 16px !important;
    align-items: stretch !important;
  }

  /* 每个产品项目占满网格高度 */
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }

  /* 只让卡片最外层等高，不改内部布局方向 */
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item > .elementor,
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item > .e-con {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  /* 防止卡片内容撑破列宽 */
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item,
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item * {
    box-sizing: border-box !important;
    min-width: 0;
  }

  /* 图片自适应两列 */
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 标题统一预留两行高度 */
  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item .elementor-widget-heading {
    min-height: 44px !important;
  }

  .elementor-3253 .elementor-element.elementor-element-3c8b63b .e-loop-item .elementor-heading-title {
    min-height: 44px !important;
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 22px !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    word-break: break-word !important;
  }
}/* End custom CSS */