/*!
Theme Name: Truck Parts
Theme URI: https://www.wpzhiku.com/
Author: Wenprise Co., LTD
Author URI: https://www.wpzhiku.com/
Description: Description
Version: 1.0.0
License: Copyright Reserved
License URI: 
Text Domain: truck-parts
Template: kadence
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Truck Parts is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root{

  /* Primary: Nightly Expedition */
  --primary-100: #F5F2FF;
  --primary-200: #CCC3FD;
  --primary-300: #988EF0;
  --primary-400: #5954CE;
  --primary-500: #20218A;
  --primary-600: #0D1471;
  --primary-700: #051058;
  --primary-800: #020E3F;
  --primary-900: #010A26;

  /* Accent: Butternut Pizazz */
  --accent-100: #FFFBF2;
  --accent-200: #FFEDCC;
  --accent-300: #FBD8A3;
  --accent-400: #F3BB7A;
  --accent-500: #E3974F;
  --accent-600: #B4652A;
  --accent-700: #853F17;
  --accent-800: #55230D;
  --accent-900: #260E06;

  /* Neutral */
  --neutral-100: #FBFAFC;
  --neutral-200: #EBEAF0;
  --neutral-300: #DBDAE4;
  --neutral-400: #CBCBD8;
  --neutral-500: #BCBCCC;
  --neutral-600: #9596A3;
  --neutral-700: #6E6F79;
  --neutral-800: #484950;
  --neutral-900: #222326;

  --primary-color: #244d7d;
  --alt-color: #ff7b2c;
}

/* ------------------------------------
   TP Brands Filter (shortcode)
   父级与子级同样式，放在一行
   仅通过背景色区分；子项等宽
------------------------------------- */
.tp-brands-filter {
  margin: 0;
  padding: 0;
}

.tp-brands-filter__list,
.tp-brands-filter__children {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tp-brands-filter__parent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tp-brands-filter__parent+.tp-brands-filter__parent{
  margin-top: 24px;
}

.tp-brands-filter__child {
  margin: 0; /* 由 gap 控制间距 */
}

/* 父级与子级采用一致的胶囊样式，仅通过背景区分 */
.tp-brands-filter__link--parent,
.tp-brands-filter__link--child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px; /* 统一等宽 */
  padding: 12px 16px;
  border: 1px solid var(--global-palette7);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
  transition: all 0.15s ease-in-out;
  font-size: 16px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-brands-filter__link--parent{
  width: 150px;
}

/* 仅背景颜色不同：父级更突出，子级更轻 */
.tp-brands-filter__link--parent {
  background: var(--global-palette1);
  color: var(--global-palette8);
  height: 50px;
  font-weight: 600;
}

.tp-brands-filter__link--parent:hover{
  color: var(--global-palette7) !important;
}

.tp-brands-filter__link--child {
  background: var(--global-palette8);
}

/* 子级在同一行，过多时可横向滚动 */
.tp-brands-filter__children {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tp-brands-filter__link--child {
  white-space: break-spaces;
  text-align: center;
  height: 50px;
  font-weight: 600;
}

/* 高亮当前分类 */
.tp-brands-filter__link--child:hover,
.tp-brands-filter__link--child:focus,
.tp-brands-filter .is-active > .tp-brands-filter__link--parent,
.tp-brands-filter .is-active > .tp-brands-filter__link--child {
  border-color: var(--global-palette1);
  background: var(--global-palette8);
  color: var(--global-palette1);
}

.tp-brands-filter .count {
  opacity: .65;
  font-weight: 400;
}

/* ------------------------------------
   TP Parts Filter (accordion vertical)
   父级为手风琴标题（不可点击）；子级列表为筛选项
------------------------------------- */
.tp-parts-filter {
  margin: 0;
}

.tp-parts-filter .tp-acc__item {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--global-palette8);
}

.tp-parts-filter .tp-acc__summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 600;
  position: relative;
  background: var(--global-palette8);
}

.tp-parts-filter .tp-acc__summary::-webkit-details-marker {
  display: none;
}

.tp-parts-filter .tp-acc__summary:after {
  content: '\25BC';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0);
  font-size: 12px;
  opacity: .7;
  transition: transform .15s ease;
}

.tp-parts-filter .tp-acc__item[open] .tp-acc__summary:after {
  transform: translateY(-50%) rotate(-180deg);
}

.tp-parts-filter .tp-acc__children {
  list-style: none;
  padding: 20px 24px 24px;
  margin: 0;
}

.tp-parts-filter .tp-acc__child+.tp-acc__child  {
  margin-top: 12px;
}

.tp-parts-filter .tp-acc__link {
  display: block;
  width: 100%;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: all .15s ease-in-out;
  line-height: 1.2;
}

.tp-parts-filter .tp-acc__link:hover,
.tp-parts-filter .is-active > .tp-acc__link {
  color: var(--global-palette1);
  font-weight: 600;
  text-decoration: underline;
}

.wprs-term-grid__title{
  margin-top: .75em !important;
}

/* ------------------------------------
   Widget: TP Tax Filter Title Decor
   给 tp_tax_filter_widget 标题加背景装饰
------------------------------------- */
.widget_tp_tax_filter_widget .widget-title,
.widget_tp_tax_filter_widget .widget-title a {
  position: relative;
  display: block;
  padding: 10px 12px 10px 40px;
  margin: 0 0 14px;
  line-height: 1.2;
  background: linear-gradient(90deg, rgba(0,0,0,.05), var(--global-palette8));
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--global-palette7);
  color: var(--global-palette1) !important;
}

.widget_tp_tax_filter_widget .widget-title:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--global-palette1);
  opacity: 1;
  transform: translateY(-50%) rotate(45deg);
}

.rs-product-name{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(25px * 3.32); /* fallback */
  word-break: break-word;
}

.rs-sub-cat:before{
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 0;
  width: 44px;
  height: 6px;
  border-radius: 0 0 16px 16px;
  background-color: #0066cc;
}

/* --- 箭头样式的核心代码 --- */
.css-arrow {
  /* 1. 定义箭杆 */
  position: relative;
  width: 24px;       /* 箭头的总长度 */
  height: 2px;       /* 线条的粗细 */
  background-color: #9aaec1; /* 颜色 (吸取自你的截图) */
  border-radius: 1px; /* 让端点稍微圆润一点 */
}

/* 2. 定义箭头头部 */
.css-arrow::after {
  content: '';
  position: absolute;
  right: 0;           /* 靠右定位 */
  top: 50%;           /* 垂直居中 */

  /* 箭头头部的大小 */
  width: 6px;
  height: 6px;

  /* 绘制右边和上边的边框 */
  border-top: 2px solid #9aaec1;   /* 粗细需与箭杆一致 */
  border-right: 2px solid #9aaec1; /* 粗细需与箭杆一致 */

  /* 核心技巧：上移修正中心点，并旋转45度 */
  transform: translateY(-50%) rotate(45deg);
}

/* 整体容器增强：提升层次感 */
.tp-parts-search {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  border-radius: 10px;
}

/* 统一字段外层，让 select / input 看起来一致 */
.tp-parts-search__field {
  flex: 0 0 260px;
  position: relative;
}

.tp-parts-search__field-s {
  flex: 1;
}

/* 下拉框样式 */
.tp-parts-search select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #bcd4f7;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  color: #333;
  transition: all .2s ease;
}

.tp-parts-search select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='gray'><path d='M5.516 7.548a.625.625 0 0 1 .884 0L10 11.148l3.6-3.6a.625.625 0 1 1 .884.884l-4.042 4.042a.625.625 0 0 1-.884 0L5.516 8.432a.625.625 0 0 1 0-.884z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px;
  padding-right: 38px !important; /* 给箭头留空间 */
}

.tp-parts-search select:focus {
  border-color: #4a90e2;
  background: #dceaff;
  outline: none;
}

/* 输入框样式 */
.tp-parts-search input[type="search"] {
  width: 100%;
  padding: 12px 18px;
  border: 2px solid #cdd6e4;
  background: #fff;
  border-radius: 6px;
  font-size: 16px;
  transition: all .2s ease;
}

.tp-parts-search input[type="search"]:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
  outline: none;
}

/* 按钮样式强化 */
.tp-parts-search__submit {
  padding: 12px 24px;
  background: #ff7b2c;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.tp-parts-search__submit:hover {
  background: #e96a1a;
  box-shadow: 0 2px 10px rgba(233,106,26,0.4);
}

.partsalogue-container {
  margin-bottom: 40px;
}

.filter-title,
.category-title {
  margin-bottom: 20px !important;
  font-size: 20px;
  color: #333;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.filter-title:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #0066cc;
}

.application-filters {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 30px;
  /* 添加固定高度容器，避免内容变化导致页面抖动 */
  min-height: 160px;
  gap: 16px;
}

.application-filter {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  /* 使用 transform 属性预留空间，而不是使用 margin */
  transform: translateY(0);
}

.application-filter.active {
  transform: translateY(-5px);
}

.close-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 2;
}

.application-filter.active .close-icon {
  display: flex;
}

.filter-image {
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}

.filter-image img {
  object-fit: contain;
  transition: transform 0.3s ease;
}

.application-filter:hover .filter-image img {
  transform: scale(1.1);
}

.single-item .kb-gal-image-radius{
  border: 1px solid var(--primary-600)
}

.filter-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-top: 5px;
  /*white-space: nowrap;*/
  overflow: hidden;
  /*text-overflow: ellipsis;*/
  padding: 0 5px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.category-group {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  gap: inherit;
}

.category-group.active {
  display: grid;
}

.category-item {
  text-align: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.category-item:hover {
  transform: translateY(-5px);
}

.category-item.active {
  transform: translateY(-5px);
}

.category-image {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.category-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.wprs-term-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.wprs-term-list__item{
  border: 1px solid var(--primary-700);
  border-radius: 6px;
  font-size: 14px;
  padding: 6px 10px;
  white-space: nowrap;
  margin-bottom: 0 !important;
  font-weight: 500;
}

@media screen and (min-width: 1025px) {
  .has-sidebar .content-container {
    grid-gap: 32px;
  }

  .grid-cols.grid-lg-col-4 {
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }
}

@media(max-width: 1360px){
  .tp-brands-filter__link--parent, .tp-brands-filter__link--child{
    font-size: 15px;
  }

  .tp-brands-filter__parent{
    gap: 8px;
  }

  .tp-brands-filter__link--child{
    min-width: 80px;
  }

  .application-filters {
    grid-template-columns: repeat(6, 1fr);
  }
}

.site-footer .widget h2:after, .site-footer .widget-block h2:after, .site-footer .widget_block h2:after{
  filter: invert(100%);
}

@media(max-width: 1024px){
  .tp-brands-filter__parent+.tp-brands-filter__parent{
    margin-top: 24px !important;
  }

  .tp-parts-search select{
    padding: 8px 12px;
  }

  .tp-parts-search input[type="search"]{
    padding: 8px 12px;
  }

  .tp-parts-search__submit{
    padding: 8px 16px;
    font-size: 15px;
  }

  .rs-quote-buttons{
    position: absolute;
    bottom: 0;
    right: -24px;
  }

  .rs-product-name{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(25px * 3.5);
    word-break: break-word;
  }

  .application-filters {
    grid-template-columns: repeat(4, 1fr);
  }

  .tp-brands-filter__link--child{
    height: 26px;
  }

  .tp-brands-filter__children{
    gap: 8px;
  }

  .tp-brands-filter__parent{
    flex-wrap: wrap;
  }

  .tp-brands-filter__children{
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .tp-brands-filter__link--parent, .tp-brands-filter__link--child{
    font-size: 13px;
    border-radius: 12px;
  }

  .tp-brands-filter__link--parent{
    width: 160px; !important;
    max-width: initial;
    height: 26px;
    white-space: nowrap;
  }

  .tp-parts-search__field,
  .tp-parts-search__field-s{
    flex: 100%;
  }

  .grid-cols{
    column-gap: 1.5rem !important;
    row-gap: 1.5rem !important;
  }
}

@media(max-width: 640px){
  .application-filters {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media(max-width: 480px){
  .application-filters {
    grid-template-columns: repeat(2, 1fr);
  }
}