/* DadaGoods 全站基础样式（P1 骨架：TopBar/MainNav/Footer/表单/后台框架） */
@import url("/assets/css/tokens.css");

* { box-sizing: border-box; }
html { font-size: var(--fs-base); }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-gray-900);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }

/* ── TopBar ── */
.topbar { background: var(--c-bg-subtle); border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-gray-600); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar a { margin-left: var(--sp-4); }

/* ── MainNav ── */
.mainnav { border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
.mainnav .container { display: flex; align-items: center; gap: var(--sp-6); height: 64px; }
.logo { font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary); letter-spacing: -0.5px; }
.nav-search { flex: 1; display: flex; max-width: 640px; }
.nav-search input {
  flex: 1; height: 40px; padding: 0 var(--sp-3);
  border: 2px solid var(--c-primary); border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm); font-size: var(--fs-md); outline: none;
}
.nav-cart { font-size: var(--fs-md); }

/* ── Footer ── */
.footer { border-top: 1px solid var(--c-border); margin-top: var(--sp-12); padding: var(--sp-8) 0; color: var(--c-gray-500); font-size: var(--fs-sm); }
.footer .container { display: flex; gap: var(--sp-8); flex-wrap: wrap; justify-content: space-between; }
.footer a { display: block; margin-bottom: var(--sp-2); color: var(--c-gray-600); }

/* ── 主区 ── */
main { padding: var(--sp-8) 0; }
h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-6); }

/* ── 卡片/面板 ── */
.card { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-6); background: var(--c-bg); box-shadow: var(--shadow-1); }
.card + .card { margin-top: var(--sp-4); }

/* ── 提示条 ── */
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.alert-success { background: #E7F7F0; color: var(--c-success); border: 1px solid #B5E7D4; }
.alert-error { background: #FDECEC; color: var(--c-danger); border: 1px solid #F5C6C6; }
.alert-info { background: var(--c-primary-light); color: var(--c-primary-dark); border: 1px solid #C7D9FF; }

/* ── DataTable（Seller/Admin）── */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-border); }
.table th { color: var(--c-gray-500); font-weight: 600; }
.table tbody tr:hover { background: var(--c-bg-subtle); }

/* ── Admin 框架 ── */
.admin-shell { display: flex; min-height: 100vh; background: var(--c-bg-subtle); }
.admin-nav { width: 220px; background: var(--c-gray-900); color: var(--c-gray-300); padding: var(--sp-4) 0; flex-shrink: 0; }
.admin-nav .brand { color: #fff; font-weight: 700; padding: var(--sp-2) var(--sp-5) var(--sp-6); font-size: var(--fs-md); }
.admin-nav a { display: block; color: var(--c-gray-300); padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
.admin-nav a:hover, .admin-nav a.active { background: rgba(255,255,255,.08); color: #fff; }
.admin-main { flex: 1; padding: var(--sp-6) var(--sp-8); }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); }
.badge { display: inline-block; min-width: 20px; text-align: center; background: var(--c-accent); color: #fff; border-radius: var(--r-full); font-size: var(--fs-xs); padding: 0 6px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); }
.pill-pending { background: #FEF3D9; color: var(--c-warning); }
.pill-approved { background: #E7F7F0; color: var(--c-success); }
.pill-rejected { background: #FDECEC; color: var(--c-danger); }
.pill-frozen { background: var(--c-gray-200); color: var(--c-gray-700); }

/* ── Cookie Consent（方案 §2.12）── */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--c-gray-900); color: #fff; padding: var(--sp-4) 0; font-size: var(--fs-sm);
}
.cookie-banner .container { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-banner button { background: var(--c-primary); }
.cookie-banner button.ghost { background: transparent; border: 1px solid var(--c-gray-600); color: #fff; }

/* ── 商品栅格与卡片（方案 §1.3 ProductCard / §2.2）── */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.product-card { border:1px solid var(--c-border); border-radius:8px; overflow:hidden; background:var(--c-bg); transition:box-shadow .15s; }
.product-card:hover { box-shadow:var(--shadow-2); }
.product-card a { display:block; color:inherit; }
.product-title { font-size:14px; line-height:1.4; height:2.8em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:8px 12px 4px; }
.product-price { margin:0 12px; }
.price-now { font-size:18px; font-weight:700; color:var(--c-primary); font-variant-numeric:tabular-nums; }
.price-market { font-size:13px; color:var(--c-gray-400); text-decoration:line-through; margin-left:6px; }
.tier-hint { margin:2px 12px; font-size:12px; color:var(--c-accent); }
.product-meta { margin:4px 12px 12px; font-size:12px; color:var(--c-gray-500); }
.low-stock { color:var(--c-warning); }

/* ── 面包屑（方案 §1.3）── */
.breadcrumb ol { list-style:none; display:flex; gap:8px; padding:0; margin:0; font-size:13px; color:var(--c-gray-500); flex-wrap:wrap; }
.breadcrumb li:not(:last-child)::after { content:"›"; margin-left:8px; color:var(--c-gray-400); }

/* ── 响应式 ── */
@media (max-width: 1199px) { .product-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 767px) {
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .category-layout { grid-template-columns:1fr !important; }
  .product-detail { grid-template-columns:1fr !important; }
  .mainnav .container { height: 56px; gap: var(--sp-3); }
  .admin-nav { width: 64px; }
  .admin-nav .brand, .admin-nav a { font-size: 0; padding: var(--sp-3); }
  .admin-nav a::first-letter { font-size: var(--fs-md); }
}