/* Product Compliance page
 * Migrated from Nuxt page aboutUs/productCompliance.
 * Design reference: 1920px base (vw = px / 1920 * 100),
 * font Montserrat, color #231815 — consistent with compliance.css. */

.product_compliance {
  background: #fff;
  font-family: Montserrat;
  color: #231815;
  padding-top: 4.375vw;
}

/* ellipsis helper */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* page title bar — 参考 blogs 页 .top-nav（sticky 吸顶白色标题栏） */
.page_title {
  position: sticky;
  z-index: 1000;
  top: 4.375vw; /* 吸顶时紧贴 header 底部，避免 border-top 被 header 遮挡 */
  height: 3.9583vw; /* 76px */
  background-color: #fff;
  border-top: 0.0521vw solid #2318151a;
  border-bottom: 0.0521vw solid #2318151a;
  display: flex;
  align-items: center;
}

.page_title .container {
  display: flex;
  align-items: center;
  height: 3.8542vw; /* 74px */
  padding: 0 !important;
  color: #231815;
  font-family: Montserrat;
  font-size: 2.0833vw; /* 40px */
  font-style: normal;
  font-family: "Montserrat-SemiBold" !important;
  line-height: 150%;
  text-transform: capitalize;
}

/* content area */
.product_compliance_content {
  margin-top: 5.3125vw; /* 102px */
  padding-bottom: 6.25vw; /* 120px */
}

.description {
  margin-bottom: 2.0833vw; /* 40px */
  font-family: "Montserrat-SemiBold", Montserrat, sans-serif;
  font-size: 1.6667vw; /* 32px */
  line-height: 1.5;
  color: #231815;
}

.content {
  margin-bottom: 6.25vw; /* 120px */
  font-size: 0.8333vw; /* 16px */
  line-height: 1.5;
  color: #231815;
}

.content p {
  margin: 0;
}

/* search */
.search {
  padding-bottom: 4.1667vw; /* 80px */
}

.search-title {
  font-size: 1.0417vw; /* 20px */
  line-height: 1.5;
  margin-bottom: 0.625vw; /* 12px */
  color: #231815;
}

.search-input {
  position: relative;
  max-width: 27.0833vw; /* 520px */
}

.search-input .icon-icon_Search {
  position: absolute;
  left: 1.0417vw; /* 20px */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25vw; /* 24px */
  color: #9FA0A0;
  cursor: pointer;
}

.search-input input {
  width: 100%;
  height: 2.5vw; /* 48px */
  box-sizing: border-box;
  padding: 0 2.0833vw 0 3.125vw; /* 60px left for icon, 40px right for clear */
  font-family: Montserrat;
  font-size: 0.625vw; /* 12px */
  color: #231815;
  border: 1px solid #dcdfe6;
  border-radius: 0.2604vw; /* 5px */
  outline: none;
}

.search-input input::placeholder {
  color: rgba(35, 24, 21, 0.20);
}

.search-input input:hover,
.search-input input:focus {
  border-color: #bfc9d9;
}

.search-input .search-clear {
  position: absolute;
  right: 1.0417vw; /* 20px */
  top: 50%;
  transform: translateY(-50%);
  width: 0.8333vw; /* 16px */
  height: 0.8333vw; /* 16px */
  cursor: pointer;
  display: none;
}

.search-input .search-clear::before,
.search-input .search-clear::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 0.1042vw; /* 2px */
  background: #9FA0A0;
}

.search-input .search-clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.search-input .search-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.search-input.has-value:hover .search-clear {
  display: block;
}

/* collapse */
.pc-collapse {
  border-top: none;
}

.pc-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.9167vw; /* 56px */
  margin-top: 0;
  padding: 1.0417vw 0; /* 20px 上下对称，文案在上下两条线之间居中 */
  border-bottom: 1px solid rgba(35, 24, 21, 0.10);
  cursor: pointer;
  color: #231815;
  font-size: 1.0417vw; /* 20px */
  line-height: 1.5;
}

.pc-collapse-item:first-child .pc-collapse-header {
  margin-top: 0;
}

.pc-collapse-title {
  font-family: "Montserrat-SemiBold", Montserrat, sans-serif;
  font-weight: 600;
}

.pc-collapse .pc-collapse-arrow {
  flex: 0 0 auto;
  font-size: 1.0417vw; /* 20px */
  line-height: 1;
  color: #9FA0A0;
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.pc-collapse-item.active .pc-collapse-arrow {
  transform: rotate(0deg);
}

.pc-collapse-body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.pc-collapse-body-inner {
  padding: 1.25vw 0 0; /* 24px top */
}

/* model box — row layout: fixed title + 6-column grid */
.pc-model-box {
  display: flex;
  flex-direction: column;
  gap: 1.6667vw; /* 32px */
  width: 95%;
}

.pc-model-box-item {
  display: flex;
  gap: 1.6667vw; /* 32px */
  width: 100%;
}

.pc-model-title {
  width: 8.5938vw; /* 165px */
  flex: 0 0 auto;
  font-size: 0.7292vw; /* 14px */
  line-height: 1.5;
  color: #231815;
}

.pc-model-link-content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.6667vw; /* 32px */
}

.product_compliance .product_compliance_content .pc-model-box .pc-model-link {
  color: #231815;
}

.pc-model-link {
  color: #231815;
  font-size: 0.7292vw; /* 14px */
  line-height: 1.5;
  text-decoration: none;
}

.pc-model-link:hover {
  font-weight: 600;
  text-decoration: underline;
}

/* no-result 空数据状态（图片 + 文字） */
.no-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.1667vw 0;
  gap: 0.8333vw;
}
.no-result-img {
  width: 4.1667vw;
  height: 4.1667vw;
  display: block;
}
.no-result-text {
  color: #231815;
  text-align: center;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* mobile — 375px device base (vw = px / 375 * 100) */
@media (max-width: 768px) {
  .container {
    max-width: 100% !important;
  }

  .product_compliance {
    padding-top: 12.8vw; /* 避开移动端 fixed header 高度 */
  }

  .page_title {
    height: 11.5vw; /* 43px */
    top: 12.5333vw;
    z-index: 23;
    background-color: #fff;
    border-top: 0 solid #2318151a;
    border-bottom: 0.2667vw solid #2318151a; /* 1px */
    display: flex;
    align-items: center;
  }

  .page_title .container {
    display: flex;
    align-items: center;
    height: 11.2vw;
    padding: 0 6.4vw !important;
    font-size: 4.2667vw; /* 16px */
    font-family: "Montserrat-SemiBold" !important;
    line-height: 150%;
    text-transform: capitalize;
  }

  .product_compliance_content {
    margin: 10.6667vw 0; /* 40px */
    padding: 0 10.6667vw 10.6667vw; /* 左右40px 下40px */
  }

  .description {
    font-family: "Montserrat-SemiBold", Montserrat, sans-serif;
    font-size: 6.4vw; /* 24px */
    line-height: 1.5;
    margin-bottom: 10.6667vw; /* 40px */
  }

  .content {
    font-size: 3.7333vw; /* 14px */
    line-height: 1.7;
    margin-bottom: 21.3333vw; /* 80px */
  }

  .search {
    padding-bottom: 16vw; /* 60px */
  }

  .search-title {
    font-size: 6.4vw; /* 24px */
    margin-bottom: 0;
  }

  .search-input {
    max-width: 100%;
    margin-top: 2.1333vw; /* 8px */
  }

  .search-input input {
    height: 10.6667vw; /* 40px */
    font-size: 3.7333vw; /* 14px */
    padding-left: 12vw; /* 45px */
  }

  .search-input .icon-icon_Search {
    font-size: 4.2667vw; /* 16px */
    left: 3.2vw; /* 12px */
  }

  .search-input .search-clear {
    right: 3.2vw; /* 12px */
    width: 4.2667vw; /* 16px */
    height: 4.2667vw; /* 16px */
  }

  .search-input .search-clear::before,
  .search-input .search-clear::after {
    height: 0.5333vw; /* 2px */
  }

  .pc-collapse-header {
    margin-top: 0;
    padding: 2.9333vw 0; /* 11px 上下对称，文案在上下两条线之间居中 */
    border-bottom: 1px solid rgba(35, 24, 21, 0.10);
    font-size: 4.2667vw; /* 16px */
  }

  .pc-collapse .pc-collapse-arrow {
    font-size: 4.2667vw; /* 16px */
  }

  .pc-collapse-body-inner {
    padding: 4.2667vw 0 0; /* 16px */
  }

  .pc-model-box {
    gap: 6.4vw; /* 24px */
    width: 100%;
  }

  .pc-model-box-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4.2667vw; /* 16px */
  }

  .pc-model-title {
    width: 22vw; /* ~83px */
    flex: 0 0 auto;
    white-space: normal;
    font-size: 3.2vw; /* 12px */
    line-height: 1.5;
  }

  .pc-model-link-content {
    flex: 1;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.2667vw; /* 16px */
    font-size: 3.2vw; /* 12px */
  }

  .pc-model-link {
    font-size: 3.2vw; /* 12px */
    line-height: 1.5;
  }

  .no-result {
    padding: 10.6667vw 0;
    gap: 4.2667vw;
  }
  .no-result-img {
    width: 21.3333vw;
    height: 21.3333vw;
  }
  .no-result-text {
    font-size: 16px;
  }
}