:root{
  --bg: #120e0a;
  --card: #1a1410;
  --ink: #f6efe8;
  --muted: #c8b9ac;
  --accent: #fb923c;
  --accent-2: #f59e0b;
  --border-clr: rgba(255, 184, 122, .12);
  --border: 1px solid var(--border-clr);
  --shadow: 0 8px 28px rgba(84,42,15,.35), 0 2px 10px rgba(84,42,15,.25);
  --radius: 12px;
  --gap: 12px;
}

/* ===== 基础排版与背景 ===== */
html, body{
  margin:0; padding:0;
  color: var(--ink);
  font: 14px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, #22170f 0%, #17110c 40%, var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--accent); text-decoration:none; }
a:hover{ opacity:.95; }

/* ===== 页面根容器 ===== */
#__new_design_root{
  margin:24px auto 64px;
  max-width:1080px;
  padding:0 16px;
  display:block;
  box-sizing:border-box;
}

/* ===== 顶部 Header ===== */
.nd-header{
  display:flex; align-items:center; justify-content: space-between;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.nd-title{ font-size: 22px; font-weight: 700; letter-spacing:.3px; }
.nd-title .nd-sub{ font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.nd-badge{
  background: linear-gradient(180deg, #ffedd5, #fbbf24);
  color:#2b1606;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.45);
}

/* ===== 静态公告 ===== */
.nd-announce{
  display:flex; align-items:flex-start; gap:8px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.20);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  line-height:1.6;
}
.nd-announce .nd-tag{
  flex-shrink:0;
  background:#fbbf24; color:#2b1606;
  font-weight:700; padding:2px 6px; border-radius:4px; font-size:12px;
}
.nd-announce-list{
  display:flex; flex-direction:column;
  gap:0; margin:0; padding:0;
}
.nd-announce-item{
  margin:0; padding:0;
  line-height:1.6;
  letter-spacing:.4px;
}
.nd-announce-item a:link,
.nd-announce-item a:visited,
.nd-announce-item a:hover,
.nd-announce-item a:active{
  color:#3399cc;
  text-decoration:none;
}

/* ===== 工具栏 ===== */
.nd-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.nd-input{
  flex:1 1 240px;
  min-width:220px;
  background:#15100c;
  color: var(--ink);
  border: 1px solid rgba(255,184,122,.12);
  outline: none;
  border-radius: 10px;
  padding: 8px 10px;
}
.nd-btn2{
  background:#15100c;
  color: var(--ink);
  border: 1px solid rgba(255,184,122,.12);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.nd-btn2:hover{ border-color: rgba(255,184,122,.28); }

/* ===== 会员信息块 ===== */
.nd-member{
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.nd-member .nd-name,
.nd-member .nd-member-name{ font-weight:700; }
.nd-member .nd-meta{ color: var(--muted); font-size: 12px; }
.nd-member-actions{ display:flex; gap:10px; margin-top:8px; }
.nd-btn{
  background:#15100c; color:var(--ink);
  border:1px solid rgba(255,184,122,.12);
  border-radius:10px; padding:6px 14px; cursor:pointer;
}
.nd-btn:hover{ border-color: rgba(255,184,122,.28); }

/* ===== 商品列表区 ===== */
.nd-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ===== 卡片布局 ===== */
.nd-row{
  display:flex; flex-direction:column;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nd-row:hover{
  transform: translateY(-2px);
  border-color: rgba(255,184,122,.28);
  box-shadow: 0 10px 28px rgba(84,42,15,.45), 0 4px 12px rgba(84,42,15,.30);
}
.nd-main{ width:100%; box-sizing:border-box; }

.nd-h{
  display:flex; 
  gap:8px; 
  align-items:baseline; 
  justify-content:space-between;
  margin-bottom:6px;
  flex-wrap:wrap;
  flex-direction: column; /* ← 纵向排列 */
  gap: 4px; 
}
.nd-name{ 
	font-size:15px; 
	font-weight: bold;
	letter-spacing:.2px;
	flex: 1;
	  }
.nd-price{
  color: #fca44f; font-weight:900;
  background: linear-gradient(120deg,#fb923c,#f59e0b,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nd-desc{ color: var(--muted); font-size: 13px; margin-bottom: 8px; }

/* 详情换行与折叠 */
.nd-details, .nd-details p, .nd-details a{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}
.nd-details a{ display:inline-block; }

.nd-details-wrap{ margin-top:6px; border-top:1px dashed rgba(255,184,122,.14); padding-top:6px; }
.nd-toggle{
  background:#15100c; color:#f1e6db;
  border:1px solid rgba(255,184,122,.20);
  border-radius:10px; padding:6px 10px; cursor:pointer; font-size:12px;
  margin-bottom:6px;
}
.nd-details{ font-size:13px; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.nd-details.open{ max-height:800px; }

/* 按钮区 */
.nd-cta{ width:100%; margin-top:12px; position:relative; z-index:5; display:block; }
.nd-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-start; }
.nd-actions .nd-buy,.nd-actions .nd-order{ flex:0 1 auto; white-space:nowrap; min-width:6.5em; height:36px; line-height:36px; display:inline-flex; align-items:center; justify-content:center; }

.nd-buy{
  background: linear-gradient(120deg,#fb923c,#f59e0b);
  color:#2b1606;
  border:none; border-radius:12px;
  padding:0 14px; cursor:pointer; font-weight:800;
}
.nd-buy[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(.3); }
.nd-order{
  background: linear-gradient(180deg,#17110c,#120e0a);
  border: 1px dashed rgba(251,146,60,.55);
  color:#ffe9cf; border-radius:12px;
  padding:0 14px; cursor:pointer; font-weight:700;
}
.nd-order-icon{ margin-right:6px; opacity:.9; }

/* ===== 弹窗 ===== */
.nd-modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; }
.nd-modal{ width:min(92vw,520px); background: var(--card); border: var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow:hidden; }
.nd-modal-hd{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.nd-modal-ttl{ font-weight:700; }
.nd-modal-bd{ padding:12px; }
.nd-field{ display:flex; flex-direction:column; gap:6px; }
.nd-label{ font-weight:600; }
.nd-text{ background:#15100c; color:var(--ink); border:1px solid rgba(255,184,122,.12); border-radius:10px; padding:8px 10px; outline:none; }
.nd-help{ color: var(--muted); font-size: 12px; }
.nd-err{ color: #fca5a5; font-size: 12px; min-height: 16px; }
.nd-modal-ft{ display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:10px 12px; border-top:1px solid rgba(255,255,255,.06); }
.nd-btn-ghost{ background:#15100c; color:var(--ink); border:1px solid rgba(255,184,122,.12); border-radius:10px; padding:8px 12px; cursor:pointer; }
.nd-btn-solid{ background: linear-gradient(120deg,#fb923c,#f59e0b); color:#2b1606; border:none; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:800; }
.nd-btn-solid:disabled{ opacity:.6; cursor:not-allowed; }

/* ===== 页脚 ===== */
.nd-footer{ color:#cbb8a8; text-align:center; margin-top:24px; font-size:12px; }

/* ===== 响应式 ===== */
@media (min-width: 640px){
  .nd-list{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px){
  .nd-list{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (hover: none){
  .nd-row:hover{ transform: none; }
}

/* 库存数标签样式 */
.nd-stock {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #d4a017;   /* 金色边框 */
  border-radius: 20px;         /* 胶囊圆角 */
  background: transparent;     /* 背景透明 */
  color: #ffd966;              /* 字体颜色偏亮金色 */
  font-size: 12px;
  line-height: 1.4;
  margin-left: 6px;
}

/* 库存为零 */
[id^="nd-stock-"].zero {
  color: #9ca3af; /* 灰色 */
}

/* 商品头部容器，横向排列：标题 + 价格 + 库存 */
.nd-h {
  display: flex;
  align-items: center;   /* 垂直居中对齐 */
  justify-content: space-between; /* 两端对齐（标题在左，价格+库存在右） */
  gap: 10px;             /* 控制内部元素的间距 */
}


/* 价格和库存组合在右边 */
.nd-price, .nd-stock {
  margin-left: 10px;
  white-space: nowrap; /* 避免换行 */
}


.nd-sub {
  display: flex;
  flex-direction: row;   /* 横向排列 */
  align-items: center;
  gap: 10px;             /* 价格和库存之间的间距 */
}

.nd-announce,
.nd-announce-item {
  word-wrap: break-word;      /* 兼容旧浏览器 */
  overflow-wrap: break-word;  /* 标准写法，长词换行 */
  word-break: break-all;      /* 强制断开长串，防止溢出 */
  white-space: normal;        /* 确保能换行，不保持单行 */
}

/* === Grouped layout overrides === */
.nd-list.grouped{ display:block; } /* stop using the card grid on the list itself */

.nd-group{ 
  margin: 18px 0 8px;
  padding: 0;
}

.nd-category-title{
  margin: 10px 0 8px;
  font-weight:700;
  font-size:16px;
  color: var(--accent);
  display:flex; align-items:center; gap:10px;
}
.nd-category-title::before{
  content:""; width:6px; height:16px; border-radius:3px;
  background: linear-gradient(120deg,#fb923c,#f59e0b);
}

/* Each group has its own grid */
.nd-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* keep your existing responsive breakpoints */
@media (min-width: 640px){
  .nd-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px){
  .nd-grid{ grid-template-columns: 1fr 1fr 1fr; }
}