/*
 * frontend.css — 前台通用样式修补
 * 引入位置：bootstrap.min.css 之后（用 !important 覆盖 Bootstrap 默认行为）
 */

/* ============================================================
 * 顶部栏（.navbar-main）
 * 问题：Bootstrap 的 .navbar > .container 是 flex-wrap: inherit，
 *       站点名过长时会把「购物车 / 订单 / 个人中心」挤到第二行。
 * 处理：整行不换行，站名单行省略号显示，按钮固定不压缩。
 * ============================================================ */
.navbar-main > .container {
    flex-wrap: nowrap !important;
}

/* 站名：单行 + 超长省略号（改成 block 才能让 text-overflow 生效） */
.navbar-main .navbar-brand {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
    /* 各页面内联 <style> 里写了固定 1.35rem，这里必须 !important 才能生效 */
    font-size: clamp(1rem, 4.6vw, 1.35rem) !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* logo 与站名同行、垂直居中、不参与压缩 */
.navbar-main .navbar-brand > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}
.navbar-main .navbar-brand > img {
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

/* 右侧操作区：固定宽度、不换行、不被挤压 */
.navbar-main .ms-auto {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* 极窄屏：进一步压缩按钮，给站名留空间 */
@media (max-width: 380px) {
    .navbar-main .ms-auto {
        gap: 6px !important;
    }
    .navbar-main .ms-auto .btn {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.75rem;
    }
}