/* ============================================================
   FORM / SUIT —— 复刻小程序设计（rpx 值 ÷2 换算为 px）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #f6f4f0;
  --ink: #171717;
  --muted: #77736d;
  --muted2: #67635d;
  --line: #d8d3cc;
  --serif: Georgia, "Times New Roman", "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: #e7e3dc;
  color: var(--ink);
  line-height: 1.5;
}

/* 手机壳容器：桌面居中，手机全屏 */
.app {
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,.08);
  overflow-x: hidden;
}

/* ============ 页面切换 ============ */
.page {
  display: none;
  padding: 16px 16px 40px;
  animation: pageIn .32s ease;
}
.page.is-active { display: block; }
@keyframes pageIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============ 通用 ============ */
.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.4;
}

/* ============ 首页 ============ */
.brand-lockup { display: flex; flex-direction: column; margin: 8px 0 16px; }
.brand-name { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 1.5px; line-height: 1; }
.brand-subtitle { color: var(--muted); font-size: 9px; letter-spacing: 2px; margin-top: 7px; }

.hero { background: #d8d2c9; height: 360px; overflow: hidden; position: relative; cursor: pointer; }
.hero-image { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(17,17,17,.12); }
.hero-content { position: absolute; left: 18px; right: 18px; bottom: 20px; color: #fff; z-index: 1; }
.hero-eyebrow { color: rgba(255,255,255,.82); }
.hero-title { display: block; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.22; margin-top: 8px; }
.hero-cta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: 16px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.88); }
.arrow { font-size: 17px; line-height: .7; }

.section-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 0 10px; }
.section-title { display: block; font-size: 17px; font-weight: 600; margin-top: 6px; }
.section-link { border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 11px; padding-bottom: 2px; cursor: pointer; }

/* 男女切换 */
.gender-switch { display: flex; gap: 22px; border-bottom: 1px solid #ddd9d2; }
.gender-option { color: #86817a; font-size: 13px; padding: 9px 0 8px; cursor: pointer; }
.gender-option.is-active { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); margin-bottom: -1px; }

/* 商品网格 */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 10px; margin-top: 16px; }
.product-card { min-width: 0; cursor: pointer; }
.product-image-wrap { background: #e9e5df; overflow: hidden; position: relative; aspect-ratio: 0.76; }
.product-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:active .product-image { transform: scale(1.04); }
.product-meta { padding-top: 8px; }
.product-code { display: block; color: #7a756d; font-size: 9px; letter-spacing: .8px; margin-bottom: 4px; }
.product-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.product-tags { display: block; color: #77726b; font-size: 10px; line-height: 1.4; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 首页底部说明 */
.collection-notes { border-top: 1px solid #d4d0c9; margin-top: 40px; padding: 22px 0 6px; }
.notes-title { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.28; margin-top: 9px; }
.notes-copy { display: block; color: var(--muted2); font-size: 12px; line-height: 1.8; margin-top: 12px; }

/* ============ 顶栏（目录/详情） ============ */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 30px; margin-bottom: 8px; }
.back-btn { font-size: 13px; color: var(--ink); cursor: pointer; }
.topbar-brand { font-family: var(--serif); font-size: 12px; letter-spacing: 1px; color: var(--muted); }
.topbar-detail { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 5; }
.topbar-detail .back-btn, .topbar-detail .topbar-brand { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ============ 目录页 ============ */
.catalog-intro { margin: 14px 0 0; }
.catalog-title { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; margin-top: 10px; }
.catalog-copy { display: block; color: #68635d; font-size: 12px; margin-top: 10px; }
#catalogGenderSwitch { margin-top: 26px; }
.scene-scroll { margin: 16px -16px 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scene-scroll::-webkit-scrollbar { display: none; }
.scene-options { display: inline-flex; gap: 8px; padding: 0 16px; }
.scene-chip { border: 1px solid #c5c0b8; color: #56514a; display: inline-block; font-size: 11px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.scene-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalog-count { display: flex; justify-content: space-between; color: #716c64; font-size: 10px; letter-spacing: .5px; margin: 21px 0 11px; }
.catalog-grid { margin-top: 0; }
#catalogGrid { margin-top: 0; }
.product-catalog-img { aspect-ratio: 0.74; }
.empty-state { color: #77726b; font-size: 12px; padding: 40px 0; text-align: center; }

/* ============ 详情页 ============ */
.page-detail { padding: 0; }
.detail-image-wrap { background: #dfdbd5; width: 100%; height: 430px; }
.detail-image { width: 100%; height: 100%; object-fit: cover; }
.detail-content { padding: 21px 16px 38px; }
.detail-title { display: block; font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.22; margin-top: 9px; }
.detail-description { display: block; color: #5e5953; font-size: 13px; line-height: 1.75; margin-top: 13px; }

.specs { border-top: 1px solid #cfcac3; margin-top: 25px; }
.spec-row { display: flex; gap: 17px; align-items: flex-start; border-bottom: 1px solid var(--line); padding: 14px 0; }
.spec-label { color: #807a73; flex: 0 0 49px; font-size: 11px; }
.spec-value { flex: 1; font-size: 12px; line-height: 1.55; }

.color-section, .care-section { border-bottom: 1px solid var(--line); padding: 20px 0; }
.color-list { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 12px; }
.color-item { display: flex; align-items: center; font-size: 11px; gap: 6px; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.16); }
.care-copy { display: block; color: #5e5953; font-size: 12px; line-height: 1.7; margin-top: 9px; }
.detail-footer { display: flex; justify-content: space-between; color: #77726b; font-size: 9px; letter-spacing: 1px; margin-top: 34px; }

/* 详情页返回时轻微动画 */
#pageDetail { animation: none; }
#pageDetail.is-active { animation: pageUp .34s ease; }
@keyframes pageUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}