/* Products Page Styles */

/* Base Layout */
.products .products_list_section {
  width: 100%;
  padding-top: calc(var(--header-height) + 40px);
  overflow: hidden;
}

.products .product_row {
  display: flex;
  width: 100%;
  min-height: 250px;
  align-items: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: all 1s ease-out;
}

.products .product_row:last-child {
  border-bottom: none;
}

.products .product_text_wrap {
  flex: 1.85;
  background-color: var(--color-bg-tint);
  /* Warm Ivory/Beige matching site tone */
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.products .product_text_inner {
  max-width: 520px;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

/* Reveal animation when row is in view (optional, but good for polish) */
/* For now simplified static style, assuming scroll library handles .wow or similar if present.
   I will leave the transition ready but default visible for simplicity unless JS is added. */
.products .product_text_inner {
  opacity: 1;
  transform: none;
}

/* Image Side */
.products .product_image_wrap {
  /* flex: 1; */
  width: 35%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-white);
}

.products .product_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.products .product_row.is-btn-hovered .product_image_wrap img {
  transform: scale(1.05);
}

/* Zigzag Layout - Alternating Rows & Animation States */
.products .product_row:nth-child(even) {
  flex-direction: row-reverse;
  transform: translateX(100px);
}

.products .product_row:nth-child(odd) {
  transform: translateX(-100px);
}

.products .product_row:nth-child(odd) .product_text_wrap {
  background-color: var(--color-bg-white);
}

/* Animation Trigger */
.products .product_row.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Typography */
.products .product_subtitle {
  font-family: var(--font-family-en);
  font-size: 0.875rem;
  /* 14px */
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--spacing-md);
  position: relative;
  /* 固定 1 行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 產品頁面專用的 card_title_1 樣式覆寫 */
.products .card_title_1 {
  /* 桌機版固定 1 行 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .products .card_title_1 {
    /* 手機版固定 2 行 */
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.products .product_desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
  text-align: justify;
  /* 桌機版固定 3 行 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .products .product_desc {
    /* 手機版固定 5 行 */
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .products .product_row {
    flex-direction: column-reverse;
    /* Image on top */
    min-height: auto;
  }

  .products .product_row:nth-child(even) {
    flex-direction: column-reverse;
  }

  .products .product_image_wrap {
    width: 100%;
    aspect-ratio: 16/10;
    height: auto;
  }

  .products .product_text_wrap {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .products .product_text_inner {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Keep text left aligned */
  }

  .products .product_text_inner .btn {
    align-self: center;
    /* Center the button */
  }
}