/* ==========================================================================
   孤伤的小站 · 前台视觉主题
   覆盖 Cartoon 默认样式：画布式背景 / 实心纸感卡片 / 价签式商品卡
   放在 /assets/cache/ 下，随数据卷持久化。
   ========================================================================== */

:root {
    /* 墨与纸 */
    --ink: #1e2038;
    --ink-2: #454962;
    --muted: #8b90a8;
    --line: rgba(30, 32, 56, .09);
    --line-2: rgba(30, 32, 56, .14);
    --paper: #ffffff;

    /* 樱（主色，只用在钱与强调上） */
    --rose: #dd5c85;
    --rose-deep: #bf4066;
    --rose-tint: #fdf1f5;

    /* 阴影：带靛调，不用纯黑 */
    --shadow-1: 0 1px 2px rgba(30, 32, 56, .04), 0 8px 22px -14px rgba(30, 32, 56, .28);
    --shadow-2: 0 2px 6px rgba(30, 32, 56, .06), 0 22px 44px -24px rgba(30, 32, 56, .40);

    --r-lg: 20px;
    --r-md: 16px;
    --r-sm: 11px;

    /* 覆盖主题自带的变量，让其它页面（商品详情/订单查询）自动同色 */
    --acg-primary: #1e2038;
    --acg-secondary: #454962;
    --acg-danger: #dd5c85;
    --acg-text-strong: #1e2038;
    --acg-text-muted: #8b90a8;
    --acg-card-bg: #ffffff;
    --acg-border: rgba(30, 32, 56, .09);
}

/* 老浏览器没有毛玻璃：退回不透明，别让字糊在背景上 */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {

    .panel,
    .notice-strip,
    .acg-card,
    .chip {
        background: #fff;
    }

    .panel-header {
        background: #fcfcfe;
    }

    .acg-card > .p-3 > .stat-row.mb-1,
    .acg-card > .p-3 > .stat-bottom {
        background: var(--rose-tint);
    }
}

/* ---------- 画布：背景图退到内容之后，加一层薄雾保证可读 ---------- */

html,
body {
    background-color: transparent;
}

body {
    background-image: none !important; /* 干掉主题的旧背景写法 */
    min-height: 100vh;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 背景压一层淡影，白色卡片压在上面；焦点略偏上，落在画面主体与光晕上 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-position: center 42%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .55;
}

/* ---------- 顶栏 ---------- */

.navbar-acg {
    position: sticky;
    top: 0;
    padding: 10px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px -26px rgba(30, 32, 56, .9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar-acg .navbar-brand {
    font-size: 16px;
    gap: 10px;
    padding: 0;
}

.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    object-fit: cover;
    background: #f4f5f9;
    box-shadow: inset 0 0 0 1px var(--line-2), 0 3px 10px -4px rgba(30, 32, 56, .45);
}

.navbar-acg .brand-name {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .04em;
}

.navbar-acg .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}

.navbar-acg .nav-link .nav-icon {
    margin-right: 6px;
    font-size: 14px;
}

.navbar-acg .nav-link:hover {
    color: var(--ink);
    background: #f4f5f9;
}

.navbar-acg .nav-link.active {
    color: var(--ink);
    font-weight: 700;
    background: #f1f2f8;
}

/* 只在折叠态出现：lg 以上由 Bootstrap 隐藏，这里补回显式声明避免覆盖它 */
@media (min-width: 992px) {
    .navbar-acg .navbar-toggler {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .navbar-acg .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 34px;
        padding: 0;
        background-color: #f5f6fa;
        border: 1px solid rgba(30, 32, 56, .14);
        border-radius: 10px;
        box-shadow: none;
    }
}

.navbar-acg .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(221, 92, 133, .16);
}

/* 汉堡图标：直接用主题已打包的字体图标，不依赖背景图 */
.navbar-acg .navbar-toggler-icon {
    display: none;
}

.navbar-acg .navbar-toggler i {
    font-size: 15px;
    line-height: 1;
    color: #1e2038;
}

/* ---------- 搜索 ---------- */

.search-input .input-group {
    flex-wrap: nowrap;
    background: #f6f7fa;
    border: 1px solid transparent;
    border-radius: 999px;
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.search-input .input-group:focus-within {
    background: var(--paper);
    border-color: rgba(221, 92, 133, .45);
    box-shadow: 0 0 0 3px rgba(221, 92, 133, .13);
}

.search-input .input-group-text {
    padding: 0 4px 0 14px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 13px;
}

.search-input .form-control {
    padding: 8px 16px 8px 8px;
    background: transparent;
    border: 0;
    box-shadow: none !important;
    font-size: 13px;
    color: var(--ink);
}

.search-input .form-control::placeholder {
    color: var(--muted);
}

.item-search-input {
    min-width: 210px;
}

/* ---------- 公告条（比面板轻一档，不跟商品抢视线） ---------- */

.notice-strip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, .55);
    border-left: 3px solid var(--rose);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
}

.notice-strip .notice-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--rose);
    font-size: 15px;
    line-height: 1.6;
}

.notice-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.notice-label {
    flex: 0 0 auto;
    color: var(--rose-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
}

.notice-text {
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.7;
    word-break: break-word;
}

.notice-text p {
    margin: 0;
}

/* ---------- 面板 ---------- */

.panel {
    background: rgba(255, 255, 255, .38);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* 默认主题的毛玻璃层：现在面板已是不透明纸面，去掉它 */
.panel::before {
    display: none;
}

.panel + .panel {
    margin-top: 18px;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 15px 20px;
    background: rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    box-shadow: none;
}

.panel-header .icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--rose-tint);
    color: var(--rose-deep);
    font-size: 13px;
    line-height: 1;
}

.panel-title {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}

.panel-body {
    padding: 18px 20px 20px;
    color: var(--ink-2);
    font-size: 13px;
}

/* ---------- 分类 ---------- */

.cat-row {
    margin-bottom: 16px;
}

.chip-list {
    gap: 8px;
    padding: 0;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 11px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color .18s ease, color .18s ease,
        border-color .18s ease, transform .18s ease;
}

.chip .chip-icon {
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(30, 32, 56, .1);
}

.chip.is-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.chip.is-primary .chip-icon {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

/* ---------- 商品卡 ---------- */

.item-list {
    --bs-gutter-x: 20px;
}

.item-list > a {
    color: inherit;
    text-decoration: none;
}

.acg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 卡片是浮在玻璃面板上的第二层玻璃，这里不再单独 blur（嵌套 backdrop-filter 会失效） */
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1),
        box-shadow .22s ease, border-color .22s ease;
}

.acg-thumb {
    height: auto;
    aspect-ratio: 4 / 3;
    /* 商品图完整显示：不裁切，四周留白；图源多为白底方图，所以底色用白 */
    background-color: #fff !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.acg-card > .p-3 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.tags {
    gap: 6px;
    margin-bottom: 8px;
}

.badge-soft {
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.badge-soft-success {
    background: #eef8f2;
    border-color: rgba(58, 167, 109, .22);
    color: #2f8f5c;
}

.badge-soft-primary {
    background: #eef0fb;
    border-color: rgba(90, 104, 200, .22);
    color: #4a5699;
}

.badge-soft-danger {
    background: #fdeef1;
    border-color: rgba(191, 64, 102, .22);
    color: var(--rose-deep);
}

.badge-soft-muted {
    background: #f3f4f8;
    border-color: var(--line-2);
    color: var(--ink-2);
}

.goods-title {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
    min-height: 3em;
}

/* 价签：价格与库存压在同一条底色上，卡片底部收成一条完整横带 */
.acg-card > .p-3 > .stat-row.mb-1 {
    margin: auto -1rem 0 -1rem !important;
    padding: 12px 1rem 2px;
    background: rgba(253, 241, 245, .5);
    border-top: 1px solid rgba(221, 92, 133, .16);
}

.acg-card > .p-3 > .stat-bottom {
    margin: 0 -1rem;
    padding: 0 1rem 12px;
    background: rgba(253, 241, 245, .5);
    border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px);
    color: #a87c8f;
    font-size: 11.5px;
}

/* 卡上只保留库存，去掉「已售」那一格（模板由 JS 生成，这里用样式收掉） */
.acg-card .stat-bottom > span:last-child:not(:first-child) {
    display: none;
}

.price {
    display: inline-flex;
    align-items: baseline;
    color: var(--rose-deep);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.price .unit {
    margin-right: 2px;
    color: var(--rose);
    font-size: 13px;
    font-weight: 700;
}

.acg-card.soldout {
    filter: none;
    opacity: .72;
}

.acg-card.soldout:hover {
    transform: none;
    box-shadow: var(--shadow-1);
}

.soldout-ribbon {
    top: 14px;
    left: -40px;
    padding: 4px 48px;
    background: linear-gradient(90deg, #6d7288, #454962);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    box-shadow: 0 6px 16px -8px rgba(30, 32, 56, .8);
}

/* 数量选择器：主题里那套硬编码粉色拉回主色体系 */
.input-group.qty-group {
    gap: 10px;
    padding: 5px 6px;
    background: #fbfbfd;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    box-shadow: none;
}

.input-group.qty-group > button {
    width: 30px;
    height: 26px;
    border-radius: 9px;
    background: var(--ink);
    box-shadow: none;
}

.input-group.qty-group > button:hover {
    background: var(--rose);
    filter: none;
}

.input-group.qty-group > input[type="number"] {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 加载 / 空状态 */
.item-message {
    margin: 0;
    padding: 44px 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ---------- 页脚 ---------- */

footer {
    padding: 26px 16px 34px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    letter-spacing: .02em;
}

footer a {
    color: var(--muted);
    text-decoration: none;
}

footer a:hover {
    color: var(--ink-2);
}

/* ---------- 动效 ---------- */

@media (hover: hover) and (pointer: fine) {
    .acg-card:hover {
        transform: translateY(-3px);
        border-color: var(--line-2);
        box-shadow: var(--shadow-2);
    }

    .acg-card:hover .acg-thumb {
        transform: scale(1.045);
    }

    .chip:hover {
        transform: translateY(-1px);
        border-color: var(--line-2);
    }

    .chip.is-primary:hover {
        border-color: var(--ink);
    }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes acg-rise {
        from {
            opacity: 0;
            transform: translateY(7px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .notice-strip,
    .panel {
        animation: acg-rise .34s cubic-bezier(.2, .7, .3, 1) both;
    }

    .panel {
        animation-delay: .06s;
    }
}

/* 键盘焦点可见 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
}

/* ---------- 窄屏 ---------- */

@media (max-width: 991.98px) {
    .search-input .input-group {
        width: 100%;
    }

    .navbar-acg .navbar-collapse {
        padding-top: 10px;
    }

    .navbar-acg .navbar-nav {
        gap: 2px;
        margin-bottom: 6px;
    }
}

/* 手机：一屏两列 */
@media (max-width: 767.98px) {
    .item-list > a.col-12 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .panel-body {
        padding: 14px 15px 16px;
    }

    .panel-header {
        padding: 13px 15px;
    }

    .notice-strip {
        padding: 12px 15px;
        margin-bottom: 14px;
    }

    .item-list {
        --bs-gutter-x: 12px;
    }

    .item-message {
        padding: 30px 0;
    }

    /* 窄卡片：封面改方形（和方图一致），文字整体收一档 */
    .acg-thumb {
        aspect-ratio: 1 / 1;
    }

    .acg-card .tags {
        gap: 4px;
        margin-bottom: 6px;
    }

    .acg-card .badge-soft {
        padding: 2px 6px;
        font-size: 10px;
    }

    .acg-card .goods-title {
        font-size: 12.5px;
        min-height: 2.8em;
    }

    .acg-card > .p-3 > .stat-row.mb-1 {
        padding: 9px 1rem 2px;
    }

    .acg-card .price {
        font-size: 17px;
    }

    .acg-card .price .unit {
        font-size: 11px;
    }

    .acg-card > .p-3 > .stat-bottom {
        font-size: 10.5px;
        padding-bottom: 10px;
    }
}

/* ==========================================================================
   手机端底部导航：液态玻璃滑动胶囊
   移植自 WeKit-gs1314（Kyant0/AndroidLiquidGlass 系）
   两层玻璃各挂 backdrop-filter —— 不能嵌套，嵌套会让内层只blur到父层的纯色
   ========================================================================== */

.zf-tabbar {
    display: none;
}

@media (max-width: 991.98px) {

    /* 给底部栏让位 */
    body {
        padding-bottom: 96px;
    }

    /* 顶栏那排链接已经搬到下面的胶囊栏，汉堡键收起（免得同一组入口出现两次） */
    .navbar-acg .navbar-toggler,
    .navbar-acg .navbar-collapse {
        display: none !important;
    }

    .zf-tabbar {
        --zf-h: 64px;
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        height: var(--zf-h);
        padding: 4px;
        z-index: 900;
        border-radius: 999px;
        background: transparent;
        transition: transform .32s cubic-bezier(.22, 1, .36, 1);
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* 栏体玻璃 */
    .zf-tabbar__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        background: rgba(248, 246, 251, .45);
        backdrop-filter: blur(8px) saturate(1.5);
        -webkit-backdrop-filter: blur(8px) saturate(1.5);
        box-shadow:
            0 12px 28px -16px rgba(30, 32, 56, .5),
            inset 0 1px 0 rgba(255, 255, 255, .9),
            inset 0 -1px 0 rgba(30, 32, 56, .06);
        transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    }

    /* 按下时整块玻璃也涨一点点（源码 lerp(1f, 1f + 16dp/width, pressProgress)） */
    .zf-tabbar.is-pressed .zf-tabbar__bg {
        transform: scale(1.04);
    }

    /* 滑动胶囊：外层管位移，内层管形变 */
    .zf-tabbar__slide {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        z-index: 0;
        border-radius: 999px;
        pointer-events: none;
        will-change: transform;
    }

    .zf-tabbar__pill {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: rgba(255, 255, 255, .5);
        backdrop-filter: blur(10px) saturate(1.6);
        -webkit-backdrop-filter: blur(10px) saturate(1.6);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .95),
            inset 0 -1px 0 rgba(30, 32, 56, .05),
            0 2px 8px -2px rgba(30, 32, 56, .22);
        transform-origin: center center;
        will-change: transform;
    }

    /* 按住：玻璃里侧压出内阴影 */
    .zf-tabbar.is-pressed .zf-tabbar__pill {
        box-shadow:
            inset 0 0 8px rgba(0, 0, 0, .15),
            inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .zf-tabbar__item {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        color: var(--muted);
        font-size: 10.5px;
        line-height: 1.15;
        letter-spacing: .02em;
        text-decoration: none;
        transition: color .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
    }

    .zf-tabbar__item i {
        font-size: 19px;
        line-height: 1;
    }

    .zf-tabbar__item.is-active {
        color: var(--rose-deep);
    }

    /* 选中项在按下时放大到 1.2（源码 tabScale = lerp(1f, 1.2f, pressProgress)） */
    .zf-tabbar.is-pressed .zf-tabbar__item.is-active {
        transform: scale(1.2);
    }

    /* 不支持毛玻璃：退回半透明实心，别让字糊在背景上 */
    @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
        .zf-tabbar__bg {
            background: rgba(255, 255, 255, .92);
        }

        .zf-tabbar__pill {
            background: #fff;
        }
    }
}

/* ==========================================================================
   手机端横向分页：购物 / 订单查询 两屏平移（微信那种切 tab）
   ========================================================================== */

.zf-pane + .zf-pane {
    display: none;          /* 桌面端不显示第二屏，查询走独立页面 */
}

@media (max-width: 991.98px) {

    /* 裁切层：overflow 放这里，body 上不加，免得顶栏 sticky 失效 */
    .zf-pager-clip {
        overflow: hidden;
    }

    .zf-pager {
        display: flex;
        width: 200%;            /* 两屏 */
        align-items: flex-start;
        will-change: transform;
        touch-action: pan-y;    /* 竖向滚动交还浏览器，横向自己接管 */
    }

    .zf-pane {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        min-width: 0;
    }

    .zf-pane + .zf-pane {
        display: block;
    }
}