/* 图册样式：配色参照小程序（深色导航 #1A1A1A / 米底 #F8F6F3 / 金 #C2A85C） */

:root{
  --ink:#1f1d1a; --ink-2:#4a453f; --ink-3:#8a827a;
  --paper:#f8f6f3; --card:#ffffff; --line:#e9e4dc;
  --gold:#c2a85c; --gold-dark:#a58c46; --gold-soft:#f6efe0;
  --ok:#2f6b45; --bad:#a03327;
  --radius:12px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 关键：下面几个覆盖层用 display:flex 布局，优先级高于 [hidden] 的 UA 样式
   ⇒ 必须显式兜底，否则 hidden 属性形同虚设（无效页会一直盖在最上层）。 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.5;
  padding-bottom:56px; /* 给底栏留位 */
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}

/* ── 品牌区 ── */
.brand{background:#1a1a1a;color:#fff;padding:26px 18px 22px;text-align:center}
.brand-name{font-size:22px;font-weight:700;letter-spacing:2px}
.brand-en{font-size:11px;color:var(--gold);letter-spacing:4px;margin-top:4px}
.brand-agent{
  margin-top:10px;display:inline-block;font-size:12px;color:#1a1a1a;
  background:var(--gold);border-radius:999px;padding:3px 12px;
}

/* ── 搜索 ── */
.searchbar{display:flex;align-items:center;gap:8px;background:var(--card);
  margin:12px 12px 0;border-radius:999px;padding:9px 14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.searchbar .ico-search{font-size:13px;opacity:.5}
.searchbar input{flex:1;border:0;outline:none;background:transparent;font-size:14px}

/* ── 主体两栏 ── */
.layout{display:flex;align-items:flex-start;gap:10px;padding:12px}
/* 左侧分类：右侧商品滚动时**跟随固定**（sticky），不跟着滚走 */
/* 高度留够：底部要给固定底栏（54px）让位，否则吸底的「收起」会被底栏盖住（只露半截） */
.cats{width:88px;flex:none;align-self:flex-start;position:sticky;top:12px;
  background:var(--card);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);max-height:calc(100vh - 130px);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.cats .cat{padding:11px 6px;font-size:12.5px;line-height:1.35;color:var(--ink-2);text-align:center;
  border-bottom:1px solid var(--line);cursor:pointer;word-break:break-word;hyphens:auto}
.cats .cat:last-child{border-bottom:0}
.cats .cat.active{background:var(--gold-soft);color:var(--gold-dark);font-weight:600}

.goods{flex:1;min-width:0}
.goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

/* ── 商品卡 ── */
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  position:relative;display:flex;flex-direction:column}
.card .pic{position:relative;background:#f2efe9;aspect-ratio:1/1;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.card .badge{position:absolute;left:0;top:0;background:rgba(0,0,0,.62);color:#fff;
  font-size:10px;padding:2px 6px;border-bottom-right-radius:6px}
.card .fav{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;color:var(--ink-3)}
.card .fav.on{color:var(--bad)}
.card .info{padding:8px 9px 10px}
.card .name{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .code{font-size:11px;color:var(--ink-3);margin-top:3px}

/* 色卡角标 —— 只显示颜色 */
.tag{display:inline-block;font-size:11px;line-height:1;padding:4px 8px;border-radius:4px;
  color:#fff;margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.empty{padding:40px 12px;text-align:center;color:var(--ink-3);font-size:13px}

/* ── 底栏 ── */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:54px;background:var(--card);
  border-top:1px solid var(--line);display:flex;align-items:center;z-index:20}
.tab{flex:1;height:100%;display:flex;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-3);font-size:13px;position:relative}
.tab.active{color:var(--gold)}
.tab .badge{position:absolute;top:8px;margin-left:16px;background:var(--bad);color:#fff;
  font-size:10px;font-style:normal;min-width:16px;height:16px;border-radius:8px;padding:0 4px;
  display:flex;align-items:center;justify-content:center}
.tab.contact{color:var(--gold-dark)}

/* ── 覆盖层（详情 / 收藏） ── */
.detail,.fav-page{position:fixed;inset:0;background:var(--paper);z-index:30;
  display:flex;flex-direction:column}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#1a1a1a;color:#fff;padding:12px 14px}
.detail-title{font-size:15px;flex:1;min-width:0;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 返回按钮：禁止换行 + 不被压缩（「‹ 返回」曾被挤成两行） */
.back{color:#fff;font-size:14px;white-space:nowrap;flex:none;padding:2px 4px}
.fav-toggle{flex:none}
.fav-toggle{color:var(--gold);font-size:19px;line-height:1}
.detail-body,.fav-body{flex:1;overflow-y:auto;padding:12px}
.detail-foot,.fav-foot{display:flex;gap:10px;padding:10px 12px;background:var(--card);border-top:1px solid var(--line)}
.btn-fav,.btn-copy,.btn-clear,.btn-contact{
  flex:1;text-align:center;border-radius:999px;padding:11px 12px;font-size:14px}
.btn-fav{background:var(--gold-soft);color:var(--gold-dark);border:1px solid var(--gold)}
.btn-copy{background:var(--gold);color:#fff}
.btn-clear{border:1px solid var(--line);color:var(--ink-2);flex:0 0 92px}
.btn-contact{background:var(--ok);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center}
.tip{padding:0 14px 16px;color:var(--ink-3);font-size:12px;margin:0}

/* 详情内容 */
.d-pic{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-bottom:10px}
.d-pic img{width:100%;display:block}
.d-block{background:var(--card);border-radius:var(--radius);border:1px solid var(--line);
  padding:12px 14px;margin-bottom:10px}
.d-block h3{font-size:13.5px;margin:0 0 8px;color:var(--ink)}
.d-name{font-size:16px;font-weight:600}
.d-code{font-size:12px;color:var(--ink-3);margin-top:3px}
.d-desc{font-size:13px;color:var(--ink-2);white-space:pre-wrap}
.d-params{width:100%;border-collapse:collapse;font-size:12.5px}
.d-params td{border-bottom:1px solid var(--line);padding:6px 0}
.d-params td:first-child{color:var(--ink-3);width:38%}
.d-params tr:last-child td{border-bottom:0}
.d-line{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--line)}
.d-line:last-child{border-bottom:0}

/* 收藏清单 */
.f-item{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:9px;margin-bottom:8px}
.f-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#f2efe9;flex:none}
.f-info{flex:1;min-width:0}
.f-info .n{font-size:13px}
.f-info .c{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.f-qty{display:flex;align-items:center;gap:8px;font-size:13px}
.f-qty button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);color:var(--ink-2)}
.f-del{color:var(--ink-3);font-size:12px;padding-left:6px}

/* 无效链接 */
.invalid{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:40}
.invalid-box{text-align:center;padding:24px}
.invalid-box h2{font-size:17px;margin:0 0 8px}
.invalid-box p{color:var(--ink-3);font-size:13px;margin:0}

/* ── 轻提示 ── */
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  background:rgba(31,29,26,.92);color:#fff;font-size:13px;padding:8px 16px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}