/* =========================================================
   HL3C Product Layout V18
   重點介紹框與「規格與應用」同高
   內容放得下：全部顯示
   內容放不下：淡出＋顯示「查看完整介紹」
   ========================================================= */

.product-v11-hero-inner {
  align-items:start !important;
}

.product-v16-intro {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* 桌機：由 JS 量右側規格卡高度後，設定重點介紹框同高 */
@media (min-width:981px){
  .product-v16-intro.hl3c-intro-equalized {
    height:var(--hl3c-intro-box-height);
  }
}

/* 手機不要強制同高 */
@media (max-width:980px){
  .product-v16-intro {
    height:auto !important;
  }
}

.product-v16-intro-title {
  flex:0 0 auto;
}

.product-v16-intro-body {
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  max-height:none !important;
}

/* 放得下時，不要淡出 */
.product-v16-intro:not(.hl3c-intro-overflow) .product-v16-intro-body::after {
  display:none !important;
}

/* 放不下時，底部淡出 */
.product-v16-intro.hl3c-intro-overflow .product-v16-intro-body::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:70px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,250,247,.98));
  pointer-events:none;
}

/* 按鈕預設隱藏，只有內容放不下才顯示 */
.product-v17-intro-actions {
  flex:0 0 auto;
  display:none !important;
  margin-top:14px;
}

.product-v16-intro.hl3c-intro-overflow .product-v17-intro-actions {
  display:flex !important;
}

/* 重點介紹也要有清楚排版 */
.product-v16-intro-body {
  color:#1f2937;
  font-size:16px;
  line-height:1.82;
}

.product-v16-intro-body h1,
.product-v16-intro-body h2,
.product-v16-intro-body h3,
.product-v16-intro-body h4 {
  margin:14px 0 9px;
  color:#111827;
  line-height:1.35;
  font-weight:1000;
}

.product-v16-intro-body h1 { font-size:24px; }
.product-v16-intro-body h2 { font-size:21px; }
.product-v16-intro-body h3 { font-size:18px; }
.product-v16-intro-body h4 { font-size:16px; }

.product-v16-intro-body p {
  margin:0 0 10px;
}

.product-v16-intro-body strong,
.product-v16-intro-body b {
  color:#111827;
  font-weight:1000;
}

.product-v16-intro-body a {
  color:#d84b32;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:3px;
}

.product-v16-intro-body ul,
.product-v16-intro-body ol {
  margin:8px 0 10px;
  padding:0;
  list-style:none;
}

.product-v16-intro-body li {
  position:relative;
  margin:5px 0;
  padding-left:22px;
  color:#334155;
}

.product-v16-intro-body ul li::before {
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#d84b32;
  font-weight:1000;
}

.product-v16-intro-body ol {
  counter-reset:item;
}

.product-v16-intro-body ol li {
  counter-increment:item;
}

.product-v16-intro-body ol li::before {
  content:counter(item) ".";
  position:absolute;
  left:0;
  top:0;
  color:#d84b32;
  font-weight:1000;
}

/* 可在後台 HTML 裡使用的重點框 */
.product-v16-intro-body .hl3c-highlight,
.product-v16-intro-body blockquote {
  margin:10px 0;
  padding:11px 13px;
  border-left:4px solid #d84b32;
  border-radius:12px;
  background:#fff7ed;
  color:#334155;
}

/* 可在後台 HTML 裡使用的資訊格 */
.product-v16-intro-body .hl3c-brief-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:10px 0;
}

.product-v16-intro-body .hl3c-brief-item {
  padding:9px 11px;
  border:1px solid #fed7aa;
  border-radius:12px;
  background:#fffaf5;
}

.product-v16-intro-body .hl3c-brief-item strong {
  display:block;
  margin-bottom:3px;
  color:#b83222;
  font-size:13px;
}

/* 圖片、iframe 避免撐爆 */
.product-v16-intro-body img,
.product-v17-modal-body img {
  max-width:100% !important;
  height:auto !important;
  border-radius:12px;
}

.product-v16-intro-body iframe,
.product-v17-modal-body iframe {
  max-width:100% !important;
}

/* 完整介紹 modal 內保留排版 */
.product-v17-modal-body h1,
.product-v17-modal-body h2,
.product-v17-modal-body h3,
.product-v17-modal-body h4 {
  color:#111827;
  line-height:1.35;
}

.product-v17-modal-body ul,
.product-v17-modal-body ol {
  padding-left:1.4em;
}

/* 若沒有規格與應用，重點介紹維持自然高度 */
.product-v11-page:not(.hl3c-has-spec-box) .product-v16-intro {
  height:auto !important;
}

@media (max-width:720px){
  .product-v16-intro-body .hl3c-brief-grid {
    grid-template-columns:1fr;
  }
}
