/* Compiled from LESS. Edit this CSS going forward. */
/* Modern layout tokens — html { font-size: 10px } in site.less → 1rem = 10px */
/* 1200px content */
/* Homepage section shell — single visual column */
/* Homepage */
/* between major sections */
/* section title → main content */
/* carousel → Learn More button */
/* last section → footer */
/* Inner pages (About, etc.) */
/* Toolbox / forpros marketing page — type scale */
/* 3.2rem — page-level headings */
/* 2.4rem */
/* 1.8rem — intro copy (e.g. above search) */
/* 1.6rem — section descriptions */
/* 1.4rem */
/* 2.4rem — nested card titles */
/* 1.8rem */
/* bottom-content product name (.big-title) vs block headings (.card-title) */
/* product-library.html 品类入口卡：名称略大于素材列表标题 */
/* 手机端品类卡：图片区统一高度，便于同行标题/按钮对齐 */
/* 1.8rem */
/* 1.4rem */
/* 1.3rem */
/* Toolbox floating actions (cart, back-to-top, back, home) */
/* Mobile stack: base → back-top → goto → back-home → cart */
/* Toolbox 桌面侧栏：filter-nav / slider-bar（高于主内容，低于弹层） */
/* Form / lookup / registration pages — type scale */
/* Marketing / product toolkit (.page-toolbox) — light banner, dark text */
/* product-library-list 等：两列素材卡片 + 紧凑操作钮 */
/* 两列品类卡：等高图片区 + 标题弹性区 + 按钮贴底 */
/* product-library.html：品类网格 + 长 CTA 文案 */
/* product-library-one 等：bottom-content 内各类素材列表 */
/* gifts-detail.html / props-detail.html：详情 + You May Also Like */
/* Inner page hero — mobile (legacy mpx @ 414px design → rem) */
/* Toolbox 侧栏筛选 — 桌面固定定位；手机版 bottom sheet（与 shop.html 一致） */
.filter-nav {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom right, #fefcfc, #e3f6ff);
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.12);
  border: 0.1rem solid #fff;
  padding: 1.2rem;
  border-radius: 1rem;
  transition: top 0.1s ease-out;
  width: 24rem;
  max-width: calc(100vw - 4rem);
}
.filter-nav .filterbig-title {
  font-size: 2rem;
  padding: 0.2rem 0 1.2rem;
  color: #277fb1;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}
.filter-nav .filter-list {
  border-top: 0.1rem solid #c4dee9;
  padding-top: 0.8rem;
  padding-bottom: 1.2rem;
}
.filter-nav .filter-list .level1-title {
  margin-top: 0.8rem;
  border-radius: 1.2rem;
  display: flex;
  height: 2.8rem;
  align-items: center;
  background-color: #1195c8;
  border: 0.1rem solid #dff2f9;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-size: 1.85rem;
  padding: 0 0 0 0.9rem;
}
.filter-nav .filter-list .filter-level1-item {
  margin-top: 0.6rem;
  border-radius: 1.2rem;
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  background-color: #fff;
  border: 0.1rem solid #dff2f9;
  overflow: hidden;
  cursor: pointer;
  color: #277fb1;
  font-size: 1.35rem;
  padding: 0.6rem 0.8rem;
}
.filter-nav .filter-list .filter-level1-item .checkbox {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 0.1rem solid #ccc;
  margin-right: 0.8rem;
  border-radius: 0.2rem;
}
.filter-nav .filter-list .filter-level1-item .radio {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 0.1rem solid #ccc;
  margin-right: 0.8rem;
  border-radius: 50%;
}
.filter-nav .filter-list .filter-level1-item .active {
  background: url("/images/new/toolbox/checkbox-select.png") no-repeat center center;
  background-color: #1195c8;
  background-size: 0.75rem 0.65rem;
  border: 0.1rem solid #1195c8;
}
.filter-nav .filter-list .filter-level1-item .label {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.35;
  color: #196089;
}
.filter-nav .filter-list .filter-level1-item:has(.checkbox.active) {
  background-color: #1195c8;
  border-color: #1195c8;
  color: #fff;
}
.filter-nav .filter-list .filter-level1-item:has(.checkbox.active) .label {
  color: #fff;
}
.filter-nav .filter-list .filter-level1-item:has(.checkbox.active) .checkbox.active {
  position: relative;
  background: #fff;
  border-color: #fff;
}
.filter-nav .filter-list .filter-level1-item:has(.checkbox.active) .checkbox.active::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.08rem;
  width: 0.35rem;
  height: 0.62rem;
  border: solid #1195c8;
  border-width: 0 0.16rem 0.16rem 0;
  transform: rotate(45deg);
}
.filter-nav .filter-list .filter-level1-item-clear {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #196089;
  cursor: pointer;
  padding-top: 1.2rem;
  font-size: 1.7rem;
}
.filter-nav .filter-list .icon {
  margin-right: 0.8rem;
}
.filter-nav .filter-list .bd-icon {
  width: 1.2rem;
  height: 1.6rem;
}
.filter-nav .filter-list .pb-icon {
  width: 1.4rem;
  height: 1.4rem;
}
.filter-nav .filter-list .pi-icon {
  width: 1.4rem;
  height: 1.4rem;
}
.filter-nav .filter-list .clear-icon {
  width: 1.3rem;
  height: 1.2rem;
}
@media screen and (min-width: 991px) {
  .slider-bar {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    background: linear-gradient(to bottom right, #fefcfc, #e3f6ff);
    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.12);
    border: 0.1rem solid #fff;
    padding: 1.2rem;
    border-radius: 1rem;
    transition: top 0.1s ease-out;
    left: 1rem;
    max-width: 24rem;
  }
  .slider-bar .slider-title {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    border-bottom: 0.1rem solid #dff2f9;
  }
  .slider-bar .slider-title .icon {
    flex-shrink: 0;
    width: 3rem;
    height: 2.8rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slider-bar .slider-title .text {
    flex: 1;
    min-width: 0;
    font-size: 2rem;
    color: #2d88a6;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
  }
  .slider-bar .slider-bar-btn {
    margin-top: 0.6rem;
    border-radius: 1.2rem;
    display: flex;
    height: 2.8rem;
    align-items: center;
    background-color: #fbfcfe;
    border: 0.1rem solid #dff2f9;
    overflow: hidden;
    cursor: pointer;
  }
  .slider-bar .slider-bar-btn .icon {
    flex-shrink: 0;
    width: 3rem;
    height: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slider-bar .slider-bar-btn .text {
    flex: 1;
    min-width: 0;
    font-size: 1.35rem;
    color: #2d88a6;
    padding-right: 1.6rem;
    overflow: hidden;
    white-space: nowrap;
  }
  .slider-bar .active {
    background-color: #0092d8;
    border: 0.1rem solid #0092d8;
  }
  .slider-bar .active .text {
    color: #fff;
  }
}
@media screen and (max-width: 990px) {
  /* 有筛选 / Quick Nav 底栏的页面：为底部按钮留出空间 */
  body:has(#shop-filter-panel) .page-toolbox .content,
  body:has(#shop-filter-panel) .page-toolbox .content.shop-content,
  body:has(#toolbox-slider-panel) .page-toolbox .content,
  body:has(#toolbox-slider-panel) .page-toolbox .overview-content {
    padding-bottom: max(10rem, env(safe-area-inset-bottom, 0px));
  }
  .shop-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 198;
    background: rgba(12, 40, 58, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .shop-filter-backdrop.is-active {
    opacity: 1;
    visibility: visible;
  }
  .shop-filter-open-btn {
    position: fixed;
    z-index: 199;
    left: 50%;
    bottom: max(2rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.4rem 3.2rem;
    margin: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, #1195c8 0%, #0a6f99 100%);
    box-shadow: 0 0.8rem 2.8rem rgba(10, 78, 120, 0.45);
    transition: transform 0.28s ease, opacity 0.28s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .shop-filter-open-btn:active {
    transform: translateX(-50%) scale(0.98);
  }
  .shop-filter-open-btn__glyph {
    width: 1.8rem;
    height: 1.8rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' d='M4 6h16M4 12h16M4 18h7'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.95;
  }
  body.shop-filter-sheet-open .shop-filter-open-btn,
  body.shop-filter-sheet-open #toolbox-slider-open-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(160%);
  }
  .filter-nav,
  .slider-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(86vh, 640px) !important;
    margin: 0 !important;
    padding: 1.2rem 1.6rem max(2.4rem, env(safe-area-inset-bottom, 0px)) 1.6rem !important;
    border-radius: 1.6rem 1.6rem 0 0;
    border: 0.1rem solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 -0.6rem 4rem rgba(0, 0, 0, 0.18) !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 200 !important;
    transform: translate3d(0, 110%, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    visibility: hidden;
    display: block !important;
  }
  .filter-nav.is-open,
  .slider-bar.is-open {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    visibility: visible;
    touch-action: pan-y;
  }
  .filter-nav::before,
  .slider-bar::before {
    content: "";
    display: block;
    width: 4rem;
    height: 0.4rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: rgba(25, 96, 137, 0.25);
  }
  .filter-nav .filterbig-title,
  .slider-bar .filterbig-title {
    margin-top: 0;
    padding-top: 0;
  }
  .filter-nav .filter-list .filter-level1-item,
  .slider-bar .filter-list .filter-level1-item {
    font-size: 1.9rem;
  }
  /* Quick Nav 上拉面板：保持 slider-bar 视觉，不与 filter 列表混用 */
  .slider-bar {
    background: linear-gradient(to bottom right, #fefcfc, #e3f6ff) !important;
  }
  .slider-bar .slider-title {
    width: 100% !important;
    margin-bottom: 0.8rem;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    border-bottom: 0.1rem solid #dff2f9;
  }
  .slider-bar .slider-title .text {
    font-size: 2rem;
    color: #2d88a6;
    font-weight: bold;
  }
  .slider-bar .slider-bar-btn {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    min-height: 3.4rem;
    margin-top: 0.6rem;
    box-sizing: border-box;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    background-color: #fbfcfe;
    border: 0.1rem solid #dff2f9;
    overflow: hidden;
  }
  .slider-bar .slider-bar-btn .icon {
    width: 4rem;
    height: 3.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .slider-bar .slider-bar-btn .text {
    font-size: 1.6rem;
    color: #2d88a6;
    padding-right: 1.2rem;
  }
  .slider-bar .slider-bar-btn.active {
    background-color: #199fcd;
    border-color: #199fcd;
  }
  .slider-bar .slider-bar-btn.active .text {
    color: #fff;
  }
  .filter-nav .shop-filter-close-btn,
  .slider-bar .shop-filter-close-btn {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(17, 149, 200, 0.12);
    color: #196089;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .filter-nav .shop-filter-close-btn:active,
  .slider-bar .shop-filter-close-btn:active {
    background: rgba(17, 149, 200, 0.22);
  }
  body.shop-filter-sheet-open {
    overflow: hidden;
  }
}
@media screen and (min-width: 991px) {
  .page-toolbox .content.search-content {
    position: relative;
    padding-left: 33rem;
  }
  .page-toolbox .content.search-content > .slider-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 30rem;
    max-width: 30rem;
    z-index: 110;
  }
  .page-toolbox .content.search-content .bottom-content2 {
    width: 100%;
    min-width: 0;
  }
  .page-toolbox .content.search-content .card-list:not(.doc-new-list) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4.8rem 5.4rem;
  }
  .page-toolbox .content.search-content .doc-new-list {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 3.4rem;
  }
  .page-toolbox .content.search-content .doc-new .download-btn {
    width: 46%;
    margin: 0;
    padding: 2rem 3rem;
  }
  .page-toolbox .content.search-content .catalog-item {
    width: 100%;
    margin: 0;
  }
  .page-toolbox .content.search-content .catalog-item:nth-child(3n),
  .page-toolbox .content.search-content .catalog-item:nth-last-child(1):nth-child(3n+1),
  .page-toolbox .content.search-content .catalog-item:nth-last-child(1):nth-child(3n+2) {
    margin-right: 0;
  }
  .page-toolbox .content.search-content .catalog-img {
    width: 100%;
    height: auto;
    aspect-ratio: 368 / 270;
  }
}