/* 桃乐茜 — 紫黑主题（移动 / 瀑布流） */

:root{
  /* 浅粉 + 白色主题（主色为粉色，黑色为辅助） */
  --bg:#fff7fb; /* very pale pink */
  --card: linear-gradient(180deg,#ffffff,#fff9fc); /* white card */
  --muted:#6b7280; /* slate gray for less emphasis */
  --accent:#ff4da6; /* pink accent */
  --accent-600:#ff1e8c; /* deeper pink */
  --text:#0b1220; /* near-black text for readability */
  --radius:10px;
  --input-bg:#ffffff;
  --input-border:rgba(16,24,40,0.06);
}

*{box-sizing:border-box}
body{ margin:0; color:var(--text); min-height:100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: var(--bg); font-size:13px }

/* Header on mobile: keep logo left and personal actions right, horizontally aligned */
.site-header{ background:var(--card); border-bottom:1px solid rgba(16,24,40,0.06); box-shadow:0 4px 12px rgba(16,24,40,0.06); position:sticky; top:0; z-index:40 }
.header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:12px 14px; min-height:64px }
.brand{ font-weight:800; color:var(--accent); text-decoration:none; font-size:18px; letter-spacing:0.2px; flex:0 0 auto; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Ensure mobile logo vertically centers inside sticky header */
.brand{ display:inline-flex; align-items:center; height:100%; }
.nav{ display:flex; gap:8px; align-items:center; flex:0 1 auto; margin-left:0 }
.nav a, .nav button{ color:var(--muted); text-decoration:none; white-space:nowrap; flex-shrink:0; font-size:13px }

/* hamburger toggle button (shown on small screens) */
.nav{ display:none }
/* place brand to the left; personal button will be pushed right via margin-left:auto */
/* (removed margin-right:auto which could conflict with ordering) */
/* On slightly larger phones show inline nav instead of hiding it */
@media (min-width:420px){
  .nav{ display:flex }
}

/* personal center button (visible on mobile header to the right) */
.personal-btn{ display:inline-block; margin-left:12px; flex:0 0 auto; padding:8px 12px; font-size:14px; border-radius:10px; border:1px solid rgba(16,24,40,0.06); color:#fff; background:linear-gradient(90deg,var(--accent),var(--accent-600)); text-decoration:none }
@media (min-width:420px){ .personal-btn{ display:none } }


/* enforce order: brand left, nav center, personal button right */
.header-inner .brand{ order:0 }
.header-inner .nav{ order:1 }
.header-inner .personal-btn{ order:2; margin-left: auto }

/* Make personal button absolutely positioned on very small screens to guarantee right alignment
  This avoids layout conflicts from older rules and ensures the button sits at the right edge. */
.header-inner{ position: relative }
.header-inner .personal-btn{ position: absolute; right:12px; top:50%; transform:translateY(-50%); margin-left:0 }

/* On slightly larger phones where nav is visible, revert to flow positioning */
@media (min-width:420px){
  .header-inner{ position:static }
  .header-inner .personal-btn{ position:static; transform:none; margin-left:auto }
}

/* header balance button removed — styles intentionally deleted to avoid leftover UI */

/* Mobile: masonry-like layout using CSS columns for lightweight waterfall */
.container{ width:100%; max-width:100vw; margin:0 auto; padding:10px; display:block }
.grid{ column-count:2; column-gap:12px }

/* 产品中心：侧边栏布局 */

.pc-layout{ display:block }
.category-list{ list-style:none; padding:0; margin:0; display:flex; gap:8px; align-items:center; }
.top-category-list{ overflow-x:auto; white-space:nowrap; padding:8px 6px }
.top-category-list .cat-item{ margin:0 }
.top-category-list .cat-btn{ display:inline-block; text-align:center; padding:8px 12px; border-radius:999px; border:1px solid rgba(16,24,40,0.04); background:transparent; color:var(--text); font-weight:600; white-space:nowrap }
.top-category-list .cat-item.active .cat-btn{ background:var(--accent); color:#fff; border-color:var(--accent) }
.pc-main{}

/* Mobile behaviour: keep sidebar 常驻 (not collapsible). Hide the toggle button. */
@media (max-width:600px){
  .pc-layout{ display:block }
  .top-category-list{ padding:8px 6px; gap:6px }
  .top-category-list .cat-btn{ padding:8px 10px; font-size:13px }
}


.card{ display:inline-block; width:100%; margin:0 0 10px; break-inside:avoid; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03)); border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,0.18); border:1px solid rgba(0,0,0,0.04); overflow:hidden }
.card .thumb{ width:100%; display:block; aspect-ratio:1/1; overflow:hidden; background:transparent }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.card-body{ padding:8px }
.card h3{ margin:0 0 6px; font-size:13px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* favorite button styles */
.fav-btn{ padding:6px 8px; border-radius:8px; background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--muted); font-weight:600 }
.fav-btn.fav-active{ background:var(--accent); border-color:var(--accent); color:#fff }

/* Mobile footer tweaks to match desktop */
.site-footer{ background: linear-gradient(180deg,#fafafa,#fff); border-top:1px solid #000; padding:12px 0 }
.site-footer .footer-nav{ text-align:center; margin-bottom:8px; font-weight:600 }
.site-footer .footer-nav a{ color: var(--accent); text-decoration:none; padding:0 6px }
.site-footer .footer-nav .sep{ color:#000; padding:0 6px }
.site-footer .copyright{ text-align:center; color:var(--muted); font-size:14px }
.price{ color:var(--accent); font-weight:700; margin-top:8px }

.btn{ display:inline-block; padding:8px 12px; background:transparent; border:1px solid var(--input-border); border-radius:10px; color:var(--text); text-decoration:none; font-size:14px }
.btn.primary{ background: linear-gradient(90deg,var(--accent),var(--accent-600)); color:#fff }

/* 粒子 / 渐变动效背景层（轻量） */
/* subtle light background texture instead of dark particles */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(closest-side at 10% 20%, rgba(37,99,235,0.06), transparent 30%), radial-gradient(closest-side at 80% 80%, rgba(30,64,175,0.04), transparent 30%);
  background-size: 800px 800px, 600px 600px;
  mix-blend-mode: normal; opacity:0.18; will-change:transform;
  animation: none;
}

@keyframes particlesMove{
  0%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(-6%,4%,0) }
  100%{ transform: translate3d(0,0,0) }
}

/* ensure content sits above particles */
.container{ position:relative; z-index:1 }

/* 更紧凑的移动端字号/间距（响应式） */
.card .price{ font-size:13px }
body{ font-size:13px }
.typewriter{ font-size:18px }
.card-body{ padding:10px }
.product-title{ font-size:16px }
.btn{ padding:8px 10px; font-size:13px }

@media (min-width:420px){
  /* 稍大屏幕放大一点 */
  body{ font-size:14px }
  .typewriter{ font-size:20px }
  .btn{ padding:9px 12px; font-size:14px }
}

/* single column on small phones */
/* keep two columns for most phones; only single column for very narrow screens */
@media (max-width:320px){ .grid{ column-count:1 } }

/* increase to 3 columns on large phones in landscape */
@media (min-width:420px) and (orientation:landscape){ .grid{ column-count:3 } }

/* Product page mobile tweaks */
.product-wrap{ padding:8px 6px; }
.product-block{ padding:12px; border-radius:10px; }
.product-title{ font-size:18px; font-weight:800; color:var(--text); margin-bottom:6px }
#block-purchase{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 6px }
.product-price{ font-size:18px; color:var(--accent); font-weight:800 }
#block-purchase .price-box{ display:flex; flex-direction:column }
#block-purchase .price-box .label{ color:var(--muted); font-size:12px }
#block-purchase .price-box .amount{ font-size:20px; color:var(--accent); font-weight:900 }
#buy{ padding:10px 14px; border-radius:12px }
#buy.btn.primary{ box-shadow: 0 8px 24px rgba(124,58,237,0.16) }
#image-container{ width:100%; max-width:100%; background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(255,255,255,0.01)); border-radius:10px; padding:6px; display:flex; align-items:center; justify-content:center }
.placeholder-block{ min-height:260px; display:flex; align-items:center; justify-content:center; color:var(--muted); border-radius:10px }
.access-block{ padding:10px; border-radius:10px; margin-top:8px }

/* ensure buttons are touch friendly */
.btn{ padding:10px 14px; border-radius:10px }