/* ============================================================
   產品頁桌機版（fishoil / pdrn / ca）

   這三頁的版面是 100vw/9.41 等比縮放的 941px 設計稿畫布，
   所有尺寸都是 rem。桌機版的做法是鎖住根字級上限讓畫布停在
   1073px，再把頁首／抽屜改成與 index.html 一致的格式。

   ⚠ 大量 !important 不是偷懶：編輯器匯出時會把 CSS 複製成元素
   內聯 style（.x-nav 帶 margin:0;padding:0，#xDrawer 帶 right:0
   與 margin:0），內聯優先級高於樣式表，不加就會被蓋掉。
   ============================================================ */

/* ---- 畫布上限：114px × 9.41 = 1073px ---- */
html { font-size: min(calc(100vw / 9.41), 114px); background: #e9e2d5; }
body { max-width: 1072.7px; margin-left: auto !important; margin-right: auto !important; }

/* ---- 手機／平板：頁首與抽屜貼齊內容欄 ----
   抽屜用 right + max() 而不是 left + margin-left：視窗比版心窄時
   （手機）算出來是 0，貼齊視窗右緣；比版心寬時才內縮到欄位邊緣。
   先前用固定的 margin-left: 536.35px，在 390px 手機上會把抽屜推到
   441~731 的位置，整個在畫面外，看起來就像漢堡按鈕點了沒反應。 */
.x-header { max-width: 1072.7px; left: 50% !important; right: auto !important;
  transform: translateX(-50%); }
.x-drawer { left: auto !important; right: max(0px, calc(50% - 536.35px)) !important;
  margin-left: 0 !important; transform: none !important; }

/* ============================================================
   桌機（≥1024px）：頁首／頁尾／抽屜比照 index.html
   index 的基準值 → 頁首高 38px、Logo 21px、漢堡 26×2px、
   抽屜寬 380px 貼視窗右緣、抽屜連結 16px
   ============================================================ */
@media (min-width: 1024px) {

  /* 頁首改滿版橫欄 */
  .x-header {
    width: 100% !important; max-width: none !important;
    left: 0 !important; right: auto !important; transform: none !important;
    height: 38px !important; padding: 0 !important;
    background: rgba(255, 255, 255, .95) !important;
    border-bottom: 1px solid #eee5d5 !important;
  }
  /* 內容收在與頁面同寬的版心（內聯 margin:0;padding:0 需要 !important） */
  .x-nav {
    max-width: 1072.7px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
  }
  .x-logo img { height: 21px !important; }
  .x-hamb { gap: 5px !important; padding: 5px 0 !important; }
  .x-hamb i { width: 26px !important; height: 2px !important; }

  /* 頁首變矮，內容的上方留白要跟著改 */
  body { padding-top: 38px !important; }

  /* 抽屜：比照 index，貼視窗右緣、固定 380px */
  .x-drawer {
    top: 38px !important;
    left: auto !important; right: 0 !important;
    margin-left: 0 !important; transform: none !important;
    width: 380px !important; max-width: 380px !important;
    padding: 32px 36px !important;
  }
  .x-drawer a { font-size: 16px !important; padding: 16px 0 !important; }

  /* ----------------------------------------------------------
     100% 撐開：區塊背景滿版，內容仍維持 1073px 版心置中

     做法是給每個區塊加上透明的左右邊框當留白。關鍵在於絕對定位
     元素的「包含區塊」是 padding box（＝邊框以內），所以透明邊框
     會同時推動流排內容和絕對定位元素；而背景預設畫到邊框底下，
     於是背景滿版、構圖置中。這一條規則取代了逐一改寫 21 處
     left/right 錨點的做法。

     background-origin 必須一併改成 border-box，否則背景圖仍以
     padding box 計算 cover，只有背景色會延伸出去。
     ---------------------------------------------------------- */
  :root { --gut: max(0px, calc((100vw - 1072.7px) / 2)); }

  body { max-width: none !important; }

  .page > * {
    border-left: var(--gut) solid transparent !important;
    border-right: var(--gut) solid transparent !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
  }

  /* 區塊變寬但高度固定，cover 會重新裁切背景圖。多數是海天紋理
     看不出來，但 p1 首圖把「Good Health / Brighter Tomorrow」
     燙在圖上（p1 的 DOM 沒有對應元素），置中裁切會切掉它。
     改成靠上對齊，把裁切量推到底部。 */
  #p1 .hero { background-position: center top !important; }

  /* ----------------------------------------------------------
     少數區塊本身沒有背景，視覺是靠內部一層鋪底元素畫出來的。
     那一層的包含區塊是區塊的 padding box（＝透明邊框以內），
     所以只會畫到 1073px，兩側露白。

     解法：先用負邊距把鋪底層拉回滿版，再給它同樣的透明邊框把
     內容推回版心——等於把上面那招往內再套一層。
     ---------------------------------------------------------- */
  #ca3 .ca3-top {
    margin-left: calc(-1 * var(--gut)) !important;
    margin-right: calc(-1 * var(--gut)) !important;
    border-left: var(--gut) solid transparent !important;
    border-right: var(--gut) solid transparent !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
  }

  /* 這一層原本就有 margin: 0 -.32rem 讓自己稍微溢出區塊，
     所以邊框要扣掉那 .32rem，內容位置才會和原本一致 */
  #md5 .research-head {
    margin-left: calc(-1 * var(--gut)) !important;
    margin-right: calc(-1 * var(--gut)) !important;
    border-left: max(0px, calc(var(--gut) - .32rem)) solid transparent !important;
    border-right: max(0px, calc(var(--gut) - .32rem)) solid transparent !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
  }

  /* 純背景層（absolute + inset:0），沒有需要置中的內容，直接外推。
     注意不要連同外層的 .hero 一起加邊框——它是 aspect-ratio: 3/4，
     加寬會等比長高（1073→1440 會從 1431px 變成 1920px）。

     外推量收 1px：--gut 是小數（1440 時為 183.65px），直接外推會因
     次像素捨入超出視窗 1px，產生多餘的橫向捲動。 */
  #ca1 .hero-bg,
  #ca2 .mol-bg {
    left: calc(-1 * var(--gut) + 1px) !important;
    right: calc(-1 * var(--gut) + 1px) !important;
  }

  /* overflow 是裁切到 padding box（＝透明邊框以內），帶 overflow:
     hidden 的區塊會把上面外推的背景層再次切回欄寬，所以要放行。
     這兩個區塊的內容本來就不會橫向溢出。 */
  #ca1, #ca2 { overflow: visible !important; }

  /* ----------------------------------------------------------
     頁尾：比照 index.html 的尺度

     三頁的頁尾結構（.xf-*）和 index 的 .foot / .fabout 一一對應，
     但尺寸全部寫成 rem，在 1073px 畫布下會放大到約兩倍——頁尾
     總高 1358px，index 只有 578px；內文 27px 對 13.5px。
     這裡改回固定 px，數值取自 index 桌機版。
     底色維持各頁原本的設定（魚油／鈣 #17376b、美妍 #5e2531），
     沒有跟著 index 的 #1f3a5c 統一。
     ---------------------------------------------------------- */
  footer { padding: 52px 40px 40px !important; }
  .xf-logo img { height: 24px !important; }
  .xf-tag { font-size: 13px !important; margin-top: 6px !important; }
  .xf-totop {
    width: 38px !important; height: 38px !important;
    font-size: 17px !important; flex: none !important;
  }
  .xf-about { margin-top: 32px !important; padding-top: 28px !important; }
  .xf-title { font-size: 17px !important; margin-bottom: 14px !important; }
  .xf-intro {
    font-size: 13.5px !important; line-height: 1.9 !important;
    max-width: 860px !important; margin-bottom: 10px !important;
  }
  /* index 的據點清單在桌機是兩欄，這裡原本是單欄 */
  .xf-list {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    column-gap: 56px !important; row-gap: 10px !important;
  }
  .xf-list li { font-size: 13.5px !important; padding-bottom: 6px !important; }
  .xf-go { font-size: 12px !important; padding: 3px 14px !important; }
  .xf-ct { font-size: 13px !important; line-height: 1.9 !important; margin-top: 12px !important; }
  .xf-ct b { font-size: 14.5px !important; margin-bottom: 4px !important; }
  .f-disclaimer { font-size: 12px !important; }
}