/* ==========================================================
   二手手机回收报价 —— 移动端优先样式
   设计稿宽度 750px，1rem = 100px（纯 CSS 实现，不依赖 JS）
   ========================================================== */

:root {
    --main: #ff5100;
    --text: #333;
    --text-2: #666;
    --text-3: #999;
    --line: #ececec;
    --bg: #f6f7f9;
    --card: #fff;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    /* 750 设计稿：100 / 750 * 100 = 13.3333vw */
    font-size: 13.3333vw;
}

@media screen and (min-width: 750px) {
    html {
        font-size: 100px;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.28rem;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

@media screen and (min-width: 750px) {
    body {
        width: 750px;
        margin: 0 auto;
        box-shadow: 0 0 0.4rem rgba(0, 0, 0, .08);
        min-height: 100vh;
    }
}

/* ==========================================================
   报价图的显示宽度
   ----------------------------------------------------------
   每张报价图的原始宽度都不一样（583 ~ 1094px），所以不能在 CSS 里写死，
   由 PHP 把每张图的真实宽度以 --img-w 的形式传给下面这条规则。

   另外，Windows 默认的「显示缩放 125%」会让 1 个 CSS 像素占 1.25 个物理像素。
   图片如果按 CSS 像素原样显示，浏览器要把它拉宽 25% 再插值一遍，字就发虚。
   所以宽度算成「原始像素 ÷ 屏幕缩放」，保证任何缩放下都是物理 1:1。
   584 / 1.25 = 467.2 这种小数要保留，四舍五入又会差半个像素。
   ========================================================== */
:root {
    --dpr: 1;
}

@media screen and (min-resolution: 1.15dppx) and (max-resolution: 1.4dppx) {
    :root { --dpr: 1.25; }
}

@media screen and (min-resolution: 1.4dppx) and (max-resolution: 1.8dppx) {
    :root { --dpr: 1.5; }
}

@media screen and (min-resolution: 1.8dppx) {
    :root { --dpr: 2; }
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ---------- 顶部提示条 ---------- */
.topbar {
    background: #fff8f4;
    border-bottom: 1px solid #ffe6d9;
}

.topbar .tb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.16rem;
    padding: 0.14rem 0.24rem;
    font-size: 0.22rem;
    color: #a1573a;
}

/* 站点名只在电脑端出现，手机上保持原来的「一条提示」 */
.topbar .brand {
    display: none;
}

.topbar .tb-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .dot {
    display: inline-block;
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    background: #19b36b;
    margin-right: 0.1rem;
    vertical-align: middle;
}

.topbar .dot.stale {
    background: #f0a020;
}

.topbar .t-time {
    color: var(--main);
    font-weight: 600;
}

.topbar a.refresh {
    flex: none;
    padding: 0.06rem 0.18rem;
    border: 1px solid #ffd0b8;
    border-radius: 0.24rem;
    color: var(--main);
    background: #fff;
}

/* ---------- 轮播 ---------- */
.banner {
    position: relative;
    width: 100%;
    height: 2rem;
    overflow: hidden;
    background: #eee;
}

.banner .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}

.banner .slide.on {
    opacity: 1;
}

.banner .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.12rem;
    display: flex;
    justify-content: center;
    gap: 0.1rem;
}

.banner .dots i {
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.banner .dots i.on {
    background: #fff;
}

/* 首页 hero 的左侧文字：手机上不显示，保持原来「提示条 + 横幅」的样子 */
.hero-text {
    display: none;
}

/* 电脑端报价图按原始像素显示（平板和手机还是满宽，别让图缩成一小条）。
   每张图的宽度都不一样，PHP 会把真实宽度写成 --img-w。 */
@media screen and (min-width: 1024px) {
    .price-container .sheet img {
        width: calc(var(--img-w, 750px) / var(--dpr, 1));
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ---------- 分类列表 ---------- */
.products-wrapper {
    padding: 0.3rem 0 0.2rem;
}

.products-area {
    margin-bottom: 0.36rem;
}

.products-area .main-title {
    position: relative;
    text-align: center;
    font-size: 0.34rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.26rem;
}

.products-area .main-title::before,
.products-area .main-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1rem;
    height: 1px;
    background: #dcdcdc;
}

.products-area .main-title::before {
    left: 0.5rem;
}

.products-area .main-title::after {
    right: 0.5rem;
}

.products-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.products-list .item {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;   /* 关键：不加这个，长英文名（OPPO/Realme）会把格子撑开，一行只剩 3 个 */
    margin-bottom: 0.24rem;
}

.products-list .item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.06rem 0;
    transition: transform .12s ease;
}

.products-list .item-link:active {
    transform: scale(.94);
}

.products-list .item-icon {
    width: 1rem;
    height: 1rem;
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.22rem;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

.products-list .item-icon img {
    display: block;
    width: 0.78rem;
    height: 0.78rem;
}

.products-list .item-icon .ph {
    font-size: 0.44rem;
    font-weight: 700;
    color: var(--main);
    opacity: .8;
}

.products-list .item-text {
    font-size: 0.24rem;
    line-height: 1.45;
    text-align: center;
    color: var(--text-2);
    padding: 0 0.04rem;
    word-break: break-word;   /* 长名字宁可折行，也不撑破网格 */
}

/* ---------- 分类页 ---------- */
.nav-title {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.nav-title .goback {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.9rem;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-title .goback img {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
}

.nav-title #title {
    font-size: 0.32rem;
    font-weight: 600;
    color: var(--text);
    max-width: 5.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-container {
    width: 100%;
    background: #fff;
}

.price-container .sheet {
    width: 100%;
    background: #fff;
    min-height: 4rem;
    position: relative;
}

.price-container .sheet img {
    display: block;
    width: 100%;
    height: auto;
}

/* 图片加载中的骨架 */
.price-container .sheet.loading::after {
    content: "报价图加载中…";
    position: absolute;
    left: 0;
    right: 0;
    top: 2rem;
    text-align: center;
    font-size: 0.26rem;
    color: var(--text-3);
}

.price-container .sheet .tip {
    padding: 0.6rem 0.4rem 1rem;
    text-align: center;
    font-size: 0.26rem;
    color: var(--text-3);
    line-height: 1.8;
}

.price-foot {
    padding: 0.24rem 0.3rem 0.6rem;
    text-align: center;
    font-size: 0.22rem;
    color: var(--text-3);
    line-height: 1.9;
}

.price-foot strong {
    color: var(--main);
    font-weight: 600;
}

/* ---------- 回到顶部 ---------- */
.to-top {
    position: fixed;
    right: 0.3rem;
    bottom: 0.5rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--main);
    font-size: 0.3rem;
    z-index: 50;
}

.to-top.show {
    display: flex;
}

@media screen and (min-width: 750px) {
    .to-top {
        right: calc(50% - 375px + 0.3rem);
    }
}

/* ---------- 页脚 ---------- */
.site-foot {
    padding: 0.3rem 0.4rem 0.5rem;
    text-align: center;
    font-size: 0.22rem;
    color: #b5b5b5;
    line-height: 1.9;
}

/* ---------- 站点副标题 ---------- */
.site-desc {
    text-align: center;
    font-size: 0.26rem;
    color: var(--text-3);
    padding: 0.26rem 0.4rem 0.1rem;
    line-height: 1.6;
}

/* ---------- 底部信息（后台可填） ---------- */
.site-foot .foot-text {
    font-size: 0.22rem;
    color: #b5b5b5;
}

.site-foot .foot-contact {
    margin-top: 0.18rem;
    font-size: 0.24rem;
    color: var(--text-2);
}

.site-foot .foot-contact a {
    color: var(--main);
    margin-left: 0.1rem;
}

.site-foot .foot-contact .sep {
    color: #ddd;
    margin: 0 0.16rem;
}

/* ==========================================================
   电脑端（宽度 >= 1024px）
   ----------------------------------------------------------
   这一块只在电脑上生效，手机上完全不受影响：
   - 顶部固定白色导航条，左边是站点名
   - 首页：横幅 + 站点名并排，分类改成 8 列卡片
   - 分类页：左边一列「全部分类」，右边按原始像素显示报价图
   ========================================================== */

/* 分类页左侧导航 / 面包屑：手机上不显示 */
.cat-side,
.crumb {
    display: none;
}

@media screen and (min-width: 1024px) {

    html {
        font-size: 100px;
    }

    body {
        width: auto;
        margin: 0;
        background: #f3f4f6;
        box-shadow: none;
    }

    /* ---------- 顶部导航 ---------- */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 60;
        background: #fff;
        border-bottom: 1px solid #ebedf0;
        box-shadow: 0 1px 4px rgba(20, 24, 40, .05);
    }

    .topbar .tb-inner {
        max-width: 1400px;
        margin: 0 auto;
        height: 64px;
        padding: 0 28px;
        gap: 22px;
        font-size: 13px;
        color: #6f757e;
    }

    .topbar .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 1 auto;
        min-width: 0;
        font-size: 17px;
        font-weight: 700;
        color: #1f2430;
        letter-spacing: .2px;
    }

    .topbar .brand-mark {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: var(--main);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topbar .brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar .brand-mark .mark-ico {
        display: block;
        width: 17px;
        height: 17px;
    }

    .topbar .tb-status {
        flex: 0 1 auto;
        margin-left: 4px;
        color: #6f757e;
    }

    .topbar .refresh {
        flex: none;
        margin-left: auto;
        padding: 7px 16px;
        font-size: 13px;
        border-radius: 8px;
        border: 1px solid #e4e7eb;
        color: #3f4650;
        background: #fff;
        transition: color .15s, border-color .15s, background .15s;
    }

    .topbar .refresh:hover {
        color: var(--main);
        border-color: var(--main);
        background: #fff8f5;
    }

    /* ---------- 首页 hero ---------- */
    .hero {
        background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
        border-bottom: 1px solid #ebedf0;
    }

    .hero .hero-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 36px 28px 32px;
        display: flex;
        align-items: center;
        gap: 52px;
    }

    .hero-text {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .hero-text h1 {
        margin: 0 0 12px;
        font-size: clamp(22px, 2.2vw, 30px);
        line-height: 1.32;
        text-wrap: balance;
        font-weight: 700;
        color: #1a1e26;
        letter-spacing: .3px;
    }

    .hero-text .hero-desc {
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 1.75;
        color: #6b7280;
        max-width: 34em;
    }

    .hero-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-tags .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #e6e9ed;
        font-size: 13px;
        color: #4b5563;
    }

    .hero-tags a.tag:hover {
        border-color: var(--main);
        color: var(--main);
    }

    /* 横幅按原始比例显示，靠右放，不放大到全宽（放大会糊） */
    .hero .banner {
        flex: 0 1 720px;
        width: 720px;
        max-width: 100%;
        height: auto;
        aspect-ratio: 600 / 160;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(20, 24, 40, .11);
    }

    .hero .banner .dots {
        bottom: 10px;
    }

    /* 手机上的副标题行在电脑端由 hero 承担 */
    .site-desc {
        display: none;
    }

    /* ---------- 首页分类 ---------- */
    .products-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 34px 28px 12px;
    }

    .products-area {
        margin-bottom: 30px;
    }

    .products-area .main-title {
        text-align: left;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
        margin: 0 0 18px;
        padding-left: 12px;
        border-left: 4px solid var(--main);
    }

    .products-area .main-title::before,
    .products-area .main-title::after {
        display: none;
    }

    .products-list {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 14px;
    }

    .products-list .item {
        flex: none;
        max-width: none;
        min-width: 0;
        margin: 0;
        display: flex;
    }

    .products-list .item-link {
        flex: 1 1 auto;
        padding: 18px 8px 14px;
        background: #fff;
        border: 1px solid #eceff3;
        border-radius: 14px;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

    .products-list .item-link:hover {
        transform: translateY(-3px);
        border-color: #e0e5eb;
        box-shadow: 0 10px 24px rgba(20, 24, 40, .09);
    }

    .products-list .item-link:hover .item-text {
        color: var(--main);
    }

    .products-list .item-link:active {
        transform: translateY(-1px) scale(.99);
    }

    .products-list .item-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
        border-radius: 14px;
        background: #f5f6f8;
        box-shadow: none;
    }

    .products-list .item-icon img {
        width: 40px;
        height: 40px;
    }

    .products-list .item-icon .ph {
        font-size: 22px;
    }

    .products-list .item-text {
        font-size: 13px;
        line-height: 1.4;
    }

    /* ---------- 分类页 ---------- */
    .nav-title {
        display: none;
    }

    .cat-wrap {
        /* 整页宽度跟着报价图走：图多宽，这一页就多宽。
           不然窄图（比如 583px）配上 1400 的容器，右边会空出一大片。 */
        max-width: min(1400px, calc(var(--img-w, 900px) / var(--dpr, 1) + 292px));
        margin: 0 auto;
        padding: 24px 28px 56px;
        display: flex;
        align-items: flex-start;
        gap: 26px;
    }

    .cat-side {
        display: block;
        position: sticky;
        top: 88px;
        flex: 0 0 210px;
        width: 210px;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        padding: 10px;
        background: #fff;
        border: 1px solid #eceff3;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(20, 24, 40, .04);
    }

    .cat-side .side-hd {
        padding: 4px 10px 10px;
        font-size: 12px;
        letter-spacing: .5px;
        color: #8d939b;
    }

    .cat-side .side-group {
        padding: 12px 10px 6px;
        font-size: 11px;
        color: #9aa1aa;
        letter-spacing: .3px;
    }

    .cat-side a.side-item {
        display: block;
        padding: 7px 10px;
        border-radius: 8px;
        font-size: 13px;
        color: #4b5563;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background .13s, color .13s;
    }

    .cat-side a.side-item:hover {
        background: #f4f5f7;
        color: #1f2430;
    }

    .cat-side a.side-item.on {
        background: var(--main);
        color: #fff;
        font-weight: 600;
    }

    .cat-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .crumb {
        display: block;
        align-self: stretch;
        margin: 0 0 14px;
        font-size: 13px;
        color: #8b919a;
    }

    .crumb a:hover {
        color: var(--main);
    }

    .crumb .sp {
        margin: 0 8px;
        color: #ccd1d7;
    }

    .crumb strong {
        color: #2b3038;
        font-weight: 600;
    }

    /* 白色卡片按图片宽度收边：图片多宽，卡片就多宽 */
    .cat-main .price-container {
        width: fit-content;
        min-width: 340px;
        max-width: 100%;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(20, 24, 40, .08);
    }

    .cat-main .price-container .sheet {
        min-height: 0;
    }

    .cat-main .price-foot {
        align-self: stretch;
    }

    /* ---------- 回到顶部 ---------- */
    .to-top {
        right: 28px;
        bottom: 28px;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    /* ---------- 页脚 ---------- */
    .site-foot {
        max-width: 1400px;
        margin: 0 auto;
        padding: 26px 28px 46px;
        font-size: 12px;
    }

    .site-foot .foot-text {
        font-size: 12px;
    }

    .site-foot .foot-contact {
        margin-top: 8px;
        font-size: 13px;
    }
}

/* 超宽屏也不再增加列数：容器最宽 1400px，8 列每格约 165px，
   再多列反而会把每行切得很碎（有些分组只有 7 个） */

/* ---------- 键盘焦点 ---------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--main);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 小一点儿的电脑屏（1024~1199）：8 列太挤，长名字会断成两行，改 6 列 */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .products-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ============================================================
   网页报价表（照源站那张报价图的版式）
   - 一整张黑框表格，型号列纵向合并、底色由后台 price_model_bg 控制
   - 数字是真文字：多宽都清楚，手机可左右滑
   ============================================================ */
.psheet {
    display: block;
    width: 100%;
    max-width: min(980px, 100%);
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #333;
    border-radius: 2px;
}

.psheet-hd {
    padding: 9px 12px;
    border-bottom: 1px solid #333;
    font-size: 13px;
    line-height: 1.5;
    color: #c00;
    text-align: center;
}

.psheet-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.psheet-tbl {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
    table-layout: fixed;
}

.psheet-tbl th,
.psheet-tbl td {
    border: 1px solid #333;
    text-align: center;
    font-size: 13px;
    padding: 7px 4px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psheet-tbl thead th {
    background: #f2f2f2;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.35;
}

.psheet-tbl .c-model { width: 13%; }
.psheet-tbl .c-code  { width: 11%; }
.psheet-tbl .c-cap   { width: 9%; }

.psheet-tbl td.mcol {
    background: var(--model-bg, #f7ebc0);
    color: var(--model-fg, #111);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: normal;
}

.psheet-tbl td.ccode {
    font-size: 12px;
    color: #444;
}

.psheet-tbl td.cpv {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.psheet-tbl td.cpv-no {
    color: #b9bfc7;
    font-weight: 400;
}

.psheet-note {
    border-top: 1px solid #333;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.9;
    color: #333;
}

.psheet-note p {
    margin: 0 0 4px;
}

.psheet-note p:last-child {
    margin: 0;
}

.psheet-note b {
    font-weight: 600;
    margin-right: 6px;
}

.psheet-note .nt-k {
    display: inline-block;
    color: var(--main);
    margin-right: 6px;
}

/* 手机：表格压窄一点，少滑一截；备注正常换行不被裁 */
.cat-main, .price-container { width: 100%; max-width: 100%; min-width: 0; }

@media screen and (max-width: 560px) {
    /* 手机：不横滑，直接压缩到一屏能看完
       —— 网络型号这列对看价最不重要，小屏上藏掉；
          价格列字号降到 11.5px，5 位数也放得下 */
    .psheet {
        border-left: none;
        border-right: none;
    }

    .psheet-tbl {
        min-width: 0;
    }

    .psheet-tbl th,
    .psheet-tbl td {
        font-size: 11.5px;
        padding: 6px 1px;
    }

    .psheet-tbl thead th {
        font-size: 11px;
    }

    .psheet-tbl .c-code {
        width: 0;
        padding: 0;
        border: none;
        display: none;
    }

    .psheet-tbl .c-model {
        width: 17%;
    }

    .psheet-tbl .c-cap {
        width: 10%;
    }

    .psheet-tbl td.mcol {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .psheet-hd {
        font-size: 11.5px;
        padding: 7px 8px;
    }

    .psheet-note {
        font-size: 11.5px;
        padding: 8px 9px;
        line-height: 1.8;
    }
}