/* ===== TingRay (Vietnam) — site styles ===== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap");

:root {
  --nav-bg: #0f172a;
  --nav-bg-2: #1e293b;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;

  /* TingRay accent (teal) */
  --accent: #0ea5a5;
  --accent-hover: #0b8b8b;
  --accent-light: #ccfbf1;
  --accent-muted: rgba(14, 165, 165, 0.12);
  --accent-soft: #14b8a6;

  --highlight: #b45309;
  --highlight-light: #fef3c7;

  --bg-page: #ffffff;
  --bg-section-alt: #f8fafc;
  --bg-placeholder: #f1f5f9;

  --border-soft: rgba(15, 23, 42, 0.08);
  --border-accent: rgba(14, 165, 165, 0.25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 20px rgba(14, 165, 165, 0.1);
}

* {
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  letter-spacing: 0.02em;
  color: var(--ink-900);
  background: var(--bg-page);
}

.nav-grad {
  background: linear-gradient(180deg, #0f766e 0%, #0d9488 50%, #0f766e 100%);
  box-shadow: 0 2px 12px rgba(13, 148, 136, 0.28);
  border-bottom: 3px solid #5eead4;
}

.nav-link {
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--accent-light) !important;
}
.nav-link.active {
  color: #fff !important;
  font-weight: 700;
}

.navbar-brand .brand-logo {
  display: block;
  height: 42px;
  width: auto;
  margin-top: 0.2rem;
}

/* LOGO 右側：站名 + EASY 英文標語 */
.navbar-brand .navbar-brand-text {
  line-height: 1.2;
}
.navbar-brand .navbar-brand-title {
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.navbar-brand .brand-tagline {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.15rem;
  line-height: 1.25;
  max-width: 16rem;
}
@media (min-width: 576px) {
  .navbar-brand .brand-tagline {
    white-space: nowrap;
  }
}

/* 首頁圖片放大：右下角小按鈕 + Modal（由 site.js 注入按鈕與 #homeImageLightboxModal） */
.home-img-lightbox-host {
  position: relative;
}
.home-img-lightbox-host--instrument-img {
  display: block;
  position: relative;
}
.home-img-lightbox-host--card-img {
  display: block;
  position: relative;
  width: 100%;
}
.cert-thumb .home-img-lightbox-host--card-img {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-thumb .home-img-lightbox-host--card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.home-img-lightbox-btn {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 6;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0.35rem;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}
.home-img-lightbox-host:hover .home-img-lightbox-btn,
.home-img-lightbox-btn:hover,
.home-img-lightbox-btn:focus-visible {
  opacity: 1;
  background: rgba(14, 165, 165, 0.92);
  outline: none;
}
.home-img-lightbox-btn:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(14, 165, 165, 0.9);
}
/* 從「更多包裝實例」等內層 Modal 再開 lightbox 時疊在最上層（Bootstrap 預設多為 1055） */
.modal.home-image-lightbox-modal {
  z-index: 1070;
}
/* 圖片放大懸浮視窗：與站內 teal 主題、Hero 頂線呼應 */
body.modal-open:has(.home-image-lightbox-modal.show) .modal-backdrop {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(5px);
}
.home-image-lightbox-dialog.modal-dialog {
  max-width: min(90vw, 1050px);
  width: min(90vw, 1050px);
  height: min(88vh, calc(100vh - 2.5rem));
  max-height: min(88vh, calc(100vh - 2.5rem));
  margin: 1.25rem auto;
}
.home-image-lightbox-content {
  position: relative;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  color: var(--ink-900);
  border-radius: 1.15rem;
  overflow: hidden;
  box-shadow:
    0 28px 56px -16px rgba(15, 23, 42, 0.22),
    0 0 0 1px var(--border-soft),
    0 0 48px rgba(14, 165, 165, 0.12);
}
.home-image-lightbox-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 50%, rgba(20, 184, 166, 0.35) 100%);
  opacity: 0.95;
  z-index: 3;
  pointer-events: none;
}
/* 標題列：與導覽列 nav-grad 同系的 teal 帶狀＋預覽標籤＋主標題 */
.home-image-lightbox-content .modal-header.home-image-lightbox-header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.9rem 1rem;
  background: linear-gradient(180deg, #0f766e 0%, #0d9488 50%, #0f766e 100%);
  box-shadow: 0 2px 14px rgba(13, 148, 136, 0.35);
  border-bottom: 3px solid #5eead4;
}
.home-image-lightbox-header-main {
  gap: 0.75rem;
}
.home-image-lightbox-badge {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.home-image-lightbox-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.12rem;
  line-height: 1.2;
}
.home-image-lightbox-caption.modal-title {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.home-image-lightbox-caption.modal-title:empty::before {
  content: "\2014";
  opacity: 0.45;
  font-weight: 600;
}
.home-image-lightbox-close.btn-close {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  opacity: 0.95;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.home-image-lightbox-close.btn-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.home-image-lightbox-close.btn-close:focus {
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.95), 0 0 0 4px rgba(15, 118, 110, 0.5);
}
.home-image-lightbox-body.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem 1rem !important;
  overflow: auto;
  background: linear-gradient(165deg, var(--bg-section-alt) 0%, var(--bg-page) 42%, #f0fdfa 100%);
}
.home-image-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 118, 110, 0.85);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  opacity: 0.95;
}
.home-image-lightbox-arrow:hover {
  background: rgba(13, 148, 136, 0.95);
  transform: translateY(-50%) scale(1.06);
  opacity: 1;
  box-shadow: 0 4px 18px rgba(13, 148, 136, 0.35);
}
.home-image-lightbox-arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(14, 165, 165, 0.85);
}
.home-image-lightbox-arrow--prev {
  left: 0.35rem;
}
.home-image-lightbox-arrow--next {
  right: 0.35rem;
}
@media (min-width: 768px) {
  .home-image-lightbox-arrow--prev {
    left: 0.6rem;
  }
  .home-image-lightbox-arrow--next {
    right: 0.6rem;
  }
}
.home-image-lightbox-img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  background: var(--bg-page);
  border-radius: 0.65rem;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down .home-image-lightbox-content {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .home-image-lightbox-content::before {
    border-radius: 0;
  }
}

/* JS 將圖包在 .home-img-lightbox-host--card-img 時，補齊原「直接子層 img」的欄高／flex，避免產品格與 Hero 跑版 */
.media-card.media-card-product > .home-img-lightbox-host--card-img {
  flex-shrink: 0;
  width: 100%;
  height: 15.5rem;
  box-sizing: border-box;
  background: var(--bg-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-card.media-card-product > .home-img-lightbox-host--card-img > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 575.98px) {
  .media-card.media-card-product > .home-img-lightbox-host--card-img {
    height: 12rem;
  }
}
/* 首頁產品圖鑑：圖片高度改由 #product-gallery 依一頁高度計算（見下方區塊） */

.hero-media-card > .home-img-lightbox-host--card-img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-media-card > .home-img-lightbox-host--card-img > img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
}
.home-onepage .hero.hero--fullbleed-banner .hero-media-card--banner > .home-img-lightbox-host--card-img > img {
  min-height: 0;
}

.cap-process-stack .media-card > .home-img-lightbox-host--card-img {
  width: 100%;
}

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--bg-page) 0%, var(--bg-section-alt) 50%, #ecfeff 100%);
  color: var(--ink-900);
  border-bottom: 1px solid var(--border-soft);
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft) 50%, transparent 100%);
  opacity: 0.85;
}
.hero > * {
  position: relative;
}
@media (min-width: 992px) {
  .hero .row.align-items-stretch.g-5 {
    --bs-gutter-x: 4rem;
  }
}
.kicker {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.headline {
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--ink-900);
}
.sub {
  color: var(--ink-700);
  max-width: 70ch;
}
.pill {
  background: var(--accent-muted);
  border: 1px solid var(--border-accent);
  color: var(--ink-700);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section {
  padding: 80px 0;
}
.section-alt {
  background: var(--bg-section-alt);
}

/* ===== Home (one-page sections) =====
   僅套用在首頁（<body class="home-onepage">），避免影響其它頁面。 */
.home-onepage {
  /* sticky navbar 高度（LOGO + 站名／標語兩行 + padding），用固定值最穩定 */
  --home-nav-h: 72px;
  --home-page-h: calc(100vh - var(--home-nav-h));
}

/* 首頁錨點：與 sticky 導覽列對齊（滾輪 scrollIntoView 與 # 連結皆適用） */
/* 除「關於我們」外：scroll-margin 略減約一行，讓定錨畫面略往上移 */
body.home-onepage #certifications-section,
body.home-onepage #capabilities-section,
body.home-onepage #product-gallery,
body.home-onepage #quality-control-section,
body.home-onepage #contact-footer-pane,
body.home-onepage #contact-form-section {
  scroll-margin-top: calc(var(--home-nav-h) + 0.75rem - 1.05rem);
}
/* Hero 在文件頂端：scroll-margin 會讓 scrollIntoView 無法對齊 scrollY=0，回捲頂時底緣易露縫 */
body.home-onepage #hero-factory-banner {
  scroll-margin-top: 0;
}
/* 「關於我們」：維持原錨點偏移（另有 JS 手算捲動）；與 Hero 間距改由此處 margin 承接（原 hero margin-bottom） */
body.home-onepage #about-us-section {
  scroll-margin-top: calc(var(--home-nav-h) + 0.75rem);
  margin-top: 1.25rem;
  padding-top: 1.35rem;
}
/* 每個區塊固定一個視窗高度（扣導覽列）；超出內容在區塊內捲動 */
.home-onepage .hero,
.home-onepage main > .section {
  height: var(--home-page-h);
  max-height: var(--home-page-h);
  min-height: var(--home-page-h);
  box-sizing: border-box;
  overflow: hidden;
}
/* 當 JS 判定內容會被截斷時，改為至少一屏高且可隨內容撐開，避免區塊被硬切斷 */
.home-onepage .hero.section--allow-auto-height,
.home-onepage main > .section.section--allow-auto-height {
  height: auto;
  max-height: none;
  min-height: var(--home-page-h);
  overflow: visible;
}

/* 首頁區塊縮小上下留白，提升「一頁內」容納率 */
.home-onepage main > .section {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 575.98px) {
  .home-onepage main > .section {
    padding: 16px 0;
  }
}

/* 區塊內可捲動但不顯示捲軸；高度隨父層區塊（滿一屏扣 padding） */
.home-onepage main > .section > .container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.home-onepage main > .section.section--allow-auto-height > .container {
  flex: 0 0 auto;
  min-height: min-content;
  max-height: none;
  overflow: visible;
}
.home-onepage main > .section > .container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 「線上留言＋頁尾」：筆電視窗較矮時，固定一屏＋隱藏內捲軸易造成長文像被裁掉；
   改為至少一屏高、隨內容伸長，由頁面主捲動閱讀（與 site.js 滾輪放行一致）。
   「關於我們」維持與其它 main 區塊相同：固定一屏高、內容於 .container 內捲，滾輪先內捲到底再換區。 */
.home-onepage .home-onepage-tail {
  height: auto;
  max-height: none;
  min-height: var(--home-page-h);
  overflow: visible;
}

/* 聯絡區：勿與 overflow-y:visible 並用 overflow-x:hidden（規範會把 y 改算成 auto，易變成極矮內捲＋像被頁尾切斷） */
.home-onepage .home-onepage-tail > #contact-form-section > .container {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-height: none;
  min-height: min-content;
  overflow: visible;
}

/* 線上留言＋頁尾：外層 .home-onepage-tail 高度見上「至少一屏、可伸長」；此處維持直向 flex 排版 */
.home-onepage .home-onepage-tail {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.home-onepage .home-onepage-tail > #contact-form-section.section {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: min-content;
  height: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  /* 與頁尾深色區之間留白，避免淺色表單區貼線 */
  padding-bottom: 0.85rem;
}
@media (max-width: 575.98px) {
  .home-onepage .home-onepage-tail > #contact-form-section.section {
    padding-top: 8px;
    padding-bottom: 0.65rem;
  }
}
/* 首頁尾端線上留言：縮小面板與欄距，整體較緊湊 */
.home-onepage .home-onepage-tail #contact-form-section .home-contact-soft-panel {
  padding: 0.85rem 1rem !important;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .home-onepage .home-onepage-tail #contact-form-section .home-contact-soft-panel {
    padding: 1rem 1.2rem !important;
    margin-bottom: 0.65rem;
  }
}
.home-onepage .home-onepage-tail #contact-form-section .home-contact-soft-panel > h2 {
  margin-bottom: 0.4rem !important;
}
.home-onepage .home-onepage-tail #contact-form-section .home-contact-soft-panel > p.text-secondary {
  margin-bottom: 0.65rem !important;
  line-height: 1.45;
}
.home-onepage .home-onepage-tail #contact-form-section .home-contact-form-grid {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.55rem;
}
.home-onepage .home-onepage-tail #contact-form-section .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.9rem;
}
.home-onepage .home-onepage-tail #contact-form-section .form-control {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-size: 0.95rem;
}
.home-onepage .home-onepage-tail #contact-form-section textarea.form-control {
  min-height: 4.5rem;
}
.home-onepage .home-onepage-tail > #site-footer.footer {
  flex: 0 0 auto;
  padding-top: 0.75rem !important;
  padding-bottom: 0.55rem !important;
  margin-top: 0;
}
.home-onepage .home-onepage-tail > #site-footer .ratio {
  max-height: 9.5rem;
}
@media (min-width: 576px) {
  .home-onepage .home-onepage-tail > #site-footer .ratio {
    max-height: 11rem;
  }
}
@media (min-width: 992px) {
  .home-onepage .home-onepage-tail > #site-footer .ratio {
    max-height: 12rem;
  }
}

/* Hero：全寬廠區大圖一屏；文字移至 main #about-us-section */
.home-onepage .hero {
  display: flex;
  flex-direction: column;
}
.home-onepage .hero.hero--fullbleed-banner {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  /* 與「關於我們」間距改由 #about-us-section margin-top，避免首屏大圖外再佔一條 margin 造成底緣露縫 */
  margin-bottom: 0;
}
.home-onepage .hero.hero--fullbleed-banner .home-hero-fullbleed {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.home-onepage .hero.hero--fullbleed-banner .hero-media-card--banner {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  box-shadow: none;
}
.home-onepage .hero.hero--fullbleed-banner .hero-media-card--banner img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
}
/* 窄螢幕直立：廠區大圖構圖中心略往左（較接近桌機裁切），避免門斗擠在畫面右側 */
@media (max-width: 991.98px) {
  .home-onepage .hero.hero--fullbleed-banner .hero-media-card--banner img,
  .home-onepage .hero.hero--fullbleed-banner .hero-media-card--banner > .home-img-lightbox-host--card-img > img {
    object-position: 26% center;
  }
}

/* ===== 首頁變體：大圖改置於「關於我們」原公司理念區（zh-Hant/index-hero-philosophy.html）===== */
body.home-onepage.home-onepage--hero-in-philosophy .hero.hero--fullbleed-banner.home-onepage-hero-skip-banner {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.home-onepage.home-onepage--hero-in-philosophy .hero.hero--fullbleed-banner.home-onepage-hero-skip-banner::before {
  display: none !important;
}
body.home-onepage.home-onepage--hero-in-philosophy #about-us-section {
  margin-top: 0.35rem;
}
/* 左欄大圖：襯底透明，圖框僅單邊與輕陰影（與標準首頁語調一致） */
.home-onepage.home-onepage--hero-in-philosophy .home-about-philosophy--hero-in-left .home-about-philosophy-left--factory-photo {
  background: transparent !important;
  padding: 0.75rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.home-onepage.home-onepage--hero-in-philosophy .home-about-philosophy--hero-in-left .home-about-hero-slot-inner {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.22);
  aspect-ratio: 1024 / 441;
  min-height: 12rem;
  flex: 1 1 auto;
  min-width: 0;
}
.home-onepage.home-onepage--hero-in-philosophy .home-about-philosophy--hero-in-left .home-about-hero-slot__img,
.home-onepage.home-onepage--hero-in-philosophy
  .home-about-philosophy--hero-in-left
  .home-about-hero-slot-inner
  > .home-img-lightbox-host--card-img
  > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 26% center;
}
@media (max-width: 991.98px) {
  .home-onepage.home-onepage--hero-in-philosophy .home-about-philosophy--hero-in-left .home-about-hero-slot__img,
  .home-onepage.home-onepage--hero-in-philosophy
    .home-about-philosophy--hero-in-left
    .home-about-hero-slot-inner
    > .home-img-lightbox-host--card-img
    > img {
    object-position: 26% center;
  }
}

/* 變體右欄（廠區概要）：白底，與左欄漸層／大圖區隔 */
.home-onepage.home-onepage--hero-in-philosophy .home-about-philosophy--hero-in-left .home-about-philosophy-right {
  background: var(--bg-page);
  position: relative;
  padding: 1.35rem 1.2rem 1.35rem 1.2rem;
  overflow: visible;
}
@media (min-width: 992px) {
  .home-onepage.home-onepage--hero-in-philosophy .home-about-philosophy--hero-in-left .home-about-philosophy-right {
    padding: 1.85rem 1.45rem 1.9rem 1.6rem;
  }
}

.home-onepage .hero-media-card--banner {
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}
.home-onepage #about-us-section .home-about-intro .headline {
  margin-top: 0;
}
@media (min-width: 992px) {
  .home-onepage #about-us-section .hero-intro-text {
    font-size: 1.02rem;
    line-height: 1.6;
  }
  .home-onepage #about-us-section .hero-facts-list {
    font-size: 0.92rem;
    line-height: 1.5;
  }
}

/* 關於我們：公司理念 + 廠區概要 — 單卡漸層底，左右欄透明，避免綠／白硬切 */
.home-onepage .home-about-philosophy {
  flex: 0 0 auto;
}
.home-onepage .home-about-philosophy-inner {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 118, 110, 0.12);
}
/* 標準雙欄：整塊共用斜向漸層，接縫落在色相連續區 */
.home-onepage .home-about-philosophy:not(.home-about-philosophy--hero-in-left) > .home-about-philosophy-inner {
  border: 1px solid rgba(13, 148, 136, 0.22);
  background: linear-gradient(
    180deg,
    #134e4a 0%,
    #0f766e 36%,
    #14b8a6 46%,
    #5eead4 52%,
    #a7f3d0 58%,
    #ecfdf5 68%,
    #f1f5f9 100%
  );
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy:not(.home-about-philosophy--hero-in-left) > .home-about-philosophy-inner {
    background: linear-gradient(
      104deg,
      #134e4a 0%,
      #0f766e 40%,
      #0d9488 48%,
      #2dd4bf 51%,
      #6ee7b7 54%,
      #ccfbf1 60%,
      #ecfdf5 68%,
      #f8fafc 100%
    );
  }
}
/* 變體（左圖右文）：漸層同標準；外框用中性灰，避免白底「廠區概要」外圈綠線 */
.home-onepage .home-about-philosophy--hero-in-left > .home-about-philosophy-inner {
  position: relative;
  z-index: 0;
  border: 1px solid var(--border-soft);
  background: linear-gradient(
    180deg,
    #134e4a 0%,
    #0f766e 36%,
    #14b8a6 46%,
    #5eead4 52%,
    #a7f3d0 58%,
    #ecfdf5 68%,
    #f1f5f9 100%
  );
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(15, 23, 42, 0.06);
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy--hero-in-left > .home-about-philosophy-inner {
    background: linear-gradient(
      104deg,
      #134e4a 0%,
      #0f766e 40%,
      #0d9488 48%,
      #2dd4bf 51%,
      #6ee7b7 54%,
      #ccfbf1 60%,
      #ecfdf5 68%,
      #f8fafc 100%
    );
  }
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy-inner {
    flex-direction: row;
    align-items: stretch;
    min-height: min(24rem, 52vh);
  }
}
.home-onepage .home-about-philosophy-left {
  flex: 1 1 50%;
  background: transparent;
  color: #fff;
  padding: 1.4rem 1.1rem 1.45rem 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy-left {
    /* 左:右 約 50:50；頂對齊勿置中，否則兩欄內容高度不同時膠囊標題會一高一低 */
    padding: 1.85rem 1.1rem 1.9rem 1.75rem;
    flex: 0 0 50%;
    max-width: 50%;
    gap: 0.65rem;
    justify-content: flex-start;
  }
}
.home-onepage .home-about-philosophy-kicker {
  /* 父層為 flex column 時預設 stretch 會把子元素拉滿寬，外框勿套整欄 */
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  display: inline-block;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.38rem 1.05rem;
}
.home-onepage .home-about-philosophy-lead-en {
  font-size: clamp(1.22rem, 2.5vw + 0.65rem, 2.1rem);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: 0.02em;
  color: #fff;
}
.home-onepage .home-about-philosophy-em {
  color: #99f6e4;
}
.home-onepage .home-about-philosophy-sub-en {
  font-size: clamp(0.98rem, 0.95vw + 0.78rem, 1.22rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.88);
}
.home-onepage .home-about-philosophy-right {
  flex: 1 1 50%;
  background: transparent;
  color: var(--ink-900);
  padding: 1.35rem 1.2rem 1.35rem 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy-right {
    flex: 0 0 50%;
    min-width: 0;
    max-width: 50%;
    /* 與左欄相同頂部內距，膠囊標題水平對齊 */
    padding: 1.85rem 1.45rem 1.9rem 1.6rem;
    justify-content: flex-start;
  }
}

/* 右欄「廠區概要」標題：膠囊邊框，與淺綠底漸層尾端協調 */
.home-onepage .home-about-plant-heading {
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  display: inline-block;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f3d3a;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(13, 148, 136, 0.35);
  border-radius: 999px;
  padding: 0.38rem 1.05rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[lang^="zh"] .home-onepage .home-about-plant-heading {
  text-transform: none;
  letter-spacing: 0.12em;
}
html[lang^="vi"] .home-onepage .home-about-plant-heading {
  text-transform: none;
  letter-spacing: 0.06em;
}

.home-onepage .home-about-philosophy-list {
  margin: 0;
}
.home-onepage .home-about-philosophy-item {
  margin-bottom: 0.75rem;
}
.home-onepage .home-about-philosophy-item::after {
  content: "";
  display: table;
  clear: both;
}
.home-onepage .home-about-philosophy-item dt {
  float: left;
  clear: left;
  width: 5.1rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.58;
}
.home-onepage .home-about-philosophy-item dd {
  margin: 0 0 0 5.1rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-700);
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy-item {
    margin-bottom: 0.95rem;
  }
  .home-onepage .home-about-philosophy-item dt {
    width: 5.85rem;
    font-size: 1.15rem;
  }
  .home-onepage .home-about-philosophy-item dd {
    margin-left: 5.85rem;
    font-size: 1.15rem;
    line-height: 1.68;
  }
}
@media (max-width: 575.98px) {
  .home-onepage .home-about-philosophy-item dt {
    float: none;
    width: auto;
    margin-bottom: 0.1rem;
  }
  .home-onepage .home-about-philosophy-item dd {
    margin-left: 0;
    margin-bottom: 0.35rem;
  }
}

/* 關於我們：廠區概要 — 成立列＋規格表（dl），取代純條列 */
.home-onepage .home-about-philosophy-right .home-about-plant-body {
  margin: 0;
}
.home-onepage .home-about-philosophy-right .home-about-plant-lede {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--bg-section-alt);
  border-radius: 0.35rem;
  border-left: 3px solid var(--accent);
}
.home-onepage .home-about-philosophy-right .home-about-plant-dl {
  margin: 0;
}
.home-onepage .home-about-philosophy-right .home-about-plant-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  /* 項目與內容之間間距 */
  column-gap: 2rem;
  row-gap: 0.25rem;
  padding: 0.48rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.home-onepage .home-about-philosophy-right .home-about-plant-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.home-onepage .home-about-philosophy-right .home-about-plant-row dt {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-600);
}
.home-onepage .home-about-philosophy-right .home-about-plant-row dd {
  flex: 0 1 auto;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-900);
  text-align: start;
  min-width: 0;
}
@media (min-width: 992px) {
  .home-onepage .home-about-philosophy-right .home-about-plant-lede {
    font-size: 1.02rem;
  }
  .home-onepage .home-about-philosophy-right .home-about-plant-row dt {
    font-size: 0.95rem;
  }
  .home-onepage .home-about-philosophy-right .home-about-plant-row dd {
    font-size: 1.08rem;
    line-height: 1.6;
  }
}
@media (max-width: 575.98px) {
  .home-onepage .home-about-philosophy-right .home-about-plant-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
  }
  .home-onepage .home-about-philosophy-right .home-about-plant-row dd {
    font-weight: 600;
  }
}
/* 越南文標題：避免 kicker 強制全大寫 */
.home-onepage .home-about-philosophy-kicker--vi {
  text-transform: none;
  letter-spacing: 0.08em;
}

/* 關於我們：獨立灰底廠區概要區（首頁已改為 philosophy 雙欄，此組保留供其它頁或舊版重用） */
.home-onepage .home-about-facts {
  flex: 0 0 auto;
  padding: 0.85rem 1rem 0.25rem;
  border-radius: 0.35rem;
  background: var(--bg-section-alt);
  border: 1px solid var(--border-soft);
}
.home-onepage .home-about-facts-title {
  letter-spacing: 0.08em;
  font-weight: 600;
}
@media (min-width: 768px) {
  .home-onepage .home-about-facts-list {
    columns: 2;
    column-gap: 2rem;
  }
  .home-onepage .home-about-facts-list li {
    break-inside: avoid;
  }
}

/* 首頁區塊標題區略緊湊 */
.home-onepage main > .section .mb-4 {
  margin-bottom: 0.65rem !important;
}

/* 認證：縮圖高度依一頁分配；寬螢幕 4 欄約 2 列，較窄則 3～4 列 */
.home-onepage .cert-grid {
  gap: 0.65rem;
}
@media (min-width: 1200px) {
  .home-onepage .cert-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.home-onepage #certifications-section {
  /* 標題／證卡文字預留 + 區塊 chrome；證卡僅 h3 無說明時縮小文字區高度讓縮圖略大 */
  --cert-intro: 4.2rem;
  --cert-body-h: 2.55rem;
  --cert-gap: 0.65rem;
  --cert-chrome: 2.4rem;
}
.home-onepage #certifications-section .cert-thumb {
  height: calc(
    (
        var(--home-page-h) - var(--cert-chrome) - var(--cert-intro) - 2 * var(--cert-body-h) -
          var(--cert-gap)
      ) /
      2
  );
  min-height: 6.5rem;
  padding: 0.45rem;
  background: var(--bg-placeholder);
}
@media (max-width: 1199.98px) and (min-width: 576px) {
  .home-onepage #certifications-section .cert-thumb {
    height: calc(
      (
          var(--home-page-h) - var(--cert-chrome) - var(--cert-intro) - 3 * var(--cert-body-h) - 2 *
            var(--cert-gap)
        ) /
        3
    );
  }
}
@media (max-width: 575.98px) {
  .home-onepage #certifications-section {
    --cert-intro: 4.75rem;
    --cert-chrome: 2.75rem;
  }
  .home-onepage #certifications-section .cert-thumb {
    height: calc(
      (
          var(--home-page-h) - var(--cert-chrome) - var(--cert-intro) - 4 * var(--cert-body-h) - 3 *
            var(--cert-gap)
        ) /
        4
    );
    min-height: 4.85rem;
  }
}
.home-onepage #certifications-section .cert-body {
  padding: 0.5rem 0.6rem 0.6rem;
}
.home-onepage #certifications-section .cert-body h3 {
  margin-bottom: 0;
}
.home-onepage #certifications-section .cert-body p {
  font-size: 0.77rem;
  line-height: 1.34;
}

/* 首頁「製造能力」：8 張；≥576px 三欄三排；數值介於「一頁內」與可讀性之間 */
.home-onepage #capabilities-section {
  --cap-overhead: 5.4rem;
  --cap-img-rows: 3.68;
}
.home-onepage #capabilities-section .cap-process-stack .media-card {
  margin-top: 0;
}
.home-onepage #capabilities-section .cap-process-stack .cap-slide-img {
  height: calc((var(--home-page-h) - var(--cap-overhead)) / var(--cap-img-rows));
  min-height: 5.35rem;
  object-fit: contain;
  background: var(--bg-placeholder);
}
.home-onepage #capabilities-section .cap-process-stack .media-caption {
  padding: 0.32rem 0.6rem;
}
@media (max-width: 991.98px) {
  .home-onepage #capabilities-section {
    --cap-overhead: 5.2rem;
  }
}
@media (max-width: 575.98px) {
  .home-onepage #capabilities-section {
    --cap-overhead: 4.85rem;
    --cap-img-rows: 4.95;
  }
  .home-onepage #capabilities-section .cap-process-stack .cap-slide-img {
    min-height: 4.05rem;
  }
}

/* 首頁產品圖鑑：圖片高度依一頁視窗分配（≥992px 每列 4 張共 3 列；較小寬度每列 2 張共 6 列）
   --pg-chrome：主區塊上下 padding（.home-onepage main > .section）＋邊界裕度，避免算滿 100vh 仍溢出
   --pg-fit-fudge：圖卡底部（標題列＋放大鈕）實際略高於 --pg-cap-h 時的緩衝，避免底列被裁切 */
.home-onepage #product-gallery {
  --pg-chrome: 2.75rem;
  --pg-intro: 2.85rem;
  --pg-cap-h: 2.5rem;
  --pg-gap: 1rem;
  --pg-fit-fudge: 1rem;
}
@media (max-width: 991.98px) {
  .home-onepage #product-gallery {
    --pg-intro: 4.1rem;
  }
}
@media (max-width: 575.98px) {
  .home-onepage #product-gallery {
    --pg-chrome: 2.35rem;
    --pg-intro: 3.85rem;
  }
}
@media (min-width: 992px) {
  .home-onepage #product-gallery .media-card.media-card-product > img {
    height: calc(
      (
          var(--home-page-h) - var(--pg-chrome) - var(--pg-intro) - 3 * var(--pg-cap-h) - 2 * var(--pg-gap) -
            var(--pg-fit-fudge)
        ) / 3
    );
    min-height: 3.75rem;
    object-fit: contain;
    background: var(--bg-placeholder);
  }
  .home-onepage #product-gallery .media-card.media-card-product > .home-img-lightbox-host--card-img {
    height: calc(
      (
          var(--home-page-h) - var(--pg-chrome) - var(--pg-intro) - 3 * var(--pg-cap-h) - 2 * var(--pg-gap) -
            var(--pg-fit-fudge)
        ) / 3
    );
    min-height: 3.75rem;
  }
}
@media (max-width: 991.98px) {
  .home-onepage #product-gallery .media-card.media-card-product > img {
    height: calc(
      (
          var(--home-page-h) - var(--pg-chrome) - var(--pg-intro) - 6 * var(--pg-cap-h) - 5 * var(--pg-gap) -
            var(--pg-fit-fudge)
        ) / 6
    );
    min-height: 3.25rem;
    object-fit: contain;
    background: var(--bg-placeholder);
  }
  .home-onepage #product-gallery .media-card.media-card-product > .home-img-lightbox-host--card-img {
    height: calc(
      (
          var(--home-page-h) - var(--pg-chrome) - var(--pg-intro) - 6 * var(--pg-cap-h) - 5 * var(--pg-gap) -
            var(--pg-fit-fudge)
        ) / 6
    );
    min-height: 3.25rem;
  }
}

/* 產品圖鑑：第 1 項縮圖以橫向呈現（原圖多為直式，旋轉 90° 後以橫幅置中） */
.home-onepage #product-gallery .product-gallery-thumb--landscape.media-card-product {
  overflow: hidden;
}
.home-onepage #product-gallery .product-gallery-thumb--landscape > .home-img-lightbox-host--card-img {
  position: relative;
  overflow: hidden;
}
.home-onepage #product-gallery .product-gallery-thumb--landscape .home-img-lightbox-host--card-img > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
}
.home-onepage #product-gallery .product-gallery-thumb--landscape.media-card-product > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(90deg);
  transform-origin: center center;
  object-fit: contain;
}

/* 包裝實例 MORE 卡片：同列欄高由 Bootstrap 撐滿，不另設固定 min-height */
.home-onepage #product-gallery .product-pack-more-card {
  min-height: 0;
}

/* 包裝實例 MORE 懸浮視窗內縮圖（圖片經 lightbox 包一層後非 .media-card 直接子元素） */
#packGalleryMoreModal .media-card.media-card-product img {
  height: 7.25rem;
  width: 100%;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  #packGalleryMoreModal .media-card.media-card-product img {
    height: 6.25rem;
  }
}

/* 首頁品質控制：≥992px 每列 4 欄；前 4 張各 1 格，最後一張橫跨 4×2＝8 格 */
.home-onepage #quality-control-section {
  --qc-intro: 4.05rem;
  --qc-cap-h: 2.2rem;
  --qc-gap: 0.55rem;
}
.home-onepage #quality-control-section .instrument-grid {
  gap: var(--qc-gap);
}
@media (min-width: 992px) {
  .home-onepage #quality-control-section {
    --qc-cell-h: calc(
      (var(--home-page-h) - var(--qc-intro) - 3 * var(--qc-cap-h) - 2 * var(--qc-gap)) / 3
    );
  }
  .home-onepage #quality-control-section .instrument-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-onepage #quality-control-section .instrument-item img {
    height: var(--qc-cell-h);
    min-height: 4.5rem;
    object-fit: contain;
    background: var(--bg-placeholder);
  }
  .home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 img {
    height: calc(var(--qc-cell-h) * 2 + var(--qc-gap));
    min-height: 9rem;
  }
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .home-onepage #quality-control-section {
    --qc-cell-h: calc(
      (var(--home-page-h) - var(--qc-intro) - 4 * var(--qc-cap-h) - 3 * var(--qc-gap)) / 4
    );
  }
  .home-onepage #quality-control-section .instrument-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-onepage #quality-control-section .instrument-item img {
    height: var(--qc-cell-h);
    min-height: 3.5rem;
    object-fit: contain;
    background: var(--bg-placeholder);
  }
  .home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 img {
    height: calc(var(--qc-cell-h) * 2 + var(--qc-gap));
    min-height: 7rem;
  }
}
@media (max-width: 575.98px) {
  .home-onepage #quality-control-section {
    --qc-intro: 4.85rem;
    --qc-cell-h: calc(
      (var(--home-page-h) - var(--qc-intro) - 6 * var(--qc-cap-h) - 5 * var(--qc-gap)) / 6
    );
  }
  .home-onepage #quality-control-section .instrument-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-onepage #quality-control-section .instrument-item img {
    height: var(--qc-cell-h);
    min-height: 2.75rem;
    object-fit: contain;
    background: var(--bg-placeholder);
  }
  .home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 img {
    height: calc(var(--qc-cell-h) * 2 + var(--qc-gap));
    min-height: 5.5rem;
  }
}

/* 第五張 Load Sensor 合成圖：檔案內建上下黑邊，裁切後再顯示（不影響另四張） */
.home-onepage #quality-control-section .instrument-item.instrument-item--qc-span-8 img {
  clip-path: inset(6% 0 6% 0);
}

.home-onepage #quality-control-section .instrument-item .instrument-cap {
  padding: 0.4rem 0.55rem;
}

.section-title-underline {
  display: inline-block;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--accent);
  margin-bottom: 0.5rem;
}
.section-sub {
  color: var(--ink-700);
  max-width: 78ch;
}

.feature {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  border-left: 4px solid var(--accent);
}
.feature:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.feature .icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-muted);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-weight: 900;
  font-size: 1rem;
}
.feature .icon i {
  font-size: 1.2rem;
}

.media-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.media-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
/* 首頁全寬廠區大圖：勿套用 .media-card 懸浮上移，避免游標移入時圖整体上移 */
.home-onepage .hero.hero--fullbleed-banner .hero-media-card--banner.media-card:hover {
  transform: none;
  box-shadow: none;
}
.media-card img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-media-card {
  height: 100%;
  min-height: 100%;
  display: flex;
  border: 0;
  box-shadow: none;
}

.hero-media-card img {
  flex: 1 1 auto;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.qc-media {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.media-caption {
  padding: 0.9rem 1.1rem;
  color: var(--ink-600);
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

/* 圖片／證卡／儀器下方說明標題：字級、字重、行高、色比照產品圖鑑（.product-card-footer 內 .media-caption.small.fw-semibold） */
.media-card.media-card-product .product-card-footer .media-caption,
.cert-body h3,
.instrument-item .instrument-cap,
.home-onepage #quality-control-section .instrument-item .instrument-cap,
.home-onepage #capabilities-section .cap-process-stack .media-card > .media-caption,
.media-card:not(.media-card-product):not(.hero-media-card) > .media-caption {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  /* 蓋過 .text-secondary 的 !important，與產品圖鑑同色 */
  color: var(--ink-600) !important;
}

/* 產品圖鑑／產品頁：底部區塊；有 .product-card-desc 時固定高度（標題＋兩行說明為基準），僅標題時隨內容收合 */
.media-card.media-card-product {
  display: flex;
  flex-direction: column;
}
.media-card.media-card-product > img {
  flex-shrink: 0;
  width: 100%;
  height: 15.5rem;
  object-fit: contain;
  object-position: center center;
  background: var(--bg-placeholder);
  box-sizing: border-box;
}
/* 透明去背包裝圖：覆蓋產品圖預設底色，避免看起來像「白底未去背」 */
.media-card.media-card-product > img.pack-transparent-img {
  background: transparent;
}
.media-card.media-card-product .product-card-footer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fff, #f8fafc);
  flex-shrink: 0;
}
/* 產品頁等有說明段落時維持原固定高度 */
.media-card.media-card-product .product-card-footer:has(.product-card-desc) {
  height: 8.25rem;
  min-height: 8.25rem;
}
.media-card.media-card-product .product-card-footer .media-caption {
  border-top: none;
  background: transparent;
  padding-bottom: 0.35rem;
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
}
.media-card.media-card-product .product-card-footer .product-card-desc {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0 !important;
  padding-top: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
}
@media (max-width: 575.98px) {
  .media-card.media-card-product > img {
    height: 12rem;
  }
}

.soft-panel {
  border: 1px solid var(--border-accent);
  background: linear-gradient(135deg, var(--accent-muted) 0%, #fff 100%);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.btn-primary {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(14, 165, 165, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14, 165, 165, 0.35);
}
.btn-outline-primary {
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.btn-outline-primary:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.footer {
  background: linear-gradient(180deg, var(--nav-bg), #0a0f1a);
  color: rgba(255, 255, 255, 0.9);
  border-top: 3px solid var(--accent);
}
.footer a {
  color: #c7d2fe;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer .fa-icon {
  color: #5eead4;
  margin-right: 0.5rem;
  opacity: 0.95;
}

.mono-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.85rem;
}

/* 製造能力頁：各製程下方示意圖 */
.cap-process-stack .media-card {
  margin-top: 0.75rem;
  overflow: hidden;
}
.cap-process-stack .cap-slide-img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: var(--bg-page);
  display: block;
  vertical-align: top;
}
.cap-process-stack .media-caption {
  padding: 0.5rem 0.85rem;
}

/* 品質頁：證書格（與 VNN Certificate 頁一致） */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .cert-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cert-card {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  height: 100%;
}
.cert-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.cert-card a.cert-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.cert-thumb {
  height: 400px;
  background: var(--bg-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}
.cert-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cert-body {
  padding: 1rem 1.15rem 1.15rem;
  flex: 1 1 auto;
}
.cert-body h3 {
  margin-bottom: 0;
}
.cert-body p {
  font-size: 0.88rem;
  color: var(--ink-600);
  margin: 0;
  line-height: 1.5;
}

.instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.instrument-item {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.instrument-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.instrument-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: var(--bg-placeholder);
}
.instrument-item .instrument-cap {
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fff, #f8fafc);
}