/* ============================================================
   dzm.css — 点资商城 · 全站骨架（头部 / 页脚 / 商品卡 / 通用按钮）
   前缀 dm_；配色取自 logo：墨黑 #1A1A1C + 香槟金 #C9A063
   版式：米色公告细条 + 墨黑单行导航（吸顶）→ 金线墨黑页脚
   ============================================================ */
:root {
    --dm-ink:      #1A1A1C;
    --dm-ink-2:    #2A2825;
    --dm-ink-3:    #3A3631;
    --dm-gold:     #C9A063;
    --dm-gold-d:   #A9803F;
    --dm-gold-l:   #DDBE8A;
    --dm-gold-s:   #EDE0C8;
    --dm-cream:    #F6F4F0;
    --dm-paper:    #FFFFFF;
    --dm-line:     #E6E0D6;
    --dm-text:     #23211E;
    --dm-muted:    #6E695F;
    --dm-faint:    #A39D92;
    --dm-price:    #B4432F;
    --dm-r:        10px;
    --dm-r-lg:     16px;
}

body { background: var(--dm-cream); color: var(--dm-text); }
.dm_wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- 公告细条 ---------- */
.dm_note { background: #EFE8DC; color: var(--dm-muted); font-size: 12.5px; border-bottom: 1px solid #E4DACA; }
.dm_note_in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; }
.dm_note_txt { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dm-gold); flex-shrink: 0; }
.dm_note_links { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.dm_note_links a { color: var(--dm-muted); }
.dm_note_links a:hover { color: var(--dm-ink); }
.dm_note_links i { margin-right: 4px; }
.dm_note_tel { color: var(--dm-ink); font-weight: 600; }
.dm_note_tel i { color: var(--dm-gold-d); margin-right: 5px; font-size: 11px; }

/* ---------- 墨黑导航 ---------- */
.dm_hd { position: sticky; top: 0; z-index: 900; background: var(--dm-ink); border-bottom: 1px solid rgba(201, 160, 99, .35); transition: box-shadow .25s ease; }
.dm_hd.is_stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.dm_hd_in { display: flex; align-items: center; gap: 28px; height: 70px; }
.dm_logo { flex-shrink: 0; display: flex; align-items: center; }
.dm_logo img { height: 34px; width: auto; }
.dm_burger { display: none; background: none; border: 0; color: #fff; font-size: 20px; padding: 4px 6px; }

.dm_nav { display: flex; align-items: stretch; gap: 4px; height: 100%; flex: 1; min-width: 0; }
.dm_nav a { position: relative; display: flex; align-items: center; padding: 0 14px; color: rgba(255, 255, 255, .78); font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.dm_nav a:hover { color: #fff; }
.dm_nav a.on { color: #fff; font-weight: 600; }
.dm_nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--dm-gold); }

.dm_search { display: flex; align-items: center; width: 250px; height: 38px; border-radius: 19px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s, background .2s; }
.dm_search:focus-within { border-color: var(--dm-gold); background: rgba(255, 255, 255, .12); }
.dm_search input { flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 16px; background: none; border: 0; outline: 0; color: #fff; font-size: 13.5px; }
.dm_search input::placeholder { color: rgba(255, 255, 255, .45); }
.dm_search button { width: 40px; height: 100%; background: none; border: 0; color: var(--dm-gold-l); }

.dm_acts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.dm_cart { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 17px; }
.dm_cart:hover { color: var(--dm-gold-l); background: rgba(255, 255, 255, .06); }
.dm_cart em { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dm-gold); color: var(--dm-ink); font: 700 11px/18px Arial, sans-serif; text-align: center; }
.dm_join { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 18px; border: 1px solid var(--dm-gold); color: var(--dm-gold-l); font-size: 13.5px; font-weight: 600; }
.dm_join:hover { background: var(--dm-gold); color: var(--dm-ink); }

/* ---------- 通用按钮 / 标题 ---------- */
.dm_btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 26px; border-radius: 22px; font-size: 14.5px; font-weight: 600; transition: all .2s ease; }
.dm_btn_gold { background: var(--dm-gold); color: var(--dm-ink); }
.dm_btn_gold:hover { background: var(--dm-gold-l); color: var(--dm-ink); }
.dm_btn_line { border: 1px solid var(--dm-ink); color: var(--dm-ink); }
.dm_btn_line:hover { background: var(--dm-ink); color: #fff; }
.dm_hd_en { display: block; font: 600 11px/1 Arial, sans-serif; letter-spacing: .28em; color: var(--dm-gold-d); margin-bottom: 8px; }

/* ---------- 商品卡 ---------- */
.dm_card { display: flex; flex-direction: column; background: var(--dm-paper); border: 1px solid var(--dm-line); border-radius: var(--dm-r); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.dm_card:hover { transform: translateY(-4px); border-color: var(--dm-gold-s); box-shadow: 0 16px 34px rgba(26, 26, 28, .10); }
.dm_card_pic { position: relative; display: block; aspect-ratio: 1 / 1; background: #F3EFE8; overflow: hidden; }
.dm_card_pic img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; transition: transform .4s ease; }
.dm_card:hover .dm_card_pic img { transform: scale(1.04); }
.dm_card_tag { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 9px; border-radius: 3px; background: var(--dm-ink); color: var(--dm-gold-l); font-size: 11.5px; letter-spacing: .06em; }
.dm_card_tag_hot { background: var(--dm-gold); color: var(--dm-ink); }
.dm_card_bd { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.dm_card_cat { font-size: 11.5px; color: var(--dm-gold-d); letter-spacing: .06em; margin-bottom: 4px; }
.dm_card_name { margin: 0 0 10px; font-size: 14px; font-weight: 500; line-height: 1.55; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm_card_name a { color: var(--dm-text); }
.dm_card_name a:hover { color: var(--dm-gold-d); }
.dm_card_ft { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.dm_price { color: var(--dm-price); font: 700 20px/1 "DIN Alternate", "Helvetica Neue", Arial, sans-serif; }
.dm_price small { font-size: 12px; font-weight: 600; }
.dm_card_ft s { font-size: 12px; color: var(--dm-faint); }
.dm_card_sold { margin-left: auto; font-size: 12px; color: var(--dm-faint); }

/* ---------- 页脚 ---------- */
.dm_ft { margin-top: 0; background: var(--dm-ink); color: rgba(255, 255, 255, .62); font-size: 13.5px; border-top: 3px solid var(--dm-gold); }
.dm_ft_top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 36px; padding: 56px 0 40px; }
.dm_ft_logo { height: 36px; width: auto; margin-bottom: 18px; }
.dm_ft_brand p { line-height: 1.9; margin: 0 0 18px; }
.dm_ft_join { color: var(--dm-gold-l); font-weight: 600; }
.dm_ft_join:hover { color: #fff; }
.dm_ft h4 { color: #fff; font-size: 15px; font-weight: 600; margin: 4px 0 16px; letter-spacing: .04em; }
.dm_ft_col a { display: block; color: rgba(255, 255, 255, .62); margin-bottom: 10px; }
.dm_ft_col a:hover { color: var(--dm-gold-l); }
.dm_ft_tel { padding: 14px 16px; border: 1px solid rgba(201, 160, 99, .35); border-radius: var(--dm-r); margin-bottom: 14px; }
.dm_ft_tel small { display: block; font-size: 12px; color: rgba(255, 255, 255, .5); }
.dm_ft_tel strong { font: 700 22px/1.4 "DIN Alternate", Arial, sans-serif; color: var(--dm-gold-l); letter-spacing: .03em; }
.dm_ft_contact ul { padding: 0; margin: 0; }
.dm_ft_contact li { display: flex; gap: 10px; margin-bottom: 8px; line-height: 1.7; }
.dm_ft_contact li i { color: var(--dm-gold); margin-top: 5px; width: 14px; flex-shrink: 0; }
.dm_ft_contact li a { color: rgba(255, 255, 255, .7); }
.dm_ft_note { padding: 16px 18px; border-radius: var(--dm-r); background: rgba(255, 255, 255, .04); font-size: 12.5px; line-height: 1.85; color: rgba(255, 255, 255, .5); }
.dm_ft_note strong { color: var(--dm-gold-l); margin-right: 8px; font-weight: 600; }
.dm_ft_copy { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 22px 0 26px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.dm_ft_copy a { color: rgba(255, 255, 255, .55); }
.dm_ft_copy a:hover { color: var(--dm-gold-l); }

/* 回到顶部 / 提示条跟随新配色 */
.zh_scroll_top { background: var(--dm-ink) !important; color: var(--dm-gold-l) !important; border: 1px solid rgba(201, 160, 99, .4) !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
    .dm_search { width: 190px; }
    .dm_nav a { padding: 0 10px; }
    .dm_ft_top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .dm_ft_contact { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
    .dm_nav, .dm_search, .dm_note_links a:not(#zh_feedback_btn) { display: none; }
    .dm_burger { display: block; }
    .dm_hd_in { height: 60px; gap: 14px; }
    .dm_logo { margin-right: auto; }
    .dm_logo img { height: 28px; }
    .dm_ft_top { grid-template-columns: 1fr 1fr; gap: 28px; }
    .dm_ft_brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .dm_note_tel, .dm_note_links { display: none; }
    .dm_join { padding: 0 12px; height: 32px; font-size: 12.5px; }
    .dm_ft_top { grid-template-columns: 1fr 1fr; padding-top: 40px; }
}