/* ============================================================
   135 主题 · 桥接样式 / bridge.css
   作用：补齐 main.css 没覆盖、但 CMS 动态页面必需的组件样式
         （面包屑、工具条、分页、详情正文排版、搜索结果、留言卡…）。
   这个文件排在 main.css 之后加载，最后一句话说了算。
   配色全部沿用 main.css 的 CSS 变量，改变量即全站换肤。
   ============================================================ */

/* ---------- 面包屑 ---------- */
.crumb {
    font-size: 13px;
    color: var(--mut, #93806F);
    margin-bottom: 18px;
}
.crumb a { color: var(--ink-2, #6F5A4B); }
.crumb a:hover { color: var(--brick, #912F02); }
.crumb span { margin: 0 6px; opacity: .6; }

/* ---------- 分区标题右侧的数量 ---------- */
.sec-head { position: relative; }
.sh-count {
    position: absolute;
    right: 0;
    top: 8px;
    font-size: 13px;
    color: var(--mut, #93806F);
}
.sh-count b { color: var(--brick, #912F02); font-weight: 600; }

/* ---------- 空态提示 ---------- */
.hm-empty {
    padding: 46px 20px;
    text-align: center;
    color: var(--mut, #93806F);
    font-size: 15px;
    background: var(--cream, #F7F0E8);
    border: 1px dashed var(--line, #D9C7B5);
    border-radius: var(--r, 14px);
}

/* ---------- 子栏目切换（列表页顶部） ---------- */
.gb-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
}
.gb-subnav a {
    padding: 7px 18px;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2, #6F5A4B);
    font-size: 14px;
    transition: all .22s var(--ease, ease);
}
.gb-subnav a:hover { border-color: var(--brick, #912F02); color: var(--brick, #912F02); }
.gb-subnav a.on {
    background: var(--brick, #912F02);
    border-color: var(--brick, #912F02);
    color: #FFFDFA;
}

/* ---------- 商城工具条：排序 + 筛选 ---------- */
.gb-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin-bottom: 26px;
    background: var(--cream, #F7F0E8);
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r, 14px);
}
.gb-sorts { display: flex; gap: 6px; flex-wrap: wrap; }
.gb-sorts a {
    padding: 6px 14px;
    font-size: 14px;
    color: var(--ink-2, #6F5A4B);
    border-radius: var(--r-s, 8px);
    background: #fff;
    border: 1px solid var(--line, #D9C7B5);
}
.gb-sorts a:hover { color: var(--brick, #912F02); }
.gb-sorts a.on { background: var(--brick, #912F02); border-color: var(--brick, #912F02); color: #FFFDFA; }
.gb-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gb-filter select,
.gb-filter input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r-s, 8px);
    background: #fff;
    color: var(--ink, #3A2318);
    font-size: 14px;
    font-family: inherit;
}
.gb-filter input { width: 96px; }
.gb-sep { color: var(--mut, #93806F); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 14px; }

/* ---------- 商品卡片上的操作区 ---------- */
.pd-ops { display: flex; gap: 8px; margin-top: 12px; }
.pd-ops .btn { flex: 1; text-align: center; }
/* 「加购物车」在卡片上是 .btn-line —— 那套样式是给首页深色横幅准备的
   （透明底 + 白字 + 半透明边），搬到浅色纸底卡片上白字直接看不见。
   这里限定在 .pd-ops 内改成描边款：白底 + 砖红字/边，悬停填色反白。
   (0,2,0) 特异性压过全局 a:hover 的 (0,1,1)，悬停字色不会被抢成深砖红 */
.pd-ops .btn-line { border: 1px solid var(--brick); color: var(--brick); background: #fff; }
.pd-ops .btn-line:hover { background: var(--brick); border-color: var(--brick); color: #fff; }

/* ---------- 分页 ---------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 34px 0 0;
}
.pagination a,
.pagination span {
    display: inline-block;
    min-width: 38px;
    height: 38px;
    line-height: 36px;
    padding: 0 12px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-2, #6F5A4B);
    background: #fff;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r-s, 8px);
}
.pagination a:hover { border-color: var(--brick, #912F02); color: var(--brick, #912F02); }
.pagination .active,
.pagination .current {
    background: var(--brick, #912F02);
    border-color: var(--brick, #912F02);
    color: #FFFDFA;
}

/* {$page_html} 自带 <ul class="pagination">，套在 div.pagination 里时外层已给间距，内层复位（顺带修掉双份 margin） */
div.pagination > ul.pagination { margin: 0; }

/* 分页后面的商品总数（产品中心）：去掉 .pagination span 的按钮盒子样式，纯文字 */
.pagination .pg-total {
    min-width: 0;
    height: auto;
    padding: 0 0 0 10px;
    background: none;
    border: 0;
    text-align: left;
    line-height: 38px;
    white-space: nowrap;
    font-size: 14px;
    color: var(--mut, #93806F);
    cursor: default;
}
.pagination .pg-total b { color: var(--brick, #912F02); font-weight: 600; }

/* ---------- 新闻列表：主区 + 侧栏 ---------- */
.news-wrap { align-items: flex-start; }
.news-main { min-width: 0; }
@media (max-width: 1024px) {
    .news-wrap { flex-direction: column; }
    .news-main { width: 100%; }
}

/* ---------- 侧栏导航 ---------- */
.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav li + li { border-top: 1px solid var(--line, #D9C7B5); }
.side-nav a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: var(--ink, #3A2318);
}
.side-nav a:hover, .side-nav a.on { color: var(--brick, #912F02); }

/* ---------- 详情页正文排版（后台富文本写什么就是什么，这里只保证可读） ---------- */
.single-page { min-width: 0; }
.art-title {
    font-size: 32px;
    line-height: 1.35;
    color: var(--brown, #1E0906);
    font-weight: 600;
    margin-bottom: 12px;
}
.art-lead {
    font-size: 16px;
    color: var(--ink-2, #6F5A4B);
    margin-bottom: 22px;
    padding-left: 14px;
    border-left: 3px solid var(--brick, #912F02);
}
.art-body { font-size: 16px; line-height: 1.95; color: var(--ink, #3A2318); }
.art-body h2 { font-size: 22px; margin: 28px 0 14px; color: var(--brown, #1E0906); }
.art-body h3 { font-size: 18px; margin: 22px 0 12px; color: var(--brown, #1E0906); }
.art-body p { margin-bottom: 16px; }
.art-body ul, .art-body ol { margin: 0 0 18px 22px; }
.art-body li { margin-bottom: 8px; }
.art-body img { max-width: 100%; height: auto; border-radius: var(--r-s, 8px); margin: 10px 0; }
.art-body a { color: var(--brick, #912F02); text-decoration: underline; }
.art-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.art-body th, .art-body td {
    border: 1px solid var(--line, #D9C7B5);
    padding: 10px 12px;
    font-size: 15px;
}
.art-body th { background: var(--cream, #F7F0E8); text-align: left; }
.art-body blockquote {
    margin: 18px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--orange, #FD6716);
    background: var(--cream, #F7F0E8);
    color: var(--ink-2, #6F5A4B);
}

/* 自定义字段表 */
.art-fields {
    margin: 26px 0 0;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r, 14px);
    overflow: hidden;
}
.af-row { display: flex; border-bottom: 1px solid var(--line, #D9C7B5); }
.af-row:last-child { border-bottom: 0; }
.af-k {
    width: 140px;
    flex: none;
    padding: 12px 16px;
    background: var(--cream, #F7F0E8);
    color: var(--ink-2, #6F5A4B);
    font-size: 14px;
}
.af-v { padding: 12px 16px; font-size: 15px; }

/* 标签 */
.art-tags { margin: 24px 0 0; font-size: 14px; color: var(--mut, #93806F); }
.art-tags b { color: var(--ink, #3A2318); font-weight: 500; }
.art-tags span {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 4px 12px;
    background: var(--cream, #F7F0E8);
    border-radius: 999px;
}

/* 上下篇 */
.art-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin: 30px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line, #D9C7B5);
    font-size: 14px;
    color: var(--ink-2, #6F5A4B);
}
.art-nav a:hover { color: var(--brick, #912F02); }
.art-nav span { color: #C1B3A5; }

.art-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- 联系我们：栏目简介 + 表单 ---------- */
.cc-intro {
    margin-bottom: 26px;
    color: var(--ink-2, #6F5A4B);
    font-size: 16px;
    line-height: 1.9;
}
.tra-fig { position: relative; border-radius: var(--r, 14px); overflow: hidden; margin-bottom: 18px; }
.tra-fig img { width: 100%; display: block; }
.tra-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--cream, #F7F0E8);
    border-radius: var(--r, 14px);
}
.tra-date img { width: 78px; height: auto; }
.tra-date span { font-size: 13px; color: var(--mut, #93806F); line-height: 1.6; }

form.contact-form { display: block; }
form.contact-form input,
form.contact-form textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r-s, 8px);
    background: #fff;
    color: var(--ink, #3A2318);
    font: inherit;
    font-size: 15px;
}
form.contact-form textarea { min-height: 132px; resize: vertical; }
form.contact-form input:focus,
form.contact-form textarea:focus {
    outline: none;
    border-color: var(--brick, #912F02);
    box-shadow: 0 0 0 3px rgba(145, 47, 2, .08);
}
.cap-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cap-row input { width: 130px; margin: 0; }
.cap-text {
    font-size: 14px;
    color: var(--ink-2, #6F5A4B);
    background: var(--cream, #F7F0E8);
    padding: 8px 14px;
    border-radius: var(--r-s, 8px);
    letter-spacing: 1px;
}
.contact-btns { margin-top: 6px; }
.form-tip {
    font-size: 13px;
    color: var(--orange, #FD6716);
    margin-bottom: 12px;
}

/* 留言卡 */
.gbk-av {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--brick, #912F02);
    color: #FFFDFA;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gbk-reply {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--cream, #F7F0E8);
    border-radius: var(--r-s, 8px);
    font-size: 14px;
    color: var(--ink-2, #6F5A4B);
}

/* ---------- 商品详情 view_shop 的补白（主件在 main.css 的 .pd-page 系列） ---------- */
.empty-tip { color: var(--mut, #93806F); font-size: 15px; }
/* 评论头像没有图片时用昵称首字画一个圆底 */
.cm-ava.cm-av-tx {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brick, #912F02);
    color: #FFFDFA;
    font-size: 17px;
    font-weight: 600;
}
/* 商品没有图时的占位块 */
.sd-cover-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper, #EDE2D8);
    color: var(--sand, #DEC9B7);
    font-size: 92px;
    font-weight: 700;
    aspect-ratio: 1 / 1;
}
/* 联系页左栏（图 / 电话条 / 信息列表 / 邮箱条 竖排） */
.cc-body { display: flex; flex-direction: column; gap: 20px; }
/* 商品「未标记在售」时的提示条 */
.sd-onsale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--cream, #F7F0E8);
    border: 1px dashed var(--line, #D9C7B5);
    border-radius: var(--r-s, 8px);
    font-size: 14px;
    color: var(--ink-2, #6F5A4B);
}
.sd-onsale i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--orange, #FD6716); }
.sd-onsale a { color: var(--brick, #912F02); text-decoration: underline; }
.pd-sold-out { font-size: 15px; color: var(--mut, #93806F); }
.pd-pricebox .pv.pv-sale { font-size: 21px; }
.pd-pricebox .pv { transition: color .3s var(--ease, ease); }
.pd-pricebox.is-empty .pv { color: var(--mut, #93806F); }
/* main.css 在 ≤720 的吸附态把按钮文字换成 CSS 里的「加车 / 购买」，
   这里改回显示界面词条的原文（文案只应来自后台） */
@media (max-width: 720px) {
    .pd-actions.is-docked .pd-add-cart,
    .pd-actions.is-docked .pd-buy-now { font-size: 14px; }
    .pd-actions.is-docked .pd-add-cart::after,
    .pd-actions.is-docked .pd-buy-now::after { content: none; }
}

/* ---------- 搜索页 ---------- */
.gb-searchbar { display: flex; gap: 10px; margin-bottom: 20px; }
.gb-searchbar input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r-s, 8px);
    font: inherit;
    font-size: 15px;
}
.gb-searchbar input:focus { outline: none; border-color: var(--brick, #912F02); }
.gb-summary { font-size: 14px; color: var(--mut, #93806F); margin-bottom: 18px; }
.gb-summary strong { color: var(--brick, #912F02); }
.gb-result { display: grid; gap: 14px; }
.gb-res-item {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line, #D9C7B5);
    border-radius: var(--r, 14px);
    transition: box-shadow .22s var(--ease, ease);
}
.gb-res-item:hover { box-shadow: var(--shadow, 0 2px 10px rgba(58, 35, 24, .08)); }
.gb-res-title { font-size: 17px; color: var(--brown, #1E0906); font-weight: 500; }
.gb-res-title:hover { color: var(--brick, #912F02); }
.gb-res-desc { margin-top: 6px; font-size: 14px; color: var(--ink-2, #6F5A4B); }
.gb-res-meta { margin-top: 8px; font-size: 12px; color: var(--mut, #93806F); }
.gb-res-meta span { margin-right: 8px; }

/* ---------- 留言提示气泡（联系页表单反馈） ---------- */
#gbTip {
    position: fixed;
    left: 50%;
    bottom: 46px;
    transform: translate(-50%, 20px);
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--brown, #1E0906);
    color: #FFFDFA;
    font-size: 14px;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease, ease), transform .25s var(--ease, ease);
}
#gbTip.show { opacity: 1; transform: translate(-50%, 0); }
#gbTip.err { background: #C0392B; }

/* ---------- 栏目封面占位（后台編輯态才会显形，前台不占空间） ---------- */
.gb-ph { display: none; }
body.gb-edit-on .gb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    border: 2px dashed var(--brick, #912F02);
    color: var(--brick, #912F02);
    background: var(--cream, #F7F0E8);
    border-radius: var(--r, 14px);
    margin-bottom: 24px;
}