/* Sakete Goods Read 组件样式 */

.sakete-goods-read {
  padding: var(--spacing-9xl) 0;
  padding-top: 7.5rem;
  width: 100%;
}

.sakete-goods-read-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5.0625rem;
}

.sakete-goods-read-col-left,
.sakete-goods-read-col-right {
  box-sizing: border-box;
}

/* 产品详情顶部区域 */
.sakete-goods-read-top {
  margin-bottom: var(--spacing-7xl);
}

/* 图片展示区域 */
.sakete-goods-read-images {
  margin-bottom: var(--spacing-3xl);
  display: grid;
  grid-template-columns: 36.875rem 7.5rem;
  gap: var(--spacing-xl);
  align-items: flex-start;
  max-height: 36.875rem;
}

.sakete-goods-read-main-image {
  width: 100%;
  height: 36.875rem;
  border-radius: 15px;
  overflow: hidden;
  background: var(--bg-color, #ffffff);
  position: relative;
}

.sakete-goods-read-main-img {
  display: none;
  width: 100%;
  height: 100%;
}

.sakete-goods-read-main-img.active {
  display: block;
}

.sakete-goods-read-main-img a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.sakete-goods-read-main-img img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.sakete-goods-read-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: var(--text-color-light, #ffffff);
  font-size: 1.5rem;
  z-index: 10;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

.sakete-goods-read-main-img a:hover .sakete-goods-read-video-icon {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

.sakete-goods-read-thumbnails {
  width: 100%;
  height: 100%;
  max-height: 36.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.sakete-goods-read-thumb-btn {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.sakete-goods-read-thumb-btn:hover {
  color: var(--color-primary);
}

.sakete-goods-read-thumb-btn .iconfont {
  color: #282624;
}

.sakete-goods-read-thumb-btn svg {
  width: 17px;
  height: 10px;
  display: block;
  transition: all 0.3s ease;
}

.sakete-goods-read-thumb-btn svg path {
  transition: fill 0.3s ease;
}

.sakete-goods-read-thumb-btn:hover svg path {
  fill: var(--color-primary, #036eb7) !important;
}

.sakete-goods-read-thumb-swiper {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.sakete-goods-read-thumb-swiper .swiper-slide {
  cursor: pointer;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid transparent;
  transition:
    border-color 0.3s ease,
    opacity 0.3s ease;
  opacity: 0.7;
  width: 7.5rem;
  height: 7.5rem;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sakete-goods-read-thumb-swiper .swiper-slide:hover,
.sakete-goods-read-thumb-swiper .swiper-slide.active {
  border-color: var(--color-primary, #036eb7);
  opacity: 1;
}

.sakete-goods-read-thumb-swiper .swiper-slide img {
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  border-radius: 0.9375rem;
  object-fit: cover;
}

/* 产品信息区域 */

.sakete-goods-read-title {
  font-family: var(--title-font-family);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-lg);
  line-height: 150%;
  color: var(--color-primary, #036eb7);
}

.sakete-goods-read-desc {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color, #4b5563);
  margin-bottom: var(--spacing-xl);
}

/* 社交分享 */
.sakete-goods-read-share {
  display: flex;
  align-items: center;
  gap: 2.29px;
  padding-bottom: 1.8125rem;
  border-bottom: 1px solid #dddddd;
}

.sakete-goods-read-share-label {
  color: var(--sakete-read-text-secondary, #4b5563);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
}

.sakete-goods-read-share-item {
  width: max(1.32rem, 18px);
  height: max(1.32rem, 18px);
  border-radius: 0.1875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color-light, #ffffff) !important;
  text-decoration: none;
}

.sakete-goods-read-share-item .iconfont {
  font-size: var(--font-size-sm);
  line-height: 120%;
}

/* Facebook 特定样式 */
.sakete-social-facebook {
  background: #4267b5;
}

/* LinkedIn 特定样式 */
.sakete-social-linkedin {
  background: #0076b3;
}

/* YouTube 特定样式 */
.sakete-social-youtube {
  background: #cb2026;
}

.sakete-social-twitter {
  background: #000;
}

/* Highlights */
.sakete-goods-read-highlights {
  padding: 1.375rem 0;
  margin-bottom: 1.6875rem;
}

.sakete-goods-read-highlights-title {
  font-family: var(--title-font-family);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-lg);
  line-height: 150%;
  color: var(--title-text-color, #282624);
  margin-bottom: var(--spacing-sm);
}

.sakete-goods-read-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sakete-goods-read-highlights-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.sakete-goods-read-highlights-item:last-child {
  margin-bottom: 0;
}

.sakete-goods-read-highlights-bullet {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #036eb7);
}

.sakete-goods-read-highlights-text {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 218.75%;
  color: var(--text-color, #4b5563);
  flex: 1;
}

.sakete-goods-read-highlights-content {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color, #4b5563);
}

.sakete-goods-read-highlights-content p {
  margin-bottom: var(--spacing-sm);
}

.sakete-goods-read-highlights-content p:last-child {
  margin-bottom: 0;
}

.sakete-goods-read-highlights-content ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sakete-goods-read-highlights-content li {
  position: relative;
  padding-left: var(--spacing-lg);
  list-style: none;
}

.sakete-goods-read-highlights-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #036eb7);
  background: transparent;
}

/* Inquire Now 按钮 */
.sakete-goods-read-inquire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 0.69rem 1.56rem;
  background: var(--color-primary, #036eb7);
  color: var(--text-color-light);
  border: none;
  border-radius: 5px;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 120%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sakete-goods-read-inquire-btn:hover {
  background: var(--btn-hover, #025a9a);
}

.sakete-goods-read-inquire-btn * {
  line-height: 120%;
}

.sakete-goods-read-inquire-btn .iconfont {
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

/* 标签页导航 */
.sakete-goods-read-tabs {
  position: sticky;
  top: var(--nav-head-height, 80px);
  z-index: 999;
  background: #ffffff;
  padding: var(--spacing-4xl) 0;
  padding-bottom: 3.25rem;
}

/* Webkit 浏览器（Chrome, Safari, Edge）隐藏滚动条 */
.sakete-goods-read-tabs-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sakete-goods-read-tabs-nav::-webkit-scrollbar-track {
  display: none;
}

.sakete-goods-read-tabs-nav::-webkit-scrollbar-thumb {
  display: none;
}

.sakete-goods-read-tabs-nav::-webkit-scrollbar-corner {
  display: none;
}

.sakete-goods-read-tabs-nav {
  /* Firefox 隐藏滚动条 */
  scrollbar-width: none;
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* border-bottom: 1px solid #dddddd; */
}

.sakete-goods-read-tab-btn {
  padding: var(--spacing-md) var(--spacing-3xl);
  background: #f8fafc;
  color: var(--text-color, #282624);
  border: none;
  border-radius: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-base);
  line-height: 166.67%;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.sakete-goods-read-tab-btn:hover {
  color: var(--color-primary, #036eb7);
}

.sakete-goods-read-tab-btn.active {
  background: var(--color-primary, #036eb7);
  color: var(--text-color-light);
}

.sakete-goods-read-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-primary, #036eb7);
}

/* 标签页内容 */
.sakete-goods-read-tabs-content {
  position: relative;
}

.sakete-goods-read-tab-panel {
  display: block;
  /* scroll-margin-top 作为备用，JS 会动态计算精确偏移量 */
  scroll-margin-top: calc(var(--nav-head-height, 80px) + 100px);
  margin-bottom: 4.4375rem;
}

.sakete-goods-read-tab-panel:last-child {
  margin-bottom: 0;
}

.sakete-goods-read-tab-panel-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 0.9375rem;
}

.sakete-goods-read-tab-panel-title {
  font-family: var(--title-font-family);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-lg);
  line-height: 150%;
  color: var(--color-primary, #036eb7);
  margin: 0;
}

.sakete-goods-read-tab-panel-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #036eb7);
  flex-shrink: 0;
}

.sakete-goods-read-tab-panel-body {
  border-radius: 10px;
}

.sakete-goods-read-tab-panel-content {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color, #666666);
}

.sakete-goods-read-tab-panel-content p {
  margin-bottom: 2.125rem;
}

/* Application Scenarios 左右布局 */
.sakete-goods-read-scenarios-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.25rem;
  align-items: flex-start;
}

.sakete-goods-read-scenarios-text {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color, #666666);
}

.sakete-goods-read-scenarios-text p {
  margin-bottom: var(--spacing-lg);
}

.sakete-goods-read-scenarios-text p:last-child {
  margin-bottom: 0;
}

.sakete-goods-read-scenarios-pic {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.sakete-goods-read-scenarios-pic img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

/* 响应式：小于 992px 时改为上下布局 */
@media (max-width: 991px) {
  .sakete-goods-read-scenarios-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
}

.sakete-goods-read-tab-panel-content p:last-child {
  margin-bottom: 0;
}

.sakete-goods-read-tab-panel-content strong {
  color: var(--title-text-color, #282624);
  font-weight: var(--font-weight-lg);
}

/* Product Advantages */
.sakete-goods-read-advantages-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3xl);
}

.sakete-goods-read-advantage-item {
  position: relative;
  background: #f8fafc;
  padding: var(--spacing-3xl);
}

.sakete-goods-read-advantage-number {
  position: absolute;
  top: 1rem;
  left: 1.8rem;
  transform: translateY(-10px);
  font-family: var(--title-font-family);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-xl);
  line-height: 136%;
  color: var(--color-primary, #036eb7);
  opacity: 0.1;
}

.sakete-goods-read-advantage-content {
  position: relative;
  z-index: 1;
}

.sakete-goods-read-advantage-title {
  font-family: var(--title-font-family);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-lg);
  line-height: 150%;
  color: var(--title-text-color, #282624);
  margin: 0 0 var(--spacing-lg) 0;
}

.sakete-goods-read-advantage-text {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color, #4b5563);
  margin: 0;
}

/* Specifications Table */
.sakete-goods-read-specifications {
  overflow-x: auto;
}

.sakete-goods-read-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  table-layout: fixed;
}

.sakete-goods-read-spec-table thead {
  background: var(--color-primary, #036eb7);
}

.sakete-goods-read-spec-table th {
  width: 50%;
  padding: var(--spacing-lg) 14rem;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color-light);
  text-align: center;
  border: 1px solid #f5f5f5;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

.sakete-goods-read-spec-table tbody tr {
  background: #f5f5f5;
}

.sakete-goods-read-spec-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.sakete-goods-read-spec-table td {
  width: 50%;
  padding: var(--spacing-lg) 14rem;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  line-height: 162.5%;
  color: var(--text-color, #4b5563);
  text-align: center;
  border: 1px solid #f5f5f5;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

/* FAQ */
.sakete-goods-read-faq-list {
  display: flex;
  flex-direction: column;
}

.sakete-goods-read-faq-question {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding-top: 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.sakete-goods-read-faq-icon {
  flex-shrink: 0;
  width: 0.5625rem;
  /* height: 0.5625rem; */
  color: var(--color-primary, #036eb7);
  visibility: hidden;
}

.sakete-goods-read-faq-icon svg,
.sakete-goods-read-download-icon svg {
  width: 100%;
  height: 100%;
}

.sakete-goods-read-faq-q-text {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-base);
  line-height: 166.67%;
  color: var(--text-color);
  margin: 0;
  flex: 1;
}

.sakete-goods-read-faq-item.active .sakete-goods-read-faq-q-text {
  color: var(--color-primary, #036eb7);
}

.sakete-goods-read-faq-item.active .sakete-goods-read-faq-icon {
  visibility: visible;
}

.sakete-goods-read-faq-arrow {
  flex-shrink: 0;
  width: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.sakete-goods-read-faq-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sakete-goods-read-faq-item.active .sakete-goods-read-faq-arrow {
  transform: rotate(-90deg);
}

.sakete-goods-read-faq-answer {
  margin-bottom: 1.5rem;
  padding-left: calc(var(--spacing-lg) + 0.5625rem);
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    margin-bottom 0.3s ease,
    padding-top 0.3s ease;
}

.sakete-goods-read-faq-item.active .sakete-goods-read-faq-answer {
  max-height: 1000px;
}

.sakete-goods-read-faq-answer p {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-base);
  line-height: 166.67%;
  color: var(--text-color, #4b5563);
  margin: 0;
}

.sakete-goods-read-faq-divider {
  height: 1px;
  background: #dddddd;
  margin: 1rem 0;
}

.sakete-goods-read-faq-item:last-child .sakete-goods-read-faq-divider {
  display: none;
}

/* Downloads */
.sakete-goods-read-downloads {
  width: 100%;
}

.sakete-goods-read-downloads-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--spacing-3xl);
  row-gap: var(--spacing-xl);
  width: 100%;
  max-width: 100%;
}

.sakete-goods-read-download-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.9375rem 1.875rem;
  background-color: var(--sakete-read-bg-light, #f8fafc);
  border: 1px solid #dddddd;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sakete-goods-read-download-item:hover {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.sakete-goods-read-download-item-pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: max(3.125rem, 36px);
  height: max(3.125rem, 36px);
  border-radius: 50%;
  background-color: var(--color-primary);
  position: relative;
}

.sakete-goods-read-download-item-pdf-icon img {
  width: 50%;
  height: 50%;
  object-fit: contain;
  display: block;
}

.sakete-goods-read-download-item-title {
  color: var(--sakete-read-text-secondary, #4b5563);
  font-family: var(--title-font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-lg);
  line-height: 150%;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sakete-goods-read-download-item-download_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: max(1.875rem, 20px);
  height: max(1.875rem, 20px);
  transition: all 0.3s ease;
}

.sakete-goods-read-download-item-download_icon svg {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.sakete-goods-read-download-item-download_icon svg path {
  fill: var(--sakete-read-text-secondary, #4b5563);
  transition: fill 0.3s ease;
}

.sakete-goods-read-download-item:hover
  .sakete-goods-read-download-item-download_icon
  svg
  path {
  fill: var(--color-primary, #036eb7);
}

.custom-pop-inquiry .container {
  padding: 0px;
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
  .sakete-goods-read-row {
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
  }

  .sakete-goods-read-images {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .sakete-goods-read-main-image {
    width: auto;
    aspect-ratio: 1 / 1;
    justify-self: center;
    /* height: auto; */
    /* min-height: 20rem; */
  }

  .sakete-goods-read-thumbnails {
    flex-direction: row;
    max-height: none;
    height: auto;
    width: 60%;
    justify-self: center;
    max-width: 100%;
    overflow: hidden;
    margin-top: var(--spacing-xl);
  }

  .sakete-goods-read-thumb-btn {
    width: 2rem;
    height: 100%;
    flex-shrink: 0;
  }

  .sakete-goods-read-thumb-btn-up {
    order: -1;
  }

  .sakete-goods-read-thumb-btn-up svg {
    transform: rotate(-90deg);
  }

  .sakete-goods-read-thumb-btn-down {
    order: 1;
  }

  .sakete-goods-read-thumb-btn-down svg {
    transform: rotate(-90deg);
  }

  .sakete-goods-read-thumb-swiper {
    flex: 1;
    width: auto;
    height: 7.5rem;
  }

  .sakete-goods-read-thumb-swiper .swiper-slide {
    width: 7.5rem;
    height: 7.5rem;
  }
}

@media screen and (max-width: 768px) {
  .sakete-goods-read-advantages-list {
    grid-template-columns: 1fr;
  }

  .sakete-goods-read-downloads-list {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .sakete-goods-read-thumbnails {
    width: 100%;
  }

  .sakete-goods-read-download-item {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}

@media screen and (max-width: 576px) {
  .sakete-goods-read-downloads-list {
    grid-template-columns: 1fr;
  }

  .sakete-goods-read-main-image {
    width: 100%;
    height: auto;
  }
}