/* ===== 旅游专列前台样式（移动优先） ===== */

:root {
    /* 主色统一为站内品牌金（与 site.css 的 --c-primary: #b8923f 一致）。
       原来这里是 Bootstrap 蓝 #0d6efd，导致门户（首页/搜索）的按钮、胶囊高亮、
       分页、面包屑高亮等与产品页/客服按钮的金色不是一套。 */
    --p-primary: #b8923f;
    --p-primary-dark: #a8863a;
    --p-dark: #1a2332;
    --p-accent: #d4a017;
    --p-bg: #f5f6f8;
    --p-card-radius: 14px;
    --p-tap: 44px; /* 最小触控高度 */
}

body.portal-body {
    background: var(--p-bg);
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden; /* hero 通栏时避免横向滚动条 */
}

/* ---------- 顶部品牌栏 ---------- */
.portal-topbar {
    background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%);
    color: #fff;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.portal-topbar .brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-topbar .brand i { color: var(--p-accent); font-size: 22px; }
.portal-topbar .nav-link {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    padding: 6px 12px;
}
.portal-topbar .nav-link:hover { color: #fff; }

/* ---------- 搜索面板 ---------- */
.search-panel {
    background: #fff;
    border-radius: var(--p-card-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    padding: 16px;
    margin-bottom: 16px;
}
.search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.search-field .lbl {
    font-size: 12px;
    color: #8892a0;
    font-weight: 500;
}
.search-field .val {
    font-size: 15px;
    font-weight: 600;
    color: #1a2332;
    min-height: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-cell {
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: var(--p-tap);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
    width: 100%;
    text-align: left;
}
.search-cell:hover, .search-cell:active {
    border-color: var(--p-primary);
    box-shadow: 0 0 0 3px rgba(184,146,63,.08);
}
.search-cell.placeholder .val { color: #a8b0bd; font-weight: 400; }

/* 主搜索框（移动端） */
.search-input-wrap {
    position: relative;
    width: 100%;
}
.search-input-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a8b0bd;
    font-size: 17px;
    pointer-events: none;
}
.search-input-wrap input {
    height: 46px;
    padding-left: 42px;
    border-radius: 23px;
    border: 1px solid #e6e9ee;
    background: #fff;
    font-size: 15px;
    width: 100%;
}
.search-input-wrap input:focus {
    border-color: var(--p-primary);
    box-shadow: 0 0 0 3px rgba(184,146,63,.1);
    outline: none;
}
/* 搜索框 + 右侧「搜索」按钮（手机端原来只有输入框，用户输入完不知道按哪儿触发） */
.m-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.m-search-row .search-input-wrap { flex: 1; min-width: 0; }
.m-search-btn {
    flex: 0 0 auto;
    height: 46px;                 /* 与输入框等高 */
    padding: 0 20px;
    border: none;
    border-radius: 23px;
    /* 与 PC 端「查询」按钮同一套蓝色渐变 */
    background: linear-gradient(135deg, #d6ba72 0%, #b8923f 55%, #a8863a 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(168,134,58,.32), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .12s ease, filter .18s ease;
}
.m-search-btn:hover { filter: brightness(1.06); }
.m-search-btn:active { transform: translateY(1px) scale(.985); }

/* ---------- 手机端搜索区第 1 行：出发地 ⇄ 目的地 ---------- */
.msearch-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
}
.msearch-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;                 /* 单行，比原来两行的 50px 矮 */
    padding: 0 28px 0 12px;       /* 右侧给下三角留位 */
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 12px;
    text-align: left;
    text-decoration: none;        /* 首页这里是 <a>，不写会有下划线 */
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.msearch-field:active { background: #fafbfc; }
/* 「出发地 / 目的地」标签：常规字重（不加粗），已选值才加粗高亮 */
.msearch-field .msf-lbl { font-size: 14px; font-weight: 400; color: #1a2332; line-height: 1.2; white-space: nowrap; }
/* 已选值：跟在「出发地」后面，金色加粗；没选就不输出这个 span，只显示「出发地」 */
.msearch-field .msf-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--p-primary-dark);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msearch-field.is-active { border-color: var(--p-primary); background: rgba(184,146,63,.06); }

/* ---------- 首页手机端：高级搜索折叠（出发日期 / 房型·天数 / 舒适度）----------
   开关已并入第 1 行（.msearch-row）右侧，不再单独占一行：收起态整块搜索区只剩 2 行。
   展开面板紧跟第 1 行 → 展开时正好是第 2 行，关键词输入框顺延到第 3 行。 */
.m-adv-btn {
    flex: 0 0 auto;
    align-self: stretch;              /* 与左右两个「出发地 / 目的地」字段等高（42px） */
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--p-primary-dark);
    white-space: nowrap;
    cursor: pointer;
    transition: transform .12s ease;
}
.m-adv-btn:active { transform: scale(.96); }
.m-adv-arrow { font-size: 11px; transition: transform .2s; }
.m-adv-btn.is-open .m-adv-arrow { transform: rotate(180deg); }
/* 展开面板：紧贴第 1 行（.quick-bar 自带 8px 下内边距，这里只补 4px 与下方输入框拉开） */
.m-adv { display: none; margin-bottom: 4px; }
.m-adv.is-open { display: block; }
/* 可点即选的控件统一带一个下三角，提示用户「这里可以点」 */
.msf-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: #b6bcc6;
    pointer-events: none;
}
.msearch-field.is-active .msf-caret { color: var(--p-primary); }
.ch-caret { font-size: 9px; opacity: .5; margin-left: 1px; }
.chip.active .ch-caret { opacity: .85; }

/* ---------- 非全宽页面主容器：与头部 .site-container 同宽同内边距 ----------
   Bootstrap 的 .container 是 1140px（≥1200屏）/1320px（≥1400屏）、内边距 12px，
   而头部 .site-container 是 1280px、内边距 20px，两者左右边缘对不齐。
   这里统一覆盖，保证搜索页等页面的内容宽度与头部严格对齐。 */
main.container {
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------- PC 主容器：限制在常见宽度并居中 ---------- */
@media (min-width: 992px) {
    main.container-fluid.portal-fluid {
        /* 常见网页内容宽度上限，超出后居中留白 */
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    /* 顶部栏同步同样宽度，与主内容左右对齐 */
    .portal-topbar.is-fluid > .container,
    .portal-topbar.is-fluid > .container-fluid {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ---------- PC 端搜索栏：严格一行，铺满整宽 ---------- */
.pc-search-row {
    display: flex;
    flex-wrap: nowrap;        /* 禁止换行 */
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}
.pc-search-row .ps-fi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;              /* 默认等分，可伸缩可收缩 */
    min-width: 0;
}
.pc-search-row .ps-fi .lbl {
    font-size: 12px;
    color: #8892a0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-search-row .ps-fi .form-select,
.pc-search-row .ps-fi .form-control {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    border-color: #e6e9ee;
    font-size: 14.5px;
    min-width: 0;
}
.pc-search-row .ps-fi .form-select:focus,
.pc-search-row .ps-fi .form-control:focus {
    border-color: var(--p-primary);
    box-shadow: 0 0 0 3px rgba(184,146,63,.1);
}
/* 关键词：略宽 */
.pc-search-row .ps-fi-kw { flex: 1.7 1 0; }
/* 日期区间：年 月 ~ 年 月 */
.pc-search-row .ps-fi-date { flex: 2.1 1 0; }
.ps-date-range {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    width: 100%;
}
.ps-date-range .form-select {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-left: 7px;
    padding-right: 16px;
    background-position: right 3px center;
    background-size: 11px 9px;
    font-size: 13.5px;
}
/* 区间分隔：CSS 绘制的右向箭头（表达"起 → 止"） */
.ps-date-range .pr-sep {
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 44px;
    user-select: none;
    pointer-events: none;
}
.ps-date-range .pr-arrow {
    position: relative;
    display: block;
    width: 11px;
    height: 2px;
    border-radius: 1px;
    background: #98a2b3;
}
/* 箭头头部：用 border 画实心三角形 */
.ps-date-range .pr-arrow::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid #98a2b3;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
}
/* 悬停时高亮，强化"区间"的暗示 */
.ps-fi-date:hover .pr-arrow,
.ps-fi-date:focus-within .pr-arrow { background: var(--p-primary); }
.ps-fi-date:hover .pr-arrow::after,
.ps-fi-date:focus-within .pr-arrow::after { border-left-color: var(--p-primary); }
/* 搜索按钮列：固定宽度，按钮撑满该列 */
.pc-search-row .ps-fi-btn {
    flex: 0 0 132px;
    width: 132px;
}
.btn-search-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #d6ba72 0%, #b8923f 55%, #a8863a 100%);
    border: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(168,134,58,.32), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
    letter-spacing: 0.5px;
}
.btn-search-main i { font-size: 16px; }
.btn-search-main:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(168,134,58,.42), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-search-main:active {
    transform: translateY(1px) scale(.985);
    box-shadow: 0 2px 8px rgba(168,134,58,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

/* 中等屏幕（992–1399px）：紧凑一些，保证仍在一行 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .pc-search-row { gap: 8px; }
    .pc-search-row .ps-fi .form-select,
    .pc-search-row .ps-fi .form-control { font-size: 13.5px; padding-left: 8px; padding-right: 20px; }
    .ps-date-range { gap: 3px; }
    .ps-date-range .form-select { padding-left: 5px; padding-right: 14px; font-size: 12.5px; }
    .ps-date-range .pr-sep { flex: 0 0 14px; }
    .ps-date-range .pr-arrow { width: 9px; }
    .ps-date-range .pr-arrow::after { border-left-width: 4px; border-top-width: 3px; border-bottom-width: 3px; }
    .pc-search-row .ps-fi-btn { flex: 0 0 100px; width: 100px; }
    .btn-search-main { font-size: 14px; }
}

/* ---------- 快捷筛选胶囊条 ---------- */
.quick-bar {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.quick-bar::-webkit-scrollbar { display: none; }
.chip {
    /* 这一行固定是「出发日期 / 房型·天数 / 舒适度」三个 → 等分占满整行 */
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 34px 高 / 13px 字（原来挤 5 个时才被迫缩到 30px / 12px） */
    height: 34px;
    padding: 0 8px;
    border-radius: 17px;
    background: #fff;
    border: 1px solid #e6e9ee;
    font-size: 13px;
    color: #1a2332;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    text-decoration: none;
}
.chip:active { transform: scale(.97); }
.chip.active {
    background: var(--p-primary);
    border-color: var(--p-primary);
    color: #fff;
    font-weight: 600;
}
.chip i { font-size: 11px; }
.chip .badge-dot {
    background: #dc3545;
    color: #fff;
    font-size: 8.5px;
    line-height: 1.5;
    border-radius: 6px;
    padding: 0 4px;
    margin-left: 1px;
}

/* ---------- 档位标签 ---------- */
.grade-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
    line-height: 1.6;
}

/* ---------- 产品卡片 ---------- */
.product-card {
    background: #fff;
    border-radius: var(--p-card-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-bottom: 14px;
    transition: box-shadow .2s, transform .2s;
    display: block;
    color: inherit;
    text-decoration: none;
}
.product-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.product-card:active { transform: scale(.995); }
.product-card .cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e9ecef center/cover no-repeat;
    overflow: hidden;
}
.product-card .cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-card .cover .tags-float {
    position: absolute;
    left: 10px; top: 10px;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.product-card .cover .seat-float {
    position: absolute;
    right: 10px; top: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}
.product-card .body { padding: 12px 14px 14px; }
.product-card .name {
    font-size: 16px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.product-card .meta {
    font-size: 12.5px;
    color: #7d8796;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-bottom: 10px;
}
.product-card .meta span { display: inline-flex; align-items: center; gap: 4px; }
.product-card .meta i { font-size: 13px; }
.product-card .foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.product-card .price {
    color: #e4393c;
    line-height: 1.1;
}
.product-card .price .unit { font-size: 12px; }
.product-card .price .amt { font-size: 21px; font-weight: 800; font-family: -apple-system, "SF Pro Display", Arial, sans-serif; }
.product-card .price .suffix { font-size: 12px; color: #8892a0; margin-left: 2px; }
.product-card .price .was { font-size: 12px; color: #b3bac4; text-decoration: line-through; margin-left: 4px; }
.btn-book {
    height: 36px;
    padding: 0 18px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #ff6b35, #e4393c);
    color: #fff;
    border: none;
    white-space: nowrap;
}

/* PC 端卡片横向布局 */
@media (min-width: 992px) {
    .product-card.pc-row { display: flex; }
    .product-card.pc-row .cover { width: 240px; flex: 0 0 240px; aspect-ratio: auto; min-height: 168px; }
    .product-card.pc-row .body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 18px; }
    .product-card.pc-row .name { font-size: 18px; }
}

/* ---------- 骨架屏 ---------- */
.skeleton {
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
    border-radius: 6px;
}
@keyframes shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.skeleton-cover { aspect-ratio: 16/9; border-radius: 0; }
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }

/* ---------- 筛选抽屉（移动端底部弹起） ---------- */
.filter-sheet .offcanvas {
    border-radius: 18px 18px 0 0;
    max-height: 85vh;
}
.filter-sheet .sheet-handle {
    width: 38px; height: 4px;
    background: #dfe3e8;
    border-radius: 2px;
    margin: 10px auto 6px;
}
.filter-group { margin-bottom: 20px; }
.filter-group .fg-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a2332;
    margin-bottom: 10px;
}
.filter-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: #f3f5f8;
    border: 1px solid transparent;
    font-size: 13.5px;
    color: #404b5c;
    cursor: pointer;
    transition: all .15s;
}
.filter-opt.active {
    background: rgba(184,146,63,.1);
    border-color: var(--p-primary);
    color: var(--p-primary);
    font-weight: 600;
}
.sheet-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #f0f2f5;
    display: flex;
    gap: 12px;
}

/* ---------- 档位列表（每行一个） ---------- */
.grade-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grade-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f7f8fa;
    border: 1px solid transparent;
    font-size: 14px;
    color: #2b3444;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}
.grade-item:active { transform: scale(.99); }
.grade-item:hover { background: #f0f2f6; }
.grade-item.active {
    background: rgba(184,146,63,.08);
    border-color: var(--p-primary);
    color: var(--p-primary);
}
.grade-item .gi-name {
    font-weight: 600;
    white-space: nowrap;
}
.grade-item .gi-range {
    font-size: 12px;
    color: #8892a0;
    white-space: nowrap;
}
.grade-item.active .gi-range { color: rgba(184,146,63,.75); }

/* ================= 面包屑导航（全站通用）=================
   位置：主内容区顶部，与头部 .site-container 左右对齐
   结构：<nav class="p-crumb"><a>首页</a><i class="bi bi-chevron-right"></i><span>当前页</span></nav>
*/
.p-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 14px;
    font-size: .86rem;
    line-height: 1.5;
    color: #98a2b3;
    min-height: 22px;
}
.p-crumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #667085;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.p-crumb a:hover {
    color: var(--p-primary);
    background: rgba(184,146,63,.07);
}
.p-crumb a i,
.p-crumb > i {
    font-size: .78rem;
    color: #c4ccd6;
    flex: 0 0 auto;
}
.p-crumb a i { font-size: .92rem; color: #98a2b3; transition: color .15s; }
.p-crumb a:hover i { color: var(--p-primary); }
/* 当前页（最后一项）：加深加粗 */
.p-crumb > span:last-child,
.p-crumb > h1.p-crumb-title {
    display: inline-flex;
    align-items: center;
    color: #1a2332;
    font-weight: 600;
    padding-left: 2px;
    line-height: 1.2;
}
/* 搜索页的 H1 就放在面包屑里当"当前页"（顶掉原来的「专列」）：
   必须压掉 h1 的默认字号与 margin，否则会把整条面包屑撑变形；
   长关键词允许换行（.p-crumb 本身是 flex-wrap），不截断 —— 它毕竟是页面标题。 */
/* 注意是 .p-crumb-title 而不是 h1.p-crumb-title：
   列表/搜索这类页面的"当前页名称"是页面的 H1（面包屑里那一个）；
   而详情页（产品页、公告详情）正文标题本身就是 H1，面包屑那个只能写成 <span class="p-crumb-title">
   —— 否则一页会出现两个 H1。这里两种都照顾到。 */
.p-crumb > .p-crumb-title {
    margin: 0;
    font-size: inherit;
    flex: 0 1 auto;
    min-width: 0;
}

/* ========== 手机端子页：面包屑退化成「返回箭头 + 当前页名称」（标题栏）==========
   ★★★ 全站统一标准（新页面照下面 5 行写即可，PC 端不用管，自动是完整面包屑）：
     <nav class="p-crumb has-back" aria-label="面包屑导航">
         <a class="p-crumb-back" href="…上一级…" aria-label="返回…"><i class="bi bi-chevron-left"></i></a>
         <a class="p-crumb-home" href="…/首页"><i class="bi bi-house-door-fill"></i>首页</a>
         <i class="bi bi-chevron-right"></i>
         <h1 class="p-crumb-title">当前页名称</h1>
     </nav>
   补充：标题太长的详情页（如公告详情），手机端这一项可以固定写个短页名（「公告」）——
        写法是里外两层 span：<span class="p-crumb-title"><span class="d-none d-lg-inline">完整标题</span>
        <span class="d-lg-none">短页名</span></span>，PC 端仍显示完整标题。
   要点：① nav 必须带 has-back；
        ② 最后一项写 class="p-crumb-title" —— 列表/搜索这类页面用 <h1>（它就是本页 H1），
           详情页（产品页 / 公告详情）正文标题已经是 H1 了，这里必须用 <span>，否则一页两个 H1；
        ③ 首页链接加 p-crumb-home、中间的层级链接加 p-crumb-parent（手机端会被隐藏）；
        ④ 返回目标写"上一级页面"（列表页回首页、详情页回列表页）。
   手机端只留【箭头 + 当前页名称】，中间层级与分隔符全隐藏（订单详情是三层，也不会漏）。
   PC 端完全不变（仍是完整面包屑）。

   为什么这样改：手机端主流就是左上角一个返回箭头 + 当前页名称（App 的标题栏），
   比铺一串「首页 › 个人中心 › 当前页」更省地方、也更好认。
   注意 H1 仍然在这条面包屑里 —— 所以手机端和 PC 端都只有这一个 H1，不需要重复输出。 */
/* 注意选择器权重：上面有 `.p-crumb a { display:inline-flex }`（0-1-1），
   这里必须写够权重（a.p-crumb-back = 0-2-1）才盖得住，否则 PC 端箭头也藏不住 —— 实测踩过。 */
.p-crumb a.p-crumb-back { display: none; }
@media (max-width: 991.98px) {
    .p-crumb.has-back { flex-wrap: nowrap; gap: 4px; }
    .p-crumb.has-back a.p-crumb-back {
        display: inline-flex;
        margin-left: -6px;                 /* 让箭头与内容左边缘对齐 */
        padding: 2px 6px;
    }
    .p-crumb.has-back .p-crumb-back i { font-size: 1.05rem; color: #667085; }
    /* 除返回箭头外，整条面包屑里的链接与分隔箭头全部隐藏 ——
       只留：箭头 + 当前页名称。写成「除箭头外全藏」而不是逐个点名，
       这样页面中间有几层面包屑都不会漏（订单详情就是三层）。 */
    .p-crumb.has-back > a:not(.p-crumb-back),
    .p-crumb.has-back > i { display: none; }
    /* 当前页名称当标题用，比面包屑字号大一档。
       只允许一行、超出省略：这一行在手机端就是"标题栏"，
       换行会把整条顶高、也更不像 App（产品名 / 公告标题都可能很长）。
       flex:1 + min-width:0 才能在 flex 里正常出省略号。 */
    .p-crumb.has-back > .p-crumb-title {
        font-size: 1.02rem;
        padding-left: 2px;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ================= 12306 风格：通栏 banner 背景 + 左侧悬浮查询面板 ================= */
.hero-wrap {
    position: relative;
    height: 400px;
    margin-bottom: 20px;
    /* 宽度与内容区一致（1280px 上限 + 左右内边距），不做全屏通栏 */
    overflow: hidden;
    background: #eef1f5;
}
/* ---- 左侧查询面板（浮在背景图之上，高度自适应内容） ---- */
.hero-search {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 3;
    width: 380px;
    /* 整体右移 20px，左侧露出背景图 */
    margin-left: 20px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}
.hs-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f2f5;
}
.hs-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #1a2332;
}
.hs-reset {
    font-size: 12.5px;
    color: #667085;
    text-decoration: none;
}
.hs-reset:hover { color: var(--p-primary); }

/* 表单项：label 在左，控件在右 */
.hs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid #f5f6f8;
    flex: 0 0 auto;
}
.hs-item .hs-lbl {
    flex: 0 0 56px;
    font-size: 13.5px;
    color: #344054;
    font-weight: 500;
}
.hs-item .hs-ctrl {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.hs-item .hs-ctrl > i {
    position: absolute;
    left: 10px;
    color: #b0b8c4;
    font-size: 14px;
    pointer-events: none;
}
.hs-select, .hs-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #1a2332;
    font-weight: 500;
    padding: 0 10px 0 30px;
    transition: background .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    text-align-last: left;
}
/* 原生下拉展开列表（能生效的浏览器）选项左对齐 */
.hs-select option {
    text-align: left;
    direction: ltr;
}
.hs-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0a8b4'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 10px;
    padding-right: 26px;
    cursor: pointer;
}
.hs-select:focus, .hs-input:focus {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(184,146,63,.22);
    outline: none;
}
.hs-input::placeholder { color: #98a2b3; font-weight: 400; }

/* 出发日期（两段式，与 label 同行） */
.hs-item-date .hs-lbl { flex: 0 0 56px; }
.hs-date {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.hs-date-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 年下拉占满剩余宽度，月下拉固定较窄 */
.hs-date-side .hs-select:first-child {
    flex: 1 1 auto;
    padding-left: 6px;
    padding-right: 14px;
    font-size: 12.5px;
}
.hs-date-side .hs-select:last-child  {
    flex: 0 0 52px;
    width: 52px;
    padding-left: 5px;
    padding-right: 12px;
    font-size: 12.5px;
    background-position: right 2px center;
    background-size: 9px 7px;
}
.hs-date-side .hs-select {
    background: #fff;
    background-position: right 4px center;
    background-size: 10px 8px;
    /* 日期下拉内部文字统一左对齐 */
    padding-left: 7px;
    padding-right: 16px;
    font-size: 13px;
    text-align: left;
    text-align-last: left;
    direction: ltr;
}
.hs-date-sep {
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hs-date-sep .pr-arrow {
    position: relative;
    display: block;
    width: 9px;
    height: 2px;
    border-radius: 1px;
    background: #98a2b3;
}
.hs-date-sep .pr-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid #98a2b3;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* 查询按钮 */
.hs-submit {
    flex: 0 0 auto;
    width: 100%;
    height: 42px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #d6ba72 0%, #b8923f 60%, #a8863a 100%);
    box-shadow: 0 4px 14px rgba(168,134,58,.3), inset 0 1px 0 rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s, box-shadow .18s, filter .18s;
}
.hs-submit:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(168,134,58,.4), inset 0 1px 0 rgba(255,255,255,.28); }
.hs-submit:active { transform: translateY(1px) scale(.99); }

/* 热门快捷 */
.hs-hot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.hs-hot-lbl { font-size: 12.5px; color: #475467; font-weight: 500; }
.hs-hot-tag {
    font-size: 12.5px;
    color: #344054;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 6px;
    padding: 3px 9px;
    text-decoration: none;
    transition: all .15s;
}
.hs-hot-tag:hover { background: rgba(184,146,63,.1); color: var(--p-primary); }

/* ---- 轮播图：作为整个 hero 区的背景，无圆角 ---- */
.hero-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    background: #eef1f5;
}
.hero-carousel, .hero-carousel .carousel-inner { height: 100%; }
/* 图片不依赖高度链，直接绝对定位铺满，避免 carousel 高度塌陷导致图片不显示 */
.hero-banner .carousel-item,
.hero-banner .carousel-inner,
.hero-banner .hero-carousel { position: relative; height: 100%; }
.hero-slide-link {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.hero-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* 原来是 fill（拉伸），非 16:5 的图会被压扁；改成 cover 与产品页一致，两张图同尺寸不再变形 */
    object-fit: cover;
    display: block;
}
/* ---- 产品推荐但没传「PC 横幅大图」：渐变底 + 海报卡片 ----
   竖版海报既不拉伸也不裁字：底层是同图重模糊（当色底），海报当"卡片"摆在右侧 */
.hero-card-box { position: absolute; inset: 0; overflow: hidden; }
.hero-bg {
    position: absolute; inset: 0;
    background: var(--hero-src) center / cover no-repeat;
    filter: blur(46px) saturate(1.55) brightness(.72);
    transform: scale(1.2);
}
.hero-poster {
    position: absolute; top: 6%; left: 34%; height: 88%; width: auto;
    border-radius: 10px;
    box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .7);
}
/* 手机端：盒子按 16:7（与原轮播同高），海报居中 */
@media (max-width: 991.98px) {
    .m-hero .hero-card-box { position: relative; aspect-ratio: 16 / 7; }
    .m-hero .hero-bg { filter: blur(30px) saturate(1.4) brightness(.78); }
    .m-hero .hero-poster { top: 50%; left: 50%; height: 86%; transform: translate(-50%, -50%); }
}
.hero-caption {
    position: absolute;
    /* 文字贴在图片右下角 */
    left: auto; right: 0; bottom: 0;
    max-width: 52%;
    text-align: right;
    padding: 22px 26px 20px 60px;
    background: linear-gradient(to left, rgba(0,0,0,.62), rgba(0,0,0,0));
    color: #fff;
}
.hero-caption .hc-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-caption .hc-sub {
    font-size: 14px;
    opacity: .92;
}
.hero-indicators {
    /* 指示器移到右上角，避开左下查询面板与右下文字 */
    top: 14px;
    bottom: auto;
    right: 20px;
    left: auto;
    margin: 0;
    justify-content: flex-end;
}
.hero-indicators [data-bs-target] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: none;
    opacity: 1;
    margin: 0 4px;
    transition: all .2s;
}
.hero-indicators .active {
    width: 22px;
    border-radius: 4px;
    background: #fff;
}
.hero-ctrl {
    width: 46px;
    opacity: 0;
    transition: opacity .25s;
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero-banner:hover .hero-ctrl { opacity: .85; }
.hero-ctrl:hover { opacity: 1 !important; }
.hero-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #a8b2c0;
    background: linear-gradient(135deg, #eef1f6, #e3e8ef);
}
.hero-placeholder i { font-size: 46px; }
.hero-placeholder small { font-size: 12px; color: #b8c0cc; }

/* ---- 精选推荐区 ---- */
.featured-section {
    margin-top: 4px;
}
.featured-section .fs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef0f4;
}
.featured-section .fs-title {
    font-size: 19px;
    font-weight: 800;
    color: #1a2332;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .5px;
}
.featured-section .fs-title i {
    color: #ffb800;
    font-size: 17px;
}
.featured-section .fs-more {
    font-size: 13px;
    color: #7d8796;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: color .15s;
}
.featured-section .fs-more:hover { color: var(--p-primary); }

/* 移动端推荐区标题 */
@media (max-width: 991.98px) {
    .featured-section .fs-title { font-size: 17px; }
    .featured-section .fs-head { margin-bottom: 12px; }

    /* 首页手机端：头部 → 搜索区 的间距收紧
       原来是 main 的 padding-top(16px) + 上方轮播 .m-hero 的 mb-3(16px) = 32px，显得空；
       现在 6 + 10 = 16px。用 bodyClass=page-home 限定，只影响首页。 */
    body.page-home main { padding-top: 6px !important; }
    /* 轮播自带 Bootstrap 的 .mb-3（16px + !important），这里必须同样 !important 才能覆盖 */
    body.page-home .m-hero { margin-bottom: 10px !important; }
}

/* ---- 未搜索时的引导区 ---- */
.search-guide {
    text-align: center;
    padding: 46px 20px 40px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.search-guide .sg-icon { font-size: 52px; color: #d6dde7; }
.search-guide .sg-title { font-size: 17px; font-weight: 700; color: #475467; margin: 14px 0 8px; }
.search-guide .sg-desc { font-size: 13.5px; color: #98a2b3; line-height: 1.9; }
.search-guide .sg-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.search-guide .sg-chip {
    font-size: 13px; color: #475467; background: #f3f5f8;
    border-radius: 18px; padding: 7px 16px; text-decoration: none; transition: all .15s;
}
.search-guide .sg-chip:hover { background: rgba(184,146,63,.1); color: var(--p-primary); }

@media (max-width: 1199.98px) and (min-width: 992px) {
    .hero-search { flex: 0 0 320px; width: 320px; }
    .hero-caption .hc-title { font-size: 20px; }
}

/* ---- 移动端轮播 ---- */
.m-hero {
    border-radius: 0;
    overflow: hidden;
}
.m-hero .carousel-inner { border-radius: 0; }
.m-hero .hero-slide-link { display: block; position: relative; }
.m-hero .hero-img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    display: block;
}
.m-hero .hero-caption { padding: 18px 16px 14px; }
.m-hero .hero-caption .hc-title { text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* ---------- 结果工具条 ---------- */
.result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 10px;
    font-size: 13.5px;
    color: #7d8796;
}
.result-bar strong { color: #1a2332; }
.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1a2332;
    font-weight: 600;
    font-size: 13.5px;
    background: none;
    border: none;
    padding: 6px 0;
}

/* ---------- 已选条件 ---------- */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.af-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(184,146,63,.08);
    color: var(--p-primary);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
}
.af-tag i { cursor: pointer; font-size: 12px; }

/* ---------- 分页：跟随站内主色（金）----------
   Bootstrap 默认的 .pagination 走的是 --bs-primary（蓝 #0d6efd），
   这里整套覆盖成品牌金，和搜索按钮 / 胶囊高亮同色。 */
.pagination {
    --bs-pagination-color: #55606e;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #e6e9ee;
    --bs-pagination-hover-color: var(--p-primary);
    --bs-pagination-hover-bg: rgba(184,146,63,.10);
    --bs-pagination-hover-border-color: var(--p-primary);
    --bs-pagination-focus-color: var(--p-primary);
    --bs-pagination-focus-bg: rgba(184,146,63,.10);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(184,146,63,.18);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--p-primary);
    --bs-pagination-active-border-color: var(--p-primary);
    --bs-pagination-disabled-color: #c2c8d0;
    --bs-pagination-disabled-bg: #fbfbfc;
    --bs-pagination-disabled-border-color: #eceff3;
    gap: 4px;
}
.pagination .page-link { border-radius: 8px; font-size: 13.5px; }

/* ---------- 空状态 ---------- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8892a0;
}
.empty-state i { font-size: 52px; color: #d8dde5; display: block; margin-bottom: 14px; }
.empty-state .t { font-size: 16px; font-weight: 600; color: #5a6472; margin-bottom: 6px; }

/* ---------- PC 端筛选侧栏 ---------- */
.pc-sidebar {
    position: sticky;
    top: 84px;
    background: #fff;
    border-radius: var(--p-card-radius);
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    max-height: calc(100vh - 104px);
    overflow-y: auto;
}

/* 移动端隐藏 PC 侧栏，反之亦然 */
.only-mobile { display: block; }
.only-pc { display: none; }
@media (min-width: 992px) {
    .only-mobile { display: none !important; }
    .only-pc { display: block !important; }
}

/* 底部固定操作条（移动端） */
.mobile-bottom-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #eceff3;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    z-index: 1020;
    box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}
.page-with-bottom-bar { padding-bottom: 76px; }