/* 店铺前端样式 —— 韩系简约风：浅米白背景、无边框卡片、柔和阴影、黑灰主色 + 红色价格 */

:root {
  --tb: #111111;          /* 主色：近黑（按钮/强调），替代淘宝橙 */
  --tb-dark: #000000;
  --tb-soft: #f4f4f4;     /* 柔和强调底 */
  --ink: #161616;         /* 主文字 */
  --sub: #8a8a8a;         /* 次要文字（更浅，韩系常用浅灰） */
  --line: #efefef;        /* 极浅分隔线 */
  --panel: #f7f7f7;       /* 浅灰面板 */
  --price: #e3403a;       /* 价格红（韩系折扣价常用） */
  --price-soft: #fdecec;  /* 价格红浅底 */
  --ok: #2f9e6e;
  --blue: #185fa5;
  --bg: #fafafa;          /* 页面浅米白背景 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

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

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
}
.topbar .inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 20px;
  /* flex-wrap + search 的 flex-basis：窄视口下搜索框换行到第二排，
     而不是把右侧导航挤出容器（原来会出现整页横向滚动、My Orders 看不见） */
  display: flex; align-items: center; gap: 16px; row-gap: 10px; flex-wrap: wrap;
}
.logo { font-size: 20px; font-weight: 700; color: var(--ink); white-space: nowrap; letter-spacing: .3px; flex: 0 0 auto; }
.logo small { display: block; font-size: 10px; color: var(--sub); font-weight: 400; letter-spacing: .5px; }

/* 返回按钮 */
.back-btn {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 20px;
  background: #fff; color: var(--sub); font-size: 13px; line-height: 1;
}
.back-btn .arrow { font-size: 20px; line-height: 1; transform: translateY(-1px); }
.back-btn:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 640px) {
  .back-btn .back-label { display: none; }
}

/* 上限 460px：再宽就会把「币种/语言」切换器挤到第二排（顶栏一行放得下的前提下） */
.search { flex: 1 1 260px; display: flex; max-width: 460px; min-width: 170px; }
.search input {
  flex: 1; padding: 10px 18px; font: inherit;
  border: 1px solid var(--line); border-right: 0;
  border-radius: 4px 0 0 4px; outline: none; background: #f7f7f7;
  transition: background .15s, border-color .15s;
}
.search input:focus { background: #fff; border-color: var(--ink); }
.search button {
  padding: 0 26px; background: var(--tb); color: #fff; border: 0;
  border-radius: 0 4px 4px 0; font-weight: 500;
}
.search button:hover { background: var(--tb-dark); }

.navlinks { display: flex; gap: 18px; font-size: 13px; color: var(--sub); margin-left: auto; flex: 0 0 auto; }
.navlinks a:hover { color: var(--ink); }
.navlinks .cart-dot {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  background: var(--price); color: #fff; border-radius: 8px;
  font-size: 11px; line-height: 16px; text-align: center;
}

/* 语言切换器 + 币种切换器（靠 navlinks 的 margin-left:auto 推到右边，自己不抢剩余空间） */
.cur-slot { display: flex; align-items: center; flex: 0 0 auto; }
.lang-slot { display: flex; align-items: center; }
.lang-sel, .cur-sel {
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px;
  font: inherit; font-size: 12px; color: var(--sub); background: #fff; cursor: pointer;
  outline: none;
}
.lang-sel:hover, .cur-sel:hover { border-color: var(--ink); color: var(--ink); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }

/* ---------------- 首页筛选条 ---------------- */

.filters {
  /* 左右两组：左边分类、右边排序。原来的做法是在中间塞一个 margin-left:auto 的空
     span，一换行排序就落在第一排末尾、看着像断了半截。 */
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  justify-content: space-between;
  padding: 4px 0 18px; background: transparent; margin-bottom: 6px;
}
.filters .f-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .f-right { margin-left: auto; }
.filters .lbl { font-size: 12px; color: var(--sub); margin-right: 2px; }
.pill {
  padding: 6px 16px; border-radius: 20px; border: 1px solid var(--line);
  background: #fff; font-size: 13px; color: var(--sub);
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.filters select {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px;
  background: #fff; font: inherit; font-size: 13px; color: var(--sub);
}

/* ---------------- 商品网格 ---------------- */

.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  border: 1px solid transparent; border-radius: 12px; overflow: hidden;
  background: #fff; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.card .pic { position: relative; aspect-ratio: 3/4; background: var(--panel); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.card:hover .pic img { transform: scale(1.04); }
.card .pic img, .gallery .stage img, .row-item img, .thumb, .swatch img {
  background: #f0efed; /* 懒加载未完成时的占位底色，避免布局抖动 */
}
.card .vtag {
  position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
}
/* 主图上的尺码提示 */
.card .szhint {
  position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.5); color: #fff;
  font-size: 10px; padding: 3px 9px; border-radius: 10px; letter-spacing: .3px;
}
.card .body { padding: 13px 14px 16px; }
.card .t {
  font-size: 13px; line-height: 1.5; height: 39px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--ink); font-weight: 400;
}
.card .p { margin-top: 8px; color: var(--price); font-size: 18px; font-weight: 600; }
.card .p small { font-size: 12px; }
.card .m { margin-top: 3px; font-size: 11px; color: var(--sub); display: flex; gap: 8px; }
.card .m .sold { margin-left: auto; }

.empty { padding: 80px 20px; text-align: center; color: var(--sub); }
.empty b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 8px; }

/* ---------------- 商品详情页（淘宝式） ---------------- */

.crumb { font-size: 12px; color: var(--sub); margin-bottom: 14px; }
.crumb a:hover { color: var(--tb); }

.detail { display: grid; grid-template-columns: 400px 1fr; gap: 28px; align-items: start; }

@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; }
}

.gallery .stage {
  aspect-ratio: 3/4; background: var(--panel); border-radius: 6px; overflow: hidden;
  position: relative;
}
/* 主图轨道：原生横向滚动 + 吸附，手机手指滑、桌面箭头/缩略图/方向键 */
.gallery .track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery .track::-webkit-scrollbar { display: none; }
.gallery .slide {
  flex: 0 0 100%; height: 100%; scroll-snap-align: start;
}
.gallery .slide img, .gallery .slide video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 两侧箭头：桌面 hover 才出现，手机上直接滑动所以隐藏 */
.gnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 19px; line-height: 1; display: grid; place-items: center;
  cursor: pointer; opacity: 0; transition: opacity .18s; z-index: 3;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.gallery .stage:hover .gnav { opacity: 1; }
.gnav.prev { left: 10px; }
.gnav.next { right: 10px; }
.gnav:hover { background: #fff; }
.gcount {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 11px;
  padding: 3px 9px; border-radius: 10px; letter-spacing: .3px;
}
.gallery .thumbs {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scrollbar-width: none;   /* 图多时横向滑，不换行撑高 */
}
.gallery .thumbs::-webkit-scrollbar { display: none; }
.gallery .thumb { flex: 0 0 auto; }
.gallery .thumb {
  width: 60px; height: 78px; object-fit: cover; border-radius: 5px;
  border: 2px solid transparent; cursor: pointer;
}
.gallery .thumb.on { border-color: var(--tb); }
.gallery .thumb.vid { position: relative; }
.gallery .thumb.vid::after {
  content: "▶"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff;
  background: rgba(0,0,0,.35); font-size: 18px;
}

.info h1 { font-size: 17px; margin: 0 0 6px; font-weight: 600; line-height: 1.45; }
.info .sub { font-size: 12px; color: var(--sub); }

.pricebox {
  /* Dawn 的做法：价格区不做粉色色块，靠一条细分隔线和字号层级来区分。
     价格仍保留品牌红（韩系折扣价的习惯），但不再又大又粗。 */
  margin: 16px 0 18px; padding: 0 0 16px; border-radius: 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.pricebox .now { color: var(--price); font-size: 23px; font-weight: 600; }
.pricebox .was { color: var(--sub); font-size: 14px; text-decoration: line-through; }
.pricebox .off {
  background: var(--price); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 3px;
}
.pricebox .meta { margin-left: auto; font-size: 12px; color: var(--sub); }

.opts { padding: 14px 0; border-top: 1px dashed var(--line); }
.opts .row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.opts .lb { width: 46px; flex: none; font-size: 13px; color: var(--sub); padding-top: 5px; }
.opts .vals { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; padding: 0;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
.swatch-name { font-size: 12px; color: var(--sub); align-self: center; }

/* 商家后台：分类下拉 */
.cat-sel {
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px;
  font: inherit; font-size: 12px; background: #fff; cursor: pointer; outline: none;
}
.cat-sel:hover { border-color: var(--tb); }

/* 商品编辑弹窗 */
.editmask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.editpanel {
  width: 560px; max-width: 100%; max-height: 90vh; overflow: auto;
  background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
}
.edithead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.editbody { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.editbody label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink); }
.editbody label span { font-size: 12px; color: var(--sub); }
.editbody input, .editbody textarea, .editbody select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 13px; outline: none;
}
.editbody input:focus, .editbody textarea:focus, .editbody select:focus { border-color: var(--tb); }
.editimgs-title { font-size: 12px; color: var(--sub); }
.editcolors { display: flex; flex-wrap: wrap; gap: 10px; }
.editcolors .ecolor {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px;
  background: var(--panel); transition: border-color .15s;
}
.editcolors .ecolor:hover { border-color: var(--tb); }
.editimgs { display: flex; flex-wrap: wrap; gap: 8px; }
.editimgs .eimg {
  position: relative; width: 64px; height: 84px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); cursor: pointer;
}
.editimgs .eimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editimgs .eimg::after {
  content: "✕"; position: absolute; inset: 0; background: rgba(0,0,0,.45);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; opacity: 0; transition: opacity .15s;
}
.editimgs .eimg:hover::after { opacity: 1; }
.editfoot {
  padding: 14px 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.editfoot .btn { padding: 9px 22px; }

.sizebtn {
  padding: 6px 16px; border: 1px solid var(--line); background: #fff;
  border-radius: 20px; font-size: 13px; min-width: 52px;
}
.sizebtn:hover { border-color: var(--ink); }
.sizebtn.on { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 500; }
/* 缺货尺码：划掉并禁用，客人点不动，避免下单后才发现发不了 */
.sizebtn.soldout {
  color: #cfcfcf; border-color: #f1f1f1; background: #fafafa;
  text-decoration: line-through; cursor: not-allowed;
}
.sizebtn.soldout:hover { border-color: #f1f1f1; }

.stepper { display: flex; align-items: center; gap: 0; }
.stepper button {
  width: 30px; height: 30px; border: 1px solid var(--line); background: #fff;
  font-size: 16px; line-height: 1;
}
.stepper button:first-child { border-radius: 4px 0 0 4px; }
.stepper button:last-child { border-radius: 0 4px 4px 0; }
.stepper input {
  width: 52px; height: 30px; text-align: center; border: 1px solid var(--line);
  border-left: 0; border-right: 0; font: inherit; outline: none;
}
.stock { font-size: 12px; color: var(--sub); align-self: center; margin-left: 10px; }

.buybox { display: flex; gap: 12px; margin-top: 16px; }
.btn-cart, .btn-now { flex: 1; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 600; border: 0; }
.btn-cart { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-cart:hover { border-color: var(--ink); }
.btn-now { background: var(--tb); color: #fff; }
.btn-now:hover { background: var(--tb-dark); }

.promise { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.promise span::before { content: "✓ "; color: var(--ok); }

.specs { margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.specs h3 { margin: 0; padding: 12px 16px; background: var(--panel); font-size: 14px; border-bottom: 1px solid var(--line); }
.specs table { width: 100%; border-collapse: collapse; font-size: 13px; }
.specs td { padding: 9px 16px; border-bottom: 1px solid var(--line); }
.specs td:first-child { width: 110px; color: var(--sub); background: #fcfcfc; }

.detailimgs { margin-top: 22px; text-align: center; }
.detailimgs h3 { font-size: 14px; margin: 0 0 12px; padding: 10px 0; background: var(--panel); border-radius: 6px; }
.detailimgs img { max-width: 100%; display: block; margin: 0 auto 8px; border-radius: 6px; }
/* 详情图译文（OCR+翻译后附在图下方） */
.dimg { margin: 0 0 20px; }
.dimg img { margin-bottom: 0; }
.dimg figcaption {
  margin: 10px auto 0; max-width: 720px; padding: 10px 14px;
  background: var(--panel); border-radius: 8px; text-align: left;
  font-size: 12px; line-height: 1.8; color: var(--sub); white-space: pre-wrap;
}
/* 详情介绍（多语言文字版） */
.descblock { margin-top: 22px; }
.descblock h3 { font-size: 14px; margin: 0 0 12px; padding: 10px 0; background: var(--panel); border-radius: 6px; }
.descblock .bd {
  padding: 14px 16px; font-size: 13px; line-height: 1.9; color: var(--ink);
  white-space: pre-wrap; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}

.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: rgba(27,27,25,.94); color: #fff; padding: 12px 22px; border-radius: 8px;
  font-size: 14px; opacity: 0; transition: opacity .22s; pointer-events: none; z-index: 999;
}
.toast.on { opacity: 1; }

/* ---------------- 购物车 / 结算 ---------------- */

.panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.panel > h2 { margin: 0; padding: 14px 18px; font-size: 15px; border-bottom: 1px solid var(--line); background: var(--panel); }
.rows { padding: 4px 18px; }
.row-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.row-item:last-child { border-bottom: 0; }
.row-item img { width: 76px; height: 100px; object-fit: cover; border-radius: 6px; background: var(--panel); }
.row-item .ri-main { flex: 1; min-width: 0; }
.row-item .ri-t { font-size: 13px; line-height: 1.45; }
.row-item .ri-s { font-size: 12px; color: var(--sub); margin-top: 4px; }
.row-item .ri-p { color: var(--price); font-size: 16px; font-weight: 600; width: 90px; text-align: right; }
.row-item .rm { background: none; border: 0; color: var(--sub); font-size: 12px; padding: 4px; }
.row-item .rm:hover { color: var(--tb); }

.summary { text-align: right; padding: 16px 18px; border-top: 1px solid var(--line); }
.summary .tot { font-size: 13px; color: var(--sub); }
.summary .tot b { color: var(--price); font-size: 26px; margin-left: 8px; }
.summary .go {
  display: inline-block; margin-top: 12px; padding: 12px 40px; background: var(--tb);
  color: #fff; border: 0; border-radius: 6px; font-size: 15px; font-weight: 600;
}
.summary .go:hover { background: var(--tb-dark); }
.summary .go:disabled { background: #ccc; cursor: not-allowed; }

.form { padding: 18px; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.form label { font-size: 13px; display: block; }
.form label span { display: block; color: var(--sub); margin-bottom: 5px; font-size: 12px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; outline: none; background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--tb); }
.form .full { grid-column: 1 / -1; }

/* ---------------- 商家端 ---------------- */

.adminbar { background: #1b1b19; color: #fff; padding: 14px 20px; display: flex; gap: 20px; align-items: center; }
.adminbar .lg { font-size: 16px; font-weight: 600; }
.adminbar a { color: #c9c9c5; font-size: 13px; }
.adminbar a:hover, .adminbar a.on { color: #fff; }
.adminbar .spacer { margin-left: auto; }

/* 商家后台登录门 */
.gate {
  position: fixed; inset: 0; background: #f5f2ee; z-index: 999;
  display: flex; align-items: center; justify-content: center;
}
.gatebox {
  width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 30px 28px; box-shadow: 0 12px 40px rgba(0,0,0,.08); text-align: center;
}
.gate-title { font-size: 18px; font-weight: 700; color: #1b1b19; margin-bottom: 6px; }
.gate-sub { font-size: 12px; color: var(--sub); margin-bottom: 20px; }
.gatebox input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 14px; margin-bottom: 14px; outline: none; text-align: center;
}
.gatebox input:focus { border-color: var(--tb); }
.gatebox .btn { width: 100%; padding: 11px; font-size: 14px; }
.gate-err { color: #e0403a; font-size: 12px; min-height: 18px; margin-top: 10px; }
.gate-hint { font-size: 11px; color: #b0b0ac; margin-top: 14px; line-height: 1.6; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab {
  padding: 10px 20px; border: 0; background: none; font-size: 14px;
  border-bottom: 2px solid transparent; color: var(--sub);
}
.tab.on { color: var(--tb); border-bottom-color: var(--tb); font-weight: 500; }

.box { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 18px; }
.box > h3 { margin: 0; padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.box .bd { padding: 16px; }

textarea.links {
  width: 100%; min-height: 150px; padding: 12px; border: 1px solid var(--line);
  border-radius: 6px; font: 13px/1.7 ui-monospace, Consolas, monospace; resize: vertical; outline: none;
}
textarea.links:focus { border-color: var(--tb); }

.btn {
  padding: 10px 22px; border: 0; border-radius: 6px; background: var(--tb);
  color: #fff; font-weight: 500; font-size: 14px;
}
.btn:hover { background: var(--tb-dark); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--tb); color: var(--tb); }
.btn.sm { padding: 5px 12px; font-size: 12px; }
.btn:disabled { background: #ccc; cursor: not-allowed; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 10px 12px; background: var(--panel);
  border-bottom: 1px solid var(--line); font-weight: 500; color: var(--sub); font-size: 12px;
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: #fcfcfb; }
.tbl img.pv { width: 40px; height: 52px; object-fit: cover; border-radius: 4px; }
.tbl .tt { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl input.mini {
  width: 82px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit;
}
.tag { font-size: 11px; padding: 2px 8px; border-radius: 3px; background: var(--panel); color: var(--sub); }
.tag.on { background: #E1F5EE; color: var(--ok); }
.tag.off { background: #FCEBEB; color: #A32D2D; }
.tag.v { background: var(--tb-soft); color: var(--tb); }

.log { background: #141413; color: #d6d6d2; padding: 12px 14px; border-radius: 6px;
  font: 12px/1.7 ui-monospace, Consolas, monospace; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.log .g { color: #7fd6a8; }
.log .r { color: #ff9b8a; }
.log .y { color: #ffd666; }   /* 重复上架之类的提醒 */

.stat { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.stat .s {
  flex: 1; min-width: 130px; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; background: #fff;
}
.stat .s b { display: block; font-size: 24px; font-weight: 600; }
.stat .s span { font-size: 12px; color: var(--sub); }

/* ---------------- 收款（payment） ---------------- */

/* 收款状态标签：沿用 .tag，新增「待收款」的琥珀色（不能用红色，红色是"出错"的语义） */
.tag.wait { background: #FDF3E3; color: #A15C07; }

.paybox {
  margin: 0 18px 4px;
  padding: 14px 16px;
  border: 1px solid #F0DFC0;
  background: #FFFBF3;
  border-radius: 10px;
}
.paybox-h {
  font-size: 13px; font-weight: 600; color: #8A5A11;
  margin-bottom: 8px;
}
.paybox-body {
  font-size: 13px; line-height: 1.75; color: var(--ink);
  white-space: pre-wrap;          /* 付款说明里的换行要保留 */
  word-break: break-word;
  background: #fff; border: 1px dashed #EADFC8; border-radius: 8px;
  padding: 10px 12px;
  user-select: text;              /* 方便客人手动复制账号 */
}
.paybox-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.paybox-actions .btn.sm { height: 32px; line-height: 1; }

/* ---------------- 响应式（客人主要在手机上看，这是最重要的一段） ----------------
   原来全站只有 640 / 860 两个断点，中间档位（平板、窄窗口）和手机上的
   商品网格、购物车行、顶栏都会挤在一起。下面按「先定宽度，再调字号」的顺序补齐。 */

@media (max-width: 1080px) {
  .grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (max-width: 820px) {
  /* 顶栏：搜索框换到第二行独占整宽，导航和切换器不会被挤出视口 */
  .topbar .inner { padding: 12px 16px; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }
  .wrap { padding: 18px 16px; }
  .filters { padding: 2px 0 14px; }
  /* 筛选条在窄屏改为上下两排（分类一排、排序一排），都靠左更整齐 */
  .filters { justify-content: flex-start; }
  .filters .f-right { margin-left: 0; }
}

@media (max-width: 640px) {
  body { font-size: 13.5px; }
  .logo { font-size: 18px; }
  .logo small { display: none; }             /* 副标题在手机上纯占位 */
  .navlinks { gap: 14px; }
  .wrap { padding: 14px 12px; }

  /* 顶栏排布：第一行 logo + 币种/语言，第二行导航，第三行搜索。
     原来是 logo+导航挤一行、切换器被顶到第二行，看起来更散。 */
  .topbar .inner { gap: 10px; }
  .logo { margin-right: auto; }
  .navlinks { order: 2; flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
  /* 币种和语言同组（都 order:1），彼此顺序沿用 DOM 顺序，和桌面端保持一致 */
  .cur-slot, .lang-slot { order: 1; }
  .search { order: 3; }

  /* 商品网格固定两列：手机上一列太空、三列太挤 */
  .grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .pic { aspect-ratio: 4/5; }          /* 竖图比例略收，一屏能多看到一行 */
  .card .body { padding: 10px 11px 13px; }
  .card .t { font-size: 12.5px; height: 36px; }
  .card .p { font-size: 16px; margin-top: 6px; }
  .card .m { font-size: 10.5px; }

  /* 购物车 / 订单行：图片 + 文字一段，价格单独一行，避免价格被挤成竖排 */
  .row-item { flex-wrap: wrap; gap: 10px; padding: 14px 0; }
  .row-item img { width: 64px; height: 84px; }
  .row-item .ri-main { flex: 1 1 calc(100% - 78px); }
  .row-item .ri-p { width: auto; text-align: left; font-size: 15px; margin-left: 74px; }
  .rows { padding: 2px 14px; }
  .panel > h2 { padding: 12px 14px; font-size: 14px; }
  .summary { padding: 14px; }
  .summary .tot b { font-size: 22px; }
  .form { grid-template-columns: 1fr; padding: 14px; }

  /* 分类已经移到侧边抽屉（见下方），这里只剩排序，保持单行即可 */
  .filters { padding: 2px 0 12px; }
  .filters .f-right { flex-wrap: nowrap; }

  /* 商品详情：价签、色卡、缩略图按手指可点尺寸调整 */
  .detail { gap: 18px; }
  .info h1 { font-size: 16px; }
  .pricebox { padding: 13px 14px; }
  .pricebox .now { font-size: 24px; }
  .pricebox .meta { margin-left: 0; width: 100%; }
  .swatch { width: 38px; height: 38px; }
  .gallery .thumb { width: 52px; height: 68px; }
  /* 手机上直接手指滑动，箭头没有意义还挡图 */
  .gallery .gnav { display: none; }
  .buybox { gap: 10px; }
  .buybox .btn-cart, .buybox .btn-now { flex: 1; padding: 13px 8px; font-size: 14px; }
  .specs td:first-child { width: 92px; }
  .paybox { margin: 0 14px 4px; padding: 12px 13px; }
}

@media (max-width: 400px) {
  .grid { gap: 10px; }
  .card .body { padding: 9px 10px 12px; }
  .card .szhint { font-size: 9px; padding: 2px 7px; }
  .row-item .ri-p { margin-left: 0; }
}

/* ---------------- 商家端：商品管理的筛选条与卡片视图 ---------------- */

.goodsbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fcfcfb;
}
.goodsbar #kw {
  width: 220px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: 13px; outline: none;
}
.goodsbar #kw:focus { border-color: var(--tb); }
.gsel { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sub); }
.gcount { font-size: 12.5px; color: #A15C07; font-weight: 600; }

/* 卡片看款：一屏能看十几款，主要用来「挑款/判断要不要留」，不适合逐行改价 */
.goods-grid {
  display: grid; gap: 14px; padding: 16px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.gcard {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; overflow: hidden; transition: box-shadow .15s, border-color .15s;
}
.gcard:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.gcard.sel { border-color: var(--tb); box-shadow: 0 0 0 2px rgba(17, 17, 17, .12); }
.gpick {
  position: absolute; left: 8px; top: 8px; z-index: 2; line-height: 1;
  background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 4px 5px;
}
.gpic { position: relative; aspect-ratio: 3/4; background: var(--panel); }
.gpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gstate {
  position: absolute; right: 8px; top: 8px; font-size: 11px;
  padding: 3px 9px; border-radius: 10px; color: #fff;
}
.gstate.on { background: rgba(47, 158, 110, .92); }
.gstate.off { background: rgba(0, 0, 0, .55); }
.gvideo {
  position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.gtr {
  position: absolute; right: 8px; bottom: 8px; background: rgba(24, 95, 165, .9);
  color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.gbody { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.gsku { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--sub); }
.gsku code { background: var(--panel); padding: 1px 5px; border-radius: 3px; }
.gtitle {
  font-size: 12.5px; line-height: 1.45; height: 36px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gprice { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sub); }
.gprice input.mini {
  width: 66px; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 5px; font: inherit; font-size: 12.5px; text-align: right;
}
.gprice .gadd { color: var(--ok); margin-left: auto; }
.gacts { display: flex; gap: 5px; flex-wrap: wrap; }
.gacts .btn.sm { padding: 4px 9px; font-size: 12px; }

/* 商品管理的「按上架时间分组」标题：卡片视图里横跨整行 */
.ggroup {
  grid-column: 1 / -1;
  margin: 10px 0 2px; padding: 6px 2px 6px 10px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  border-left: 3px solid var(--tb); background: #fafafa;
}
.ggroup:first-child { margin-top: 0; }
.ggroup span { font-weight: 400; color: var(--sub); }

/* 表格视图里的分组标题行 */
.tbl tr.grow td {
  background: #fafafa; font-size: 13px; font-weight: 600;
  border-left: 3px solid var(--tb); padding: 8px 12px;
}

/* 定价试算表：把不同成本下的毛利率摊开，避免「固定加价」在贵价商品上悄悄吃掉利润 */
.pricing-preview { margin-top: 16px; }
.pp-head { font-size: 12.5px; color: var(--sub); margin-bottom: 8px; }
.pp-table { width: 100%; max-width: 520px; border-collapse: collapse; font-size: 13px; }
.pp-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--sub);
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.pp-table td { padding: 7px 10px; border-bottom: 1px solid #f6f6f6; }
.pp-table td.g { color: #15803d; font-weight: 600; }
.pp-table td.y { color: #a15c07; font-weight: 600; }
.pp-table td.r { color: #dc2626; font-weight: 600; }
.pp-warn {
  margin-top: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.8;
  background: #fff8ec; border: 1px solid #f0dfc0; border-radius: 6px; color: #8a5a11;
}
.pp-ok { margin-top: 10px; font-size: 12.5px; color: #15803d; }

/* ---------------- 商家端：批量选款（分类页提取 + 候选池） ---------------- */

.pick-tip { margin: 0 0 12px; font-size: 12.5px; line-height: 1.85; color: var(--sub); }
.pick-tip b { color: var(--ink); }
.pick-tip code { background: var(--panel); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.pick-url {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 13px; outline: none;
}
.pick-url:focus { border-color: var(--tb); }
.pick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.pick-sel, .pick-num, .goodsbar #ckKw, .goodsbar #ckPmin, .goodsbar #ckPmax {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px;
  font: inherit; font-size: 13px; outline: none; background: #fff;
}
.goodsbar #ckKw { width: 210px; }
.goodsbar #ckPmin, .goodsbar #ckPmax { width: 64px; text-align: center; }
.pick-num { width: 64px; text-align: center; }
.pick-note { font-size: 12px; color: var(--sub); }
.pick-range {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--sub);
}
.pick-job {
  margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 6px; background: #fcfcfb; font-size: 12.5px; line-height: 1.85;
}
.pick-job .bar {
  height: 6px; background: var(--panel); border-radius: 3px;
  overflow: hidden; margin-top: 8px;
}
.pick-job .bar i {
  display: block; height: 100%; width: 0; background: var(--tb);
  transition: width .3s;
}
/* 「整页全部」不知道总共多少页，进度条走不确定态，别假装知道百分比 */
.pick-job .bar.indet i { width: 34%; animation: pickmove 1.1s linear infinite; }
@keyframes pickmove { from { margin-left: -34%; } to { margin-left: 100%; } }
.pick-sel-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fcfcfb;
}
.pick-sel-bar .sp { margin-left: auto; }
.pick-page {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 14px; font-size: 12.5px; color: var(--sub);
}

/* ---------------- 商家端：服务器磁盘状态 ---------------- */
.diskhead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.disknum { display: flex; align-items: baseline; gap: 10px; }
.disknum b { font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.disknum span { font-size: 13px; color: var(--sub); }
.diskadvice {
  margin-left: auto; font-size: 13px; padding: 5px 12px; border-radius: 999px;
  background: var(--panel); color: var(--sub);
}
.diskadvice.ok { background: #e7f7ed; color: #15803d; }
.diskadvice.warn { background: #fdf3e3; color: #a15c07; }
.diskadvice.danger { background: #fdecec; color: #dc2626; }

.diskbar {
  height: 14px; border-radius: 999px; background: #eef2f7; overflow: hidden;
}
.diskbar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.diskfc { margin-top: 10px; font-size: 12.5px; color: var(--sub); }

.sys-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.sys-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--sub);
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.sys-table td { padding: 9px 10px; border-bottom: 1px solid #f7f7f7; }
.sys-table td.num, .sys-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sys-table tfoot td { border-top: 1px solid var(--line); border-bottom: 0; background: #fcfcfb; }
.muted { color: var(--sub); }

.sys-meta {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12.5px; color: var(--sub);
}
.sys-note {
  margin-top: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.8;
  background: #f7f9fc; border: 1px solid #e3e8ef; border-radius: 6px; color: #475569;
}

/* 视图切换按钮的选中态 */
.btn.on { background: var(--tb); color: #fff; border-color: var(--tb); }

/* ---------------- 页脚（政策页面入口） ---------------- */
.site-foot {
  margin-top: 48px; padding: 26px 20px 34px;
  border-top: 1px solid var(--line); background: #fff;
}
.foot-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.foot-links a { font-size: 13px; color: #555; padding: 2px 4px; }
.foot-links a:hover { color: #000; text-decoration: underline; }
.foot-links .sep { color: #d8d8d8; font-size: 12px; }
.foot-copy { margin-top: 10px; font-size: 12px; color: var(--sub); }

/* 政策页面正文排版 */
.policy { max-width: 720px; }
.policy h1 { font-size: 20px; font-weight: 600; margin: 0 0 18px; }
.policy p { font-size: 14px; line-height: 1.9; color: #333; margin: 0 0 14px; }
.policy strong { color: var(--ink); }

/* 订单页的物流单号 */
.trackbox {
  margin: 0 18px 12px; padding: 12px 14px;
  border: 1px solid #dbe7f6; background: #f4f8ff; border-radius: 8px;
}
.trackbox .tk-label {
  font-size: 11.5px; color: #4a6fa5; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.trackbox .tk-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trackbox .tk-carrier { font-size: 13px; color: var(--sub); }
.trackbox .tk-no {
  font-size: 15px; letter-spacing: .04em; user-select: text;
  font-family: ui-monospace, Consolas, monospace;
}
.trackbox .tk-note { margin-top: 6px; font-size: 12px; color: var(--sub); }
@media (max-width: 640px) {
  .trackbox { margin: 0 14px 12px; padding: 11px 12px; }
  .trackbox .tk-no { font-size: 14px; }
}

@media (max-width: 640px) {
  .goods-grid { gap: 10px; padding: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .goodsbar { padding: 9px 12px; }
  .goodsbar #kw { width: 100%; }
}

/* ================================================================
   首页：分类侧边栏（可收起 / 手机抽屉）
   原来是横在商品上方的胶囊条，会占好几排、把商品往下推。
   现在放到左侧，客人不被挡，想收起就收起。
   ================================================================ */

.shop-layout {
  display: grid; grid-template-columns: 218px 1fr; gap: 34px; align-items: start;
}
/* 收起时侧边栏是 display:none，它就退出了网格布局 —— 若还写 `0 1fr`，
   商品区会掉进那个 0 宽的第一列被压成窄条。所以这里直接改成单列。 */
.shop-layout.sb-hidden { grid-template-columns: 1fr; gap: 0; }
.shop-layout.sb-hidden .sidebar { display: none; }

.sidebar { position: sticky; top: 92px; }
.sb-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sub); padding-bottom: 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.sb-close {
  border: 0; background: none; color: var(--sub); font-size: 13px;
  padding: 2px 4px; border-radius: 4px; line-height: 1;
}
.sb-close:hover { color: var(--ink); background: var(--panel); }
.sb-list { display: flex; flex-direction: column; }
.sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 2px; font-size: 13.5px; color: #333; line-height: 1.45;
  border-bottom: 1px solid #f7f7f7;
}
.sb-item:hover { color: #000; }
.sb-item.on { color: #000; font-weight: 600; }
.sb-item.on::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--ink);
}
.sb-item b { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--sub); }

/* 筛选条上的侧边栏开关 */
.sb-toggle {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  color: var(--ink); font-size: 14px; line-height: 1;
}
.sb-toggle:hover { border-color: var(--ink); }
.sb-toggle.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cur-cat { font-size: 13px; color: var(--sub); }

.sb-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 110;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sb-mask.on { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .sb-mask { display: none; } }

@media (max-width: 900px) {
  /* 窄屏：侧边栏变成从左侧滑出的抽屉，商品区域保持整宽 */
  .shop-layout, .shop-layout.sb-hidden { grid-template-columns: 1fr; gap: 0; }
  .shop-layout.sb-hidden .sidebar { display: block; }   /* 显隐交给 .open 控制 */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 274px; z-index: 120;
    background: #fff; padding: 18px 16px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 44px rgba(0, 0, 0, .16);
  }
  .sidebar.open { transform: none; }
  .sb-head { position: sticky; top: -18px; background: #fff; padding-top: 6px; }
}

/* ================================================================
   Shopify 式简约化（Dawn 风格）
   核心思路：靠「留白 + 细分隔线」建立秩序，减少阴影、圆角和色块，
   价格不再又大又粗，卡片 hover 只做图片微缩放而不是整块上浮。
   ================================================================ */

.grid { gap: 26px 22px; }

.card {
  border-radius: 4px; box-shadow: none; background: transparent;
}
.card:hover { transform: none; box-shadow: none; }
.card .body { padding: 12px 2px 14px; }        /* 文字与图片左对齐，去掉卡片内缩进 */
.card .t { font-size: 13.5px; color: #1a1a1a; }
.card .p { font-size: 15px; font-weight: 500; margin-top: 6px; }
.card .m { font-size: 11px; margin-top: 4px; }
.card .vtag, .card .szhint { border-radius: 3px; font-size: 10.5px; }

.btn, .btn-cart, .btn-now { border-radius: 4px; }
.btn.sm { border-radius: 4px; }
.panel, .box, .paybox, .specs, .editpanel, .tabs { border-radius: 6px; }
.filters select, .cat-sel, .form input, .form select, .form textarea,
.lang-sel, .cur-sel, .gate input, .editbody input, .editbody textarea, .editbody select {
  border-radius: 4px;
}
.search input { border-radius: 4px 0 0 4px; }
.search button { border-radius: 0 4px 4px 0; }
.back-btn { border-radius: 4px; }
.swatch { border-radius: 4px; }                 /* 色卡从圆形改方形，更接近 Dawn 的色块 */
.sizebtn { border-radius: 4px; }

.topbar .inner { padding: 16px 20px; }
.summary .go { border-radius: 4px; }

/* 上面这段写在文件末尾，会盖掉前面小屏断点里的同类属性，
   所以这里把窄屏该有的密度再定一次（顺序：越靠后越优先）。 */
@media (max-width: 1080px) {
  .grid { gap: 20px 16px; }
}
@media (max-width: 640px) {
  .grid { gap: 18px 12px; }
  .card .body { padding: 10px 2px 12px; }
  .card .t { font-size: 12.5px; height: 36px; }
  .card .p { font-size: 14.5px; }
}