/* ============================================================
   全站手機／平板響應式樣式 (Responsive)
   ------------------------------------------------------------
   最後載入，用於修正各頁在窄螢幕的破版：
   固定寬度容器、多欄網格、寬表格、等比例對比牆等。
   全站斷點統一三段：1024px（平板，多欄收單欄）／768px（手機，主要單欄化）／
   480px（小手機微調字級與 logo）。最小版面寬度 320px，再窄就橫向滑動。
   桌機版樣式完全不受影響（僅在斷點內生效）。
   ============================================================ */

/* ---------- 全域：避免任何元素撐破畫面寬度 ---------- */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg, table { max-width: 100%; }
  /* grid／flex 子項預設 min-width:auto，會被最長的一段文字撐開整個欄位（右側文字溢出的主因）。
     窄螢幕一律允許收縮；橫向滑動的區塊不受影響（它們用 flex:0 0 auto 決定寬度）。 */
  body *:not(svg):not(svg *) { min-width: 0; }
  /* 長英數字串（email、網址、料號）在窄螢幕可斷行 */
  a[href^="mailto"], a[href^="http"], .info-text, .info-text a, .footer a { overflow-wrap: anywhere; }
  /* 封面影片是刻意超出畫面的滿版背景（配合視差），不套用上面的寬度上限 */
  .hero-video { max-width: none !important; }
  /* .hero-container / .section-inner / .products-wrapper 可能寫死像素寬，窄螢幕要放開。
     .container 不在此列：各頁的 .container 自己用 calc(100% - 留白) 定義，
     一旦被 width:auto 蓋掉，左右留白就消失、文字會貼齊畫面邊緣。 */
  .hero-container, .section-inner, .products-wrapper { width: auto !important; }
  .container { max-width: 100%; }
}

/* ---------- 最小版面寬度：320px ----------
   320px 是現役手機的最窄尺寸（iPhone SE 第一代、部分小螢幕 Android）。
   再往下縮，字級與 44px 點擊區就保不住，因此不再縮放：版面固定在 320px，
   更窄的裝置（例如 Galaxy Fold 摺起來約 280px）改為可橫向滑動。 */
html, body { min-width: 320px; }

/* 以「視窗寬」計算的元素不會跟著 320px 下限走（100vw、以及固定定位的 100%），
   必須自己抵住 320px，否則會比內容窄，右側露出背景。 */
.fashion-hero-wrapper { width: 100%; min-width: 320px; }
.top-utility-bar,
.header,
#site-header-component:empty,
.m-nav-drawer { min-width: 320px; }

@media (max-width: 319px) {
  html, body { overflow-x: auto; }
}

/* ============================================================
   平板：1024px 以下
   ============================================================ */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* 漢堡選單從 1024px 開始出現，聯繫按鈕改由抽屜內提供，
     否則頁首在 769–1024 之間會擠成三顆按鈕、右側被切掉。

     語言鈕例外，留在頁首 ——「我看不懂這一頁」是最需要立刻解決的事，
     不該先叫使用者開一層抽屜才找得到。它在窄螢幕只顯示地球圖示
     （navbar.css 負責），寬度跟一顆圖示鈕一樣，擠不到別人。
     抽屜裡那顆（#mNavLang）因此隱藏，避免兩個入口。 */
  .header-right .contact-btn { display: none !important; }
  .header-right .lang-toggle { display: inline-flex !important; }
  #mNavLang { display: none !important; }

  /* .page-hero 的上內距必須含固定頁首的高度，否則標題會被蓋住。
     這條要放在 1024px 這一層：漢堡版頁首從 1024px 就開始，
     只寫在 768px 以下的話 769–1024 之間會被切掉。
     （.products-hero-section 已在該頁的基礎樣式用同一組變數計算，不需覆寫。） */
  .page-hero { padding-top: calc(var(--utility-h) + var(--header-h) + 28px) !important; }
}

/* ============================================================
   矮螢幕／平板以下的首頁封面
   ------------------------------------------------------------
   桌機版封面是 height:100vh + overflow:hidden，內容用絕對定位置中。
   在矮螢幕（例如 1024×600 的智慧螢幕、1366×768 筆電）內容會超過 600px
   而被裁掉，置中後最上面的 logo 牌還會被固定頁首蓋住。
   這裡改為高度由內容決定、上內距讓開頁首。
   ============================================================ */
@media (max-width: 1024px), (max-height: 820px) {
  .fashion-hero-wrapper {
    height: auto !important;
    min-height: 100svh !important;
    /* 高螢幕（例如 iPad 直立 1024×1366）內容只有約 700px，
       若靠上排會留下一大片空白照片；改成垂直置中。
       矮螢幕時內容比視窗高，min-height 讓它自然往下長。 */
    display: flex !important;
    align-items: center !important;
  }
  .hero-stage-content {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    height: auto !important;
    /* 從絕對定位（left:50% + translateX(-50%)）改成 relative 之後就沒有置中了，
       1350px 的內容框會貼齊左緣 —— 在寬螢幕但視窗較矮時特別明顯。
       這裡補回水平置中。 */
    margin-inline: auto !important;
    padding: calc(var(--utility-h) + var(--header-h) + 24px) 40px 48px !important;
  }
}

/* ============================================================
   手機：768px 以下
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 頁首 ---------- */
  .header {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  /* logo 已改為單一張整組圖（公司名在圖裡），只調圖高即可 */
  .logo-image { height: 46px !important; }
  .header-right { gap: 6px !important; }
  .search-trigger-btn { margin-right: 0 !important; width: 36px !important; height: 36px !important; }

  /* ---------- 產品頁首圖 ---------- */
  /* 上內距已在 1024px 那一層處理，這裡只調左右與下方 */
  .page-hero { padding-left: 18px !important; padding-right: 18px !important; padding-bottom: 28px !important; }
  .hero-title { font-size: 1.55rem !important; line-height: 1.35 !important; }
  .hero-desc { font-size: 0.92rem !important; line-height: 1.7 !important; }
  .product-hero-img { max-height: 240px !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; }

  /* 首圖容器的 padding:0 40px 寫在 style 屬性上，手機只剩 270px 可用，
     篩選標籤因此每排只排得下兩顆。收成 8px 讓它有完整寬度。 */
  .products-hero-container { padding-left: 8px !important; padding-right: 8px !important; }

  /* ---------- 篩選列：自動換行成多排 ----------
     原本改成橫向滑動，但手機上被切掉的那顆很容易被忽略（沒人知道可以滑），
     而且第一顆會滑出畫面外。這些標籤都很短，換行後兩三排就排完、全部看得見。 */
  .filter-pills-bar,
  .filter-tabs-bar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .filter-btn,
  .filter-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    padding: 8px 13px !important;
    min-height: 44px !important;
  }

  /* ---------- 規格區塊 ---------- */
  .products-wrapper,
  .spec-section { padding: 20px 14px !important; }
  .cat-spec-block { border-radius: 14px !important; }
  .cat-spec-header { padding: 16px 18px !important; }
  .cat-spec-title { font-size: 1.05rem !important; line-height: 1.4 !important; }

  /* ---------- 規格表：表格本身變成可橫向滑動的區塊，避免擠壓變形 ---------- */
  .compact-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
  }
  .compact-table th,
  .compact-table td { padding: 10px 12px !important; }
  .spec-table-pane { overflow-x: auto !important; }

  /* ---------- 等比例對比牆：橫向滑動 ---------- */
  .scale-ramp-container { padding: 16px 14px !important; }
  .scale-ramp-title-row { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .scale-ramp-title { font-size: 0.92rem !important; line-height: 1.5 !important; }
  .scale-ramp-hint { font-size: 0.78rem !important; }
  .scale-ramp-track {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
    gap: 14px !important;
  }
  .scale-ramp-item { flex: 0 0 auto !important; }
  .scale-no-pill { font-size: 0.78rem !important; }
  .scale-dim-label { font-size: 0.74rem !important; }
  .scale-qty-label { font-size: 0.72rem !important; }

  /* ---------- EDM 卡片列 ---------- */
  .edm-card-rows-wrapper { padding: 0 14px 18px !important; }
  .edm-spec-card-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .edm-spec-card-left { gap: 8px !important; }
  .edm-size-pill { font-size: 0.92rem !important; }
  .edm-spec-card-dim { font-size: 0.84rem !important; }

  /* ---------- 圖左表右 → 上下堆疊（斷點與 src/spec-render.js 一致） ---------- */
  .spec-with-photo { grid-template-columns: 1fr !important; }
  .spec-photo-pane { padding: 20px !important; border-right: none !important; border-bottom: 1px solid #E2E8F0 !important; }
  .spec-stage { height: 210px !important; }

  /* ---------- 搜尋視窗 ---------- */
  .om-search-overlay { padding: 70px 12px 20px !important; }
  .om-search-head { padding: 14px 16px !important; }
  .om-search-input { font-size: 0.95rem !important; }
  .om-search-tags { padding: 12px 16px !important; }
  .om-result { padding: 12px 16px !important; gap: 10px !important; }
  .om-result-cat { display: none !important; }
  .om-search-list { max-height: 60vh !important; }

  /* ---------- 首頁 ---------- */
  .hero-main-title,
  .hero-section h1 { font-size: 2rem !important; line-height: 1.25 !important; }
  .hero-sub-tagline { font-size: 0.95rem !important; line-height: 1.7 !important; }
  /* 首頁封面品牌牌改為只放 logo 圖 */
  .brand-hero-badge { padding: 12px 20px !important; }
  .brand-logo-img { height: 48px !important; }

  /* 首頁封面：高度改為隨內容，避免特色卡改單欄後被切掉 */
  .fashion-hero-wrapper { height: auto !important; min-height: 100svh !important; }
  .hero-stage-content {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin-inline: auto !important;
    /* 頁首高 88px，固定寫 88px 會讓首屏的 logo 牌貧齊頁首底部、看起來像重疊，
       改用變數再加 24px 間距 */
    padding: calc(var(--utility-h) + var(--header-h) + 24px) 18px 40px !important;
  }
  .hero-big-title { font-size: 1.9rem !important; }
  .hero-video {
    top: -6% !important;
    left: -6% !important;
    width: 112% !important;
    height: 112% !important;
    object-fit: cover !important;
  }
  .hero-btn-group a { width: 100% !important; justify-content: center !important; min-height: 44px !important; }

  /* 封面 3 項特色卡：由並排改為由上往下堆疊（圖示置左的橫式卡片） */
  .hero-stats-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .hero-stat-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
    align-items: center !important;
    text-align: left !important;
    padding: 14px 16px !important;
  }
  .hero-stat-card .stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
  }
  .hero-stat-card .stat-num { grid-column: 2 !important; font-size: 1.35rem !important; margin: 0 !important; }
  .hero-stat-card .stat-label { grid-column: 2 !important; font-size: 0.85rem !important; margin: 0 !important; }
  .hero-stat-card .stat-sub { grid-column: 2 !important; font-size: 0.72rem !important; line-height: 1.45 !important; }

  /* 核心產品序號：縮小並內縮，避免被卡片邊界切掉 */
  .ps-numeral,
  .ps-row:nth-child(even) .ps-numeral {
    right: 16px !important;
    left: auto !important;
    top: 4px !important;
    font-size: 104px !important;
  }

  /* 3D 折疊卡片在手機改為單欄平面卡片（3D 傾斜在窄螢幕會破圖） */
  .concertina-row { flex-direction: column !important; gap: 14px !important; perspective: none !important; }
  .concertina-card { flex-direction: row !important; transform: none !important; height: auto !important; }
  .concertina-card:hover { transform: none !important; }
  .concertina-left,
  .concertina-right { transform: none !important; flex: 1 1 50% !important; }
  .concertina-left { padding: 18px 16px !important; }
  .concertina-title { font-size: 1.05rem !important; }
  .concertina-right img { max-height: 120px !important; }

  .scenarios-section { padding: 60px 16px !important; }
  .scenarios-grid { grid-template-columns: 1fr !important; }
  .scenario-card { min-height: 220px !important; }
  .scenario-title { font-size: 1.15rem !important; }

  /* ---------- 產品中心卡片 ---------- */
  .visual-product-card { grid-template-columns: 1fr !important; }
  .card-image-box { min-height: 200px !important; }
  .card-info-content { padding: 20px 18px !important; }
  /* 產品名原本 1.2rem，比下面的重點文字（1.28rem）還小，層級反了。
     標題放大、重點收一階，恢復「名稱 > 重點 > 敘述」的順序。 */
  .card-main-title { font-size: 1.65rem !important; line-height: 1.35 !important; }
  .card-highlight-text { font-size: 1.02rem !important; line-height: 1.55 !important; }
  .card-desc-text { font-size: 0.9rem !important; }
  .card-actions-row { flex-direction: column !important; gap: 10px !important; }
  .card-actions-row a { width: 100% !important; justify-content: center !important; min-height: 44px !important; }

  /* ---------- 桌機左右並排的內容區塊，手機一律改上下 ---------- */
  /* 永續頁：產品卡（圖左文右）、三點清單、承諾雙卡、標章清單 */
  .product-card { grid-template-columns: 1fr !important; }
  .product-image { min-height: 210px !important; }
  .points,
  .commitment-grid { flex-direction: column !important; }
  .green-standard-list { grid-template-columns: 1fr !important; }
  .commitment-card { border-left: 0 !important; }

  /* 區塊已經有 14px 側邊距，內層 .container 寫在 style 屬性上的 40px 在手機會疊加，
     加上卡片內距後文字離畫面邊緣已經 74px，內容欄只剩一半寬。 */
  .section > .container { padding-left: 0 !important; padding-right: 0 !important; }

  /* ---------- 通用：寫在 style 屬性上的左右排版，手機一律改上下 ---------- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* ---------- 環保標章區塊：圖上文下，內距縮小 ---------- */
  .home-green-mark-section { padding: 48px 0 !important; }
  .home-green-mark-section > div { padding: 0 14px !important; }
  .home-green-mark-section .section-head { margin-bottom: 28px !important; }
  .home-green-mark-section [style*="padding: 36px"] { padding: 20px !important; }
  .home-green-mark-section [style*="padding: 40px 48px"] { padding: 24px 18px !important; }
  .home-green-mark-section h3 { font-size: 1.25rem !important; line-height: 1.4 !important; }
  .home-green-mark-section img { border-radius: 12px !important; }

  /* ---------- 底部聯繫 CTA：改為上下排列、按鈕滿寬 ---------- */
  .cta-banner-section { padding: 48px 14px !important; }
  .cta-banner-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding: 28px 22px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 30px rgba(0, 82, 155, 0.22) !important;
  }
  .cta-banner-title { font-size: 1.4rem !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  .cta-banner-desc { font-size: 0.9rem !important; line-height: 1.7 !important; max-width: none !important; }
  .btn-cta-giant {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    padding: 14px 20px !important;
  }

  /* ---------- 通用：多欄網格一律收成單欄 ---------- */
  .footer-inner,
  .footer-grid { flex-direction: column !important; gap: 16px !important; text-align: center !important; }

  /* ---------- 段落與標題行距 ---------- */
  h1, h2, h3 { text-wrap: pretty; }
  section { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ============================================================
   小手機：480px 以下
   ============================================================ */
@media (max-width: 480px) {
  .logo-image { height: 40px !important; }

  /* 聯繫頁：圖示原本在左、文字在右，小手機只剩約 200px 給文字，
     電話與 email 會被斷成三四行。改為圖示在上、文字整寬。 */
  .info-item {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .info-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }
  .info-card { padding: 24px 20px !important; }

  /* 三組資訊之間加分隔線與呼吸，不再黏成一圖 */
  .info-item {
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--border-color, #E2E8F0) !important;
  }
  .info-item:last-of-type {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .brand-logo-img { height: 42px !important; }
  .hero-title { font-size: 1.35rem !important; }
  .hero-main-title,
  .hero-section h1 { font-size: 1.7rem !important; }
  .hero-big-title { font-size: 1.65rem !important; }
  .ps-numeral,
  .ps-row:nth-child(even) .ps-numeral { font-size: 88px !important; right: 14px !important; }
  .concertina-card { flex-direction: column !important; }
  .concertina-right { min-height: 130px !important; }
}

/* ============================================================
   極窄頁首（360px 以下）
   ------------------------------------------------------------
   360px 以上的主流手機（375、390、430）空間足够放完整的中英文 logo；
   只有 320–360px 的小螢幕會跟搜尋、漢堡按鈕互擠，
   這時才把 logo（1135×220 整組圖）裁到左側 242px 的圓形標記。
   ============================================================ */
@media (max-width: 360px) {
  /* 320–360px：卡片標題欄只有約 140–210px 寬，9–10 字的標題會被迫斷出孤字
     （例「高雄前鎮廠遷廠合／併」）。字級收一階讓這類標題排回一行。 */
  .timeline-copy h3,
  .capability h3,
  .commitment-card h3 { font-size: 0.95rem !important; line-height: 1.45 !important; }

  .logo-image {
    width: 44px !important;
    height: 40px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: left center !important;
    flex: 0 0 auto !important;
  }
  .header-logo { gap: 0 !important; }
}

/* ============================================================
   CJK 排版優化
   ------------------------------------------------------------
   中文沒有空格，瀏覽器預設「任兩個漢字之間都可以斷行」，
   所以會出現「容／量大升級」這種把詞拆開、或最後一行只剩一個字的排版。
   繁中唯一穩定的做法：把斷點限制在標點（，、。；）。

   三個原則：
   1) 短文字（標題、重點句、標籤）→ keep-all，只在標點斷。
   2) overflow-wrap 用 break-word，不用 anywhere ——
      anywhere 會把「任何位置」都當成合法斷點，
      text-wrap 為了湊行長就會斷在詞中間（怪斷行的主因）。
   3) text-wrap 用 pretty，不用 balance ——
      balance 只求各行等長，會為此犧牲詞的完整性；
      pretty 專門避免「最後一行只剩一個字」的孤字。

   長段落維持正常斷行（段落很長，keep-all 的右側鋸齒風險大於效益），
   只靠 pretty 收尾。
   ============================================================ */

/* ---------- 標題 ---------- */
h1, h2, h3, h4, h5, h6,
.products-hero-title, .hero-title, .section-title, .card-main-title,
.node-name, .timeline-copy h3, .stat-label, .stat-sub {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ---------- 短句／重點文字：跟標題同一組規則 ----------
   這些都是 30 字以內、一定要排得好看的句子。
   （.ps-highlight 與 .hero-sub-tagline 原本在各頁的 style 標籤裡寫了
     text-wrap: balance，這裡用同樣的選擇器權重蓋不掉 —— 那兩條要一併移除，
     見檔案最下方的說明。） */
.ps-highlight, .ps-lede, .ps-alias, .ps-title, .ps-eyebrow,
.card-highlight-text, .hero-desc, .hero-sub-tagline,
.cta-banner-desc, .cta-banner-title,
.section-head p, .concertina-title, .concertina-sub,
.scenario-title, .scenario-desc, .intro-h3,
.gm-features strong, .gm-features span,
.mio-check-item, .commitment-card h3, .capability h3 {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ---------- 長段落：正常斷行 + 避免孤字 ---------- */
p, .card-desc-text, .ps-desc, .node-role, .node-detail,
.timeline-copy p, .section-lead, .intro-p {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* auto-phrase 的語意斷句資料只涵蓋日文，中文開了等於沒作用，
   而且會蓋掉上面 keep-all 的效果，因此只留給日文版。 */
@supports (word-break: auto-phrase) {
  html[lang="ja"] p,
  html[lang="ja"] .card-desc-text,
  html[lang="ja"] .ps-desc,
  html[lang="ja"] .node-role,
  html[lang="ja"] .node-detail,
  html[lang="ja"] .timeline-copy p,
  html[lang="ja"] .section-lead {
    word-break: auto-phrase;
  }
}

/* 短標籤、膠囊、序號才需要不換行（都是 2～8 字的內容） */
/* .nav-link-item 已從這裡移除 —— 導覽列項目在日文版是「INTEPLASTについて」
   「持続可能な開発」這種長標籤，nowrap 會讓整排選單不縮、溢出到右側疊在
   搜尋條與語言鈕上面。navbar.css 已改成可折兩行（white-space: normal），
   但這個檔案載入更晚，列在這裡就會把那個修正蓋回去。 */
.hero-pill-tag, .card-num-badge, .prod-badge, .stat-num,
.region-badge, .utility-left span, .utility-right a, .node-label,
.ps-chip, .edm-size-pill, .scale-no-pill {
  white-space: nowrap;
  word-break: keep-all;
}

/* 橫向滑動列裡的篩選鈕維持單行（容器本身可滑動） */
.filter-tab-btn, .filter-btn { white-space: nowrap; word-break: keep-all; }

/* ---------- 內容端的手動控制 ----------
   keep-all 之後，若某句兩個標點之間超過一行寬（例如 12 字以上無標點），
   會被 break-word 強斷。這種個案只能在文案裡處理：
     想斷的位置 → 插 <wbr> 或 &#8203;（零寬空白）
     不想斷的詞 → <span class="nb">容量大升級</span> */
.nb { white-space: nowrap; }

/* .ps-highlight 最長那句在 1440px 桌機仍會排成兩行；
   上限放寬後就能一行放完（比調字級安全）。 */
@media (min-width: 1200px) {
  .ps-highlight { max-width: min(880px, 100%); }
}

/* 按鈕文字在窄螢幕允許換行，避免長字串（例：留下資料 · 由我們聯繫您）被切掉 */
@media (max-width: 768px) {
  button:not(.filter-tab-btn):not(.filter-btn),
  .btn, .btn-action-primary, .btn-action-secondary,
  .btn-hero-primary, .btn-hero-secondary, .btn-quote-add, .btn-quote-dark, .btn-cta-giant {
    white-space: normal !important;
    word-break: normal !important;
    text-align: center;
  }
}

/* ---------- 手機：長段落回到自然換行 ----------
   上面把 .hero-sub-tagline 歸在「短句」那組（keep-all，只在標點斷）。
   桌機一行放得下 40 字以上時，斷在「，」等於語意斷句，好讀；
   但手機一行只有 10-14 字，斷點被限制在標點就變成長短差很多的參差線：

       由台塑企業、                    ← 只有 6 字
       INTEPLAST USA 與長庚生技共同投資成立，
       臺灣營德以台塑品牌塑膠袋為核心，

   行本身已經很短，換行就是視覺斷點，不需要再疊一層語意斷點。
   手機讓它自然斷行、每行長度一致，pretty 負責不留孤字。
   標題與短標籤不套這條 —— 它們字少，keep-all 仍然有幫助。 */
@media (max-width: 768px) {
  .hero-sub-tagline {
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
}

/* ---------- 手機：長段落左右對齊（Justify，只在中文版） ----------
   手機一行只有 10-14 字，一句話斷在標點或英文詞邊界時，
   右側會出現「某一行凸出去、某一行縮回來」的參差。
   對齊兩端後每行都到同一條線，整塊看起來是一個乾淨的方形。

   只套中文（html:lang(zh)）：中文每個字等寬、字距補在字與字之間，
   看不出被拉開；英文是靠拉大「詞距」湊齊行長，窄螢幕一行只有 4-5 個詞，
   就會出現 Vertically　　integrated　　production 這種大洞。
   英文版維持靠左、右側自然參差 —— 那才是英文的正常排版。

   搭配的三件事：
     · word-break: normal —— 漢字之間可斷，字距才不會被拉開補空
     · overflow-wrap: break-word —— 超長英文/型號不會撐破容器
     · text-wrap: auto —— pretty/balance 會為了行長重挑斷點，
       跟 justify 目標衝突，這裡交還給瀏覽器
   最後一行仍然靠左（justify 的正常行為），不會被拉開。
   標題、短標籤、數字、按鈕都不套 —— 它們是 1-2 行的短字串。 */
@media (max-width: 768px) {
  html:lang(zh) :is(
    p,
    .hero-sub-tagline, .hero-desc, .hero-summary,
    .ps-lede, .ps-desc, .card-desc-text,
    .intro-p, .intro-copy, .section-lead,
    .scenario-desc, .cta-banner-desc,
    .timeline-copy p, .node-detail,
    .commitment-card p, .product-content p
  ) {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: auto;
    hyphens: none;
  }

  /* 置中的段落保持置中（區段標題下的說明本來就居中），不要被拉成兩端對齊 */
  html:lang(zh) :is(
    .section-head p,
    [style*="text-align: center"] p,
    [style*="text-align:center"] p,
    .text-center p,
    p[style*="text-align: center"],
    p[style*="text-align:center"]
  ) {
    text-align: center;
  }
}

/* ---------- 手機：區段標題與導言收小，把重量還給產品 ----------
   手機上的實際字級原本是：
     區段標題 .ps-head h2   38.4px  （index.html 的 clamp 下限 2.4rem）
     區段導言 .ps-lede      18.6px  （1.16rem）
     產品名   .ps-title     32.8px
     產品重點 .ps-highlight 15.2px
   標題比產品名還大、導言也比產品重點句大 —— 主角被區段標籤壓過去。
   桌機不動（那裡有 3.8vw 的空間，大標不會蓋過產品名）。

   收斂後的階層：產品名 32.8 → 區段標題 ~24 → 產品重點 15.2 → 導言 15 → 敘述 12.8
   級數沿用 type.css 的 --fs-h2，不另開一組數字。 */
@media (max-width: 768px) {
  .ps-head h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
  }

  .ps-head .ps-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    margin-bottom: 10px;
  }

  .ps-head .ps-lede {
    margin-top: 10px;
    font-size: 0.9375rem;
    line-height: 1.75;
  }
}

/* ---------- 桌機：Hero 膠囊裡的 logo 收小 ----------
   index.html 寫 74px —— 比頁首那顆還大，而同一顆 logo 在頁首已經出現過一次，
   這裡是重複露出，不需要更重的視覺量；它也把下面的主標往下推。
   收到 54px，膠囊內距一起縮，白底膠囊才不會顯得空。
   手機維持原本的 48/42px（見本檔上方兩條 !important）。 */
@media (min-width: 769px) {
  .brand-logo-img {
    height: 54px;
  }

  .brand-hero-badge {
    padding: 12px 26px;
    gap: 14px;
    margin-bottom: 20px;
  }
}