/* ===== 供应商商品目录（js/catalog.js）=====
   只在后台「一键上架」后启用：.app 上带 catalog-mode 时，原有侧栏和商品列表被收起，
   由目录浏览器接管。三级导航都在主区域里（大类 → 平台 → 分类），所以三种模板风格、手机和电脑下都一样可用。 */

/* 判断是否上架期间，先隐藏原有商品区，避免"原列表闪一下再换成目录" */
.catalog-pending .search-section,
.catalog-pending .sub-tabs,
.catalog-pending .product-section { visibility: hidden; }

.catalog-mode .sidebar,
.catalog-mode .sidebar-overlay,
.catalog-mode .menu-toggle,
.catalog-mode .search-section,
.catalog-mode .sub-tabs,
.catalog-mode .product-section { display: none; }
.catalog-mode .main { margin-inline-start: 0; }
/* .main 是 flex 子项，默认 min-width:auto 会被不换行的标签行撑到 1080px，手机上整页变宽 */
.catalog-mode .main { min-width: 0; max-width: 100%; }
#catalog-root { min-width: 0; max-width: 100%; }

#catalog-root[hidden] { display: none; }

.cg { width: 100%; max-width: 1080px; margin: 0 auto; padding: 12px 20px 24px; }

/* ---- 第 1 级：大类（分段按钮） ---- */
.cg-kinds,
.cg-platforms { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cg-kinds::-webkit-scrollbar,
.cg-platforms::-webkit-scrollbar { display: none; }
.cg-kinds { padding-bottom: 2px; }
.cg-platforms { margin-top: 8px; padding-bottom: 2px; }
.cg-platforms[hidden],
.cg-cats[hidden],
.cg-country[hidden] { display: none; }

.cg-kind { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; white-space: nowrap; transition: all .15s; }
.cg-kind-count { font-weight: 500; opacity: .8; }
.cg-kind:hover { border-color: #93c5fd; color: #2563eb; }
.cg-kind.is-active { background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* ---- 第 2 / 3 级：平台与分类（胶囊标签） ---- */
.cg-chip { flex: 0 0 auto; padding: 5px 12px; font-size: 12px; font-weight: 500; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; white-space: nowrap; transition: all .15s; }
.cg-chip:hover { border-color: #93c5fd; color: #2563eb; }
.cg-chip.is-active { background: #eff6ff; border-color: #3b82f6; color: #2563eb; font-weight: 600; }
.cg-chip--sub { border-radius: 6px; }
.cg-cats { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cg-cats::-webkit-scrollbar { display: none; }

/* ---- 搜索 / 国家 / 排序 ---- */
.cg-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 190px 170px; gap: 8px; margin-top: 10px; }
.cg-search { height: 38px; font-size: 13px; background: #fff; }
.cg-select { height: 38px; font-size: 13px; background: #fff; padding-inline-end: 6px; text-overflow: ellipsis; }
.cg-catsel { max-width: 100%; }
.cg-country[hidden] + .cg-sort { grid-column: span 1; }

/* ---- 结果摘要 ---- */
.cg-summary { margin: 12px 2px 8px; font-size: 12px; color: #64748b; min-height: 18px; scroll-margin-top: 56px; }

/* ---- 商品行 ---- */
.cg-list { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; transition: opacity .15s; }
.cg-list.is-loading { opacity: .55; pointer-events: none; }
.cg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
.cg-row:last-child { border-bottom: none; }
.cg-row:hover { background: #f8fafc; }
.cg-main { min-width: 0; }
.cg-title.is-clickable { cursor: pointer; }
.cg-title.is-clickable:hover { color: #2563eb; }
.cg-title.is-clickable:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; }
.cg-title { font-size: 13px; font-weight: 500; color: #1e293b; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.cg-row.is-open .cg-title { -webkit-line-clamp: unset; }
.cg-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 11px; color: #94a3b8; }
.cg-tag { padding: 1px 7px; background: #f1f5f9; color: #475569; border-radius: 4px; font-size: 11px; }
.cg-tag--rec { background: #fef3c7; color: #b45309; font-weight: 600; }
.cg-cat { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cg-side { display: flex; align-items: center; gap: 18px; }
.cg-price { display: flex; flex-direction: column; align-items: flex-end; min-width: 92px; }
.cg-price-num { font-size: 15px; font-weight: 700; color: #0f172a; }
.cg-price-unit { font-size: 10px; color: #94a3b8; white-space: nowrap; }
.cg-stock { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; }
.cg-stock-label { font-size: 10px; color: #94a3b8; }
.cg-stock-num { font-size: 12px; font-weight: 600; color: #16a34a; }
.cg-actions { display: flex; align-items: center; gap: 6px; }
.cg-more { padding: 6px 10px; font-size: 11px; color: #64748b; border: 1px solid #e2e8f0; border-radius: 5px; white-space: nowrap; }
.cg-more:hover { border-color: #93c5fd; color: #2563eb; }
.cg-buy { padding: 7px 16px; background: #3b82f6; color: #fff; font-size: 12px; font-weight: 600; border-radius: 5px; transition: background .15s; white-space: nowrap; }
.cg-buy:hover { background: #2563eb; }

/* ---- 展开的详情 ---- */
.cg-detail { grid-column: 1 / -1; padding: 8px 10px; background: #f8fafc; border-radius: 6px; font-size: 12px; color: #475569; }
.cg-desc { line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.cg-desc--muted { color: #94a3b8; font-size: 11px; margin-top: 4px; }
.cg-variants { margin-top: 6px; }
.cg-variants-title { font-size: 11px; font-weight: 600; color: #94a3b8; margin-bottom: 3px; }
.cg-variant { display: grid; grid-template-columns: minmax(0, 1fr) 70px 92px auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed #e2e8f0; }
.cg-buy--sm { padding: 4px 12px; font-size: 11px; }
.cg-buy:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
.cg-variant-key { word-break: break-word; }
.cg-variant-price { text-align: end; font-weight: 600; color: #0f172a; }
.cg-variant-stock { text-align: end; color: #16a34a; }

/* ---- 空 / 失败状态 ---- */
.cg-empty { padding: 36px 16px; text-align: center; color: #94a3b8; font-size: 13px; }
.cg-empty p { margin-bottom: 12px; }
.cg-btn { padding: 7px 18px; background: #3b82f6; color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; }
.cg-btn:hover { background: #2563eb; }

/* ---- 分页 ---- */
.cg-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 14px; }
.cg-pager:empty { display: none; }
.cg-pg { min-width: 34px; height: 34px; padding: 0 10px; font-size: 12px; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; }
.cg-pg:hover:not(:disabled) { border-color: #93c5fd; color: #2563eb; }
.cg-pg.is-active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.cg-pg:disabled { opacity: .45; cursor: not-allowed; }
.cg-pg-gap { color: #94a3b8; }
.cg-pg-info { flex-basis: 100%; text-align: center; font-size: 11px; color: #94a3b8; }

/* ---- 手机 ---- */
@media (max-width: 768px) {
  .cg { padding: 8px 12px 20px; }
  /* 搜索框和两个下拉框排在同一行（隐藏的下拉框不占位）：减少页面长度 */
  .cg-toolbar { display: flex; gap: 6px; }
  .cg-search { flex: 1 1 0; min-width: 0; height: 36px; font-size: 12px; padding-inline: 8px; }
  .cg-toolbar .cg-select { flex: 0 1 auto; width: auto; max-width: 34%; min-width: 0; height: 36px; font-size: 12px; padding-inline: 6px; }
}
@media (max-width: 600px) {
  /* 手机屏幕矮：收起顶部的说明横幅，把首屏留给导航和商品 */
  .catalog-mode .info-banner { display: none; }
  /* 四个大类按钮平分一行：名称在上、数量在下，名称长了可以换行，不会撑出横向滚动 */
  .cg-kinds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; gap: 6px; }
  .cg-kind { flex-direction: column; justify-content: center; gap: 0; padding: 6px 4px; font-size: 12px; line-height: 1.3; text-align: center; white-space: normal; }
  .cg-kind-label { overflow-wrap: anywhere; }
  .cg-kind-count { font-size: 11px; }
  .cg-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; }
  .cg-side { justify-content: space-between; gap: 10px; }
  .cg-price { align-items: flex-start; min-width: 0; }
  .cg-stock { align-items: flex-start; min-width: 0; margin-inline-end: auto; }
  .cg-variant { grid-template-columns: minmax(0, 1fr) 58px 70px auto; gap: 6px; }
  .cg-pg { min-width: 30px; height: 32px; padding: 0 8px; }
  .cg-pg--nav { flex: 1 1 40%; }
}

/* ---- 暗色模板 ---- */
html[data-template-style="dark"] .cg-kind,
html[data-template-style="dark"] .cg-chip,
html[data-template-style="dark"] .cg-list,
html[data-template-style="dark"] .cg-pg,
html[data-template-style="dark"] .cg-search,
html[data-template-style="dark"] .cg-select { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html[data-template-style="dark"] .cg-kind.is-active,
html[data-template-style="dark"] .cg-pg.is-active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
html[data-template-style="dark"] .cg-chip.is-active { background: #172554; border-color: #3b82f6; color: #bfdbfe; }
html[data-template-style="dark"] .cg-row { border-color: #334155; }
html[data-template-style="dark"] .cg-row:hover,
html[data-template-style="dark"] .cg-detail { background: #0f172a; }
html[data-template-style="dark"] .cg-title,
html[data-template-style="dark"] .cg-price-num,
html[data-template-style="dark"] .cg-variant-price { color: #f8fafc; }
html[data-template-style="dark"] .cg-tag { background: #334155; color: #cbd5e1; }
html[data-template-style="dark"] .cg-more { border-color: #475569; color: #cbd5e1; }
html[data-template-style="dark"] .cg-variant { border-color: #334155; }

/* 极简模板本来就隐藏侧栏，居中显示即可 */
html[data-template-style="minimal"] .cg { max-width: 960px; }

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .cg-list, .cg-kind, .cg-chip, .cg-buy { transition: none; }
}
html[dir="rtl"] .cg-title.is-clickable { text-align: start; }