/* =========================================================================
   m.ajco.com.tw /Product/Diamonds —— 裸鑽價格表頁專屬樣式

   全部規則掛在 .djlm 底下，不影響其他手機頁面。

   ⚠️ 這個站的 html 根字級是 10px（bootstrap.min.css 設的，2014 年留下來的
   「1rem = 10px」慣例），所以本檔一律用 px，不用 rem —— 寫 rem 會只有
   預期大小的 62.5%（Trap 2）。
   ⚠️ 頁尾有一個凸出來的白色 AJ 徽章（style.css 的 footer:before，42×42、
   top:-21px）。最後一段若是深色，徽章上半截會變成一塊白方塊卡在上面。
   所以深色 CTA 之後一定要留淺色緩衝（Trap 8）。
   ========================================================================= */

.djlm {
    --djlm-gold: #ad995a;
    --djlm-gold-d: #8f7d47;
    --djlm-ink: #303030;
    --djlm-soft: #5c5955;
    --djlm-line: #dedcd9;
}

.djlm .djlm-h2 {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--djlm-ink);
    margin: 30px 15px 10px;
    /* 手機版的區段標題置中 —— 窄螢幕上置中比靠左更像一個段落的開始 */
    text-align: center;
}
.djlm .djlm-lede {
    font-size: 14px;
    line-height: 1.9;
    color: var(--djlm-soft);
    margin: 0 15px 10px;
}

/* 計算器在本頁的覆寫：與桌機同一套決定（乾淨、只留價格本身） */
.djlm .dpc { margin: 0 15px; }
.djlm .dpc .cs-tag:empty { display: none; }
.djlm .dpc .cs-foot { display: none !important; }
.djlm .dpc .cs-ask { border-top: 0; padding-top: 0; }
.djlm .dpc .cs-spec-label,
.djlm .dpc .cs-spec { display: none; }

/* 詢問區的說明文字置中（元件預設就是 center，這裡明寫一次，
   避免哪天元件改版把它改成靠左時本頁跟著變）。 */
.djlm .dpc .cs-ask,
.djlm .dpc .cs-ask-text { text-align: center; }

/* 天然／培育兩個方塊上方的留白減半（67px → 約 34px）。
   多出來的那一段是「培育鑽提示行」——它在本頁通常是空的，
   但元件給它 min-height 以免有字時版面跳動。這裡只在「真的空」的時候收掉，
   有字時仍然照原本的間距，所以不會犧牲掉那個防跳動的設計。 */
.djlm .dpc .cs-note-line:empty { min-height: 0; margin-top: 0; }

/* =========================================================================
   表格捲動時，表頭跟著「請左右滑動表格」那一列一起固定在畫面上方。

   34px = .tb-info 的實際高度（實測）。那一列本來就是
   position:sticky; top:0; z-index:490（定義在本頁自己的 @section styles），
   所以表頭要疊在它下面 → top:34px、z-index 低一階。
   ⚠️ .tb-info 若改了字級或 padding，這個 34px 要跟著改。

   🔴 兩處都必須 !important：DataTables 把 position / top 寫成**行內樣式**
      （style="overflow:hidden; position:relative; ..."），一般規則蓋不過去。
      這是第一次嘗試失敗的原因 —— 不是祖先的 overflow 問題。

   🔴 FixedColumns 的固定價格欄（rightColumns:1）是絕對定位，而且它的容器
      DTFC_RightWrapper 高度只有 1px，sticky 在 1px 的範圍裡等於不會動。
      所以要先把它撐成 100% 高，它的表頭才有可以黏的距離。
      不處理的話：主表頭固定住、右邊那欄的表頭卻捲走，兩者對不上。
   ========================================================================= */

.djlm .dataTables_scrollHead {
    position: sticky !important;
    top: 34px;
    z-index: 489;
    background: #fff;
}
.djlm .DTFC_RightWrapper { height: 100% !important; }
.djlm .DTFC_RightHeadWrapper {
    position: sticky !important;
    top: 34px !important;
    z-index: 489;
    background: #fff;
}

/* ---------- 選好裸鑽，接下來要做成什麼（三張卡，手機直式堆疊） ---------- */

.djlm .djlm-refs { margin: 34px 15px 0; }
.djlm .djlm-refs .djlm-refs-head { text-align: center; margin-bottom: 22px; }
.djlm .djlm-eyebrow {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .08em;
    color: var(--djlm-soft);
}
.djlm hr.djlm-thin { border: 0; border-top: 1px solid #c3b183; width: 40px; margin: 10px auto 14px; }
.djlm .djlm-refs .djlm-refs-head p { font-size: 13.5px; line-height: 1.9; color: var(--djlm-soft); margin: 0; }
.djlm .djlm-refs .djlm-refs-head .djlm-h2 { margin: 0 0 10px; }

.djlm .djlm-rc { margin-bottom: 26px; }
.djlm .djlm-rc .djlm-ph { width: 100%; aspect-ratio: 285 / 215; background: #000; overflow: hidden; display: block; }
.djlm .djlm-rc .djlm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.djlm .djlm-rc .djlm-tag {
    font-size: 11.5px; line-height: 1.7; letter-spacing: .15em;
    color: var(--djlm-gold); margin: 12px 0 5px;
}
.djlm .djlm-rc h3 {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--djlm-ink); margin: 0 0 6px;
}
.djlm .djlm-rc p { font-size: 13.5px; line-height: 1.9; color: var(--djlm-soft); margin: 0 0 10px; }
.djlm .djlm-rc .djlm-link { font-size: 13px; line-height: 1.6; color: var(--djlm-ink); text-decoration: none; }

/* ---------- 結尾 CTA ---------- */

.djlm .djlm-cta {
    background: #202127;
    color: #e7e5e2;
    padding: 38px 20px;
    text-align: center;
    margin-top: 34px;
    /* 🔴 Trap 8：頁尾的白色 AJ 徽章有一半凸到 footer 上方，
       深色區塊直接貼著頁尾的話，徽章上半截會變成一塊白方塊。
       .djlm 的子層 margin 會被 reset 歸零，所以要寫成兩層選擇器才蓋得過。 */
    margin-bottom: 40px;
}
.djlm .djlm-cta .djlm-eyebrow { color: #c3b183; }
.djlm .djlm-cta h2 {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    color: #fff; font-size: 21px; line-height: 1.5; font-weight: 500; letter-spacing: .06em; margin: 0 0 10px;
}
.djlm .djlm-cta p { color: #c7c4c1; font-size: 13.5px; line-height: 1.95; margin: 0 0 18px; }
.djlm .djlm-cta .djlm-btn {
    display: block; border: 1px solid var(--djlm-gold); color: var(--djlm-gold);
    font-size: 14px; line-height: 1.5; padding: 12px; margin: 0 0 9px; text-decoration: none;
}
.djlm .djlm-cta .djlm-btn.is-filled { background: var(--djlm-gold); color: #fff; }
.djlm .djlm-cta .djlm-cs { margin-top: 20px; display: flex; flex-direction: column; }
.djlm .djlm-cta .djlm-cs a,
.djlm .djlm-cta .djlm-cs span {
    color: #e7e5e2; font-size: 13px; line-height: 1.9; padding: 4px 0; text-decoration: none;
}
.djlm .djlm-cta .djlm-cs .djlm-addr { color: #c7c4c1; font-size: 12.5px; line-height: 1.8; margin-top: 6px; }
.djlm .djlm-cta .djlm-cs .djlm-addr a { color: #c7c4c1; font-size: 12.5px; }

/* 篩選「鑽石類別」下面通往培育鑽石指南的文字連結 */
.djlm .djlm-lab-link {
    display: inline-block; margin: 14px 0 0 10px;
    font-size: 14px; line-height: 1.6;
    color: var(--djlm-gold-d); border-bottom: 1px solid #c3b183; padding-bottom: 1px; text-decoration: none;
}