/* =========================================================================
   /Product/Diamonds —— 裸鑽價格表頁專屬樣式

   全部規則都掛在 .djl 底下。這一點不是潔癖：
   site.css 的 .section 寬度是寫死的 783px，而 Product/Index、Series、
   Designer 三頁也共用它，直接改那條會連動到那些頁面（Trap 10）。
   所以這裡用 .djl 覆寫，只影響本頁。

   本檔不使用任何寬度斷點（Trap 6：版面被 min-width:1000px 釘死，
   斷點只會在使用者 Ctrl+ 放大時誤觸發），也沒有 position:fixed 元素。
   每一個會顯示文字的選擇器都明寫 font-size（Trap 1：body 是 12px）。
   ========================================================================= */

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

/* ---------- 版面：拿掉左側 175px 側欄之後，內容區改為滿版 ---------- */

.djl .section {
    float: none;
    width: auto;
}



/* =========================================================================
   計算器在本頁的覆寫 —— 只改這一頁，共用元件 _DiamondPriceCalc 完全不動，
   另外兩頁 /lab-grown-diamond、/fancy-diamond 維持原樣。
   ========================================================================= */

/* 上方小標籤本頁不顯示（dpcTag 傳空字串），空 span 仍會佔外距，直接收掉 */
.djl .dpc .cs-tag:empty { display: none; }

/* 本頁只留價格本身：拿掉「裸石刷卡參考價…」與「以 1 USD = ... 換算」整塊。
   這兩行同在 .cs-foot 裡，元件預設 display:none、由腳本顯示，所以要 !important。 */
.djl .dpc .cs-foot { display: none !important; }

/* 「您選擇的規格」與它下面那行規格摘要：本頁不顯示。
   標題已經把事情說清楚，裸石頁面要的是乾淨。
   （pillar 頁仍然保留 —— 那邊客人是邊選邊看，那行有用。） */
.djl .dpc .cs-spec-label,
.djl .dpc .cs-spec { display: none; }

/* 上面那塊收掉後，這條分隔線就沒有東西可分隔了 */
.djl .dpc .cs-ask { border-top: 0; padding-top: 0; }

/* =========================================================================
   全頁標題統一：計算器主標、「實際在庫的鑽石」、「選好裸鑽…」三處同字型同大小。
   數值取自 /fancy-diamond 的 .center h2（28px、字距 .08em、Cormorant Garamond）。
   ========================================================================= */

.djl h2.djl-h2,
.djl .dpc .cs-head strong {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .08em;
    color: #303030;
    margin: 0 0 14px;
}
.djl h2.djl-h2 { margin: 52px 0 14px; }

/* =========================================================================
   「選好裸鑽，接下來要做成什麼？」—— 版型與 /fancy-diamond 的 More References 一致
   ========================================================================= */

.djl .djl-refs { margin-top: 56px; }
.djl .djl-refs .djl-refs-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.djl .djl-refs .djl-refs-head h2.djl-h2 { margin: 0 0 18px; }
.djl .djl-refs .djl-refs-head p { color: var(--djl-soft); font-size: 15.5px; line-height: 1.95; margin: 0; }

/* eyebrow：與 pillar 的 .cta .eyebrow 同一組值（Cormorant、16.8px、字距 .08em）。
   斜體只給拉丁字母 —— 中文沒有真正的斜體，瀏覽器會機械傾斜，很難看。 */
.djl .djl-eyebrow-lt,
.djl .djl-cta .djl-eyebrow {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    font-style: normal;
    font-size: 16.8px;
    line-height: 1.6;
    letter-spacing: .08em;
    margin: 0 0 16px;
}
.djl .djl-eyebrow-lt.lat, .djl .djl-cta .djl-eyebrow.lat { font-style: italic; }
.djl .djl-eyebrow-lt { color: var(--djl-soft); }
.djl .djl-cta .djl-eyebrow { color: #c3b183; }

.djl hr.djl-thin-lt { border: 0; border-top: 1px solid #c3b183; width: 44px; margin: 0 auto 26px; }

.djl .djl-refs-grid { display: grid; grid-template-columns: repeat(3, 285px); gap: 24px; justify-content: center; }
.djl .djl-ref-card .djl-big-img {
    width: 285px; height: 215px; margin-bottom: 22px;
    background: #000; overflow: hidden; transition: opacity .25s;
}
.djl .djl-ref-card .djl-big-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.djl .djl-ref-img { display: block; }
.djl .djl-ref-img:hover .djl-big-img { opacity: .85; }
.djl .djl-ref-card .djl-ref-tag {
    font-size: 12.5px; font-weight: 500; line-height: 1.6;
    letter-spacing: .15em; color: var(--djl-gold); margin-bottom: 10px;
}
.djl .djl-ref-card h3 {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    font-size: 17.6px; line-height: 1.6; font-weight: 500; color: #303030; margin: 0 0 10px;
}
.djl .djl-ref-card p { font-size: 15.2px; line-height: 1.9; color: var(--djl-soft); margin: 0 0 18px; }
.djl .djl-ref-card .djl-ref-link {
    font-size: 13.6px; line-height: 1.6; letter-spacing: .05em; color: #303030;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: .25s;
}
.djl .djl-ref-card .djl-ref-link .djl-arrow { transition: .25s; display: inline-block; }
.djl .djl-ref-card .djl-ref-link:hover { color: var(--djl-gold-d); }
.djl .djl-ref-card .djl-ref-link:hover .djl-arrow { transform: translateX(4px); }

/* =========================================================================
   結尾 CTA —— 視覺與 old-jewelry-remake／fancy-diamond 的結尾區塊一致。

   兩個關鍵值不能亂改：
   1) 背景 #202127 = body 的 rgb(32,33,39)。pillar 頁用的是 rgb(32,33,38)，
      而 <footer> 本身沒有底色、露出的就是 body 的深色。三者對齊，
      這一塊才會和頁尾連成同一片，不會出現「兩種黑」。
   2) 下方外距必須是 0。留任何空隙都會在 CTA 與頁尾之間露出一條縫。
   ========================================================================= */

.djl .djl-cta {
    background: #202127;
    margin: 48px 0 0;
    padding: 56px 0 50px;
    text-align: center;
}
.djl .djl-cta .djl-cta-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}
.djl .djl-cta hr.djl-thin {
    border: 0;
    border-top: 1px solid var(--djl-gold);
    width: 46px;
    margin: 12px auto 18px;
}
.djl .djl-cta h2 {
    font-family: "Cormorant Garamond", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", serif;
    color: #fff;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .08em;
    margin: 0 0 14px;
}
.djl .djl-cta p {
    color: #c7c4c1;
    font-size: 15px;
    line-height: 1.95;
    margin: 0 auto 26px;
}
.djl .djl-cta .djl-btn-gold {
    display: inline-block;
    border: 1px solid var(--djl-gold);
    color: var(--djl-gold);
    font-size: 14.5px;
    line-height: 1.5;
    letter-spacing: .04em;
    padding: 12px 30px;
    margin: 0 6px 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s, color .25s;
}
.djl .djl-cta .djl-btn-gold.is-filled { background: var(--djl-gold); color: #fff; }
.djl .djl-cta .djl-btn-gold:hover { background: var(--djl-gold-d); border-color: var(--djl-gold-d); color: #fff; }

.djl .djl-cta .djl-cta-contacts {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px;
}
.djl .djl-cta .djl-cta-contacts a,
.djl .djl-cta .djl-cta-contacts .txt {
    color: #e7e5e2;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .03em;
    padding: 6px 20px;
    text-decoration: none;
    transition: color .25s;
}
.djl .djl-cta .djl-cta-contacts a:hover { color: var(--djl-gold); }
.djl .djl-cta .djl-cta-contacts .sep {
    width: 1px;
    height: 14px;
    background: #5a5854;
    display: inline-block;
}
.djl .djl-cta .djl-cta-tel {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.9;
}
.djl .djl-cta .djl-cta-tel a { color: #e7e5e2; text-decoration: none; }
.djl .djl-cta .djl-cta-tel a:hover { color: var(--djl-gold); }
.djl .djl-cta .djl-cta-addr {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.9;
}
.djl .djl-cta .djl-cta-addr a { color: #c7c4c1; text-decoration: none; }
.djl .djl-cta .djl-cta-addr a:hover { color: var(--djl-gold); }

/* 篩選「類別」旁邊通往培育鑽石指南的文字連結；與三個選項之間留一段距離 */
.djl .djl-lab-link {
    display: inline-block; margin: 0 0 0 30px; vertical-align: middle; position: relative; top: 7px;
    font-size: 13px; line-height: 1.6; letter-spacing: .03em;
    color: var(--djl-gold-d); border-bottom: 1px solid #c3b183; padding-bottom: 1px; text-decoration: none;
}
.djl .djl-lab-link:hover { color: var(--djl-gold); }