/* ===================== 首页（参考主流鲜花小程序骨架） ===================== */
.home-page { padding-top: 6px; }

.home-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 14px; margin-bottom: 12px;
  color: var(--muted); font-size: 13px;
}
.home-search__icon { font-size: 13px; }
.home-search__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-banner {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); min-height: 158px;
  box-shadow: var(--shadow-sm);
  background-color: #fdf6f0;
}
/* 左白右透的浅色遮罩：文案压在左侧永远清晰，右侧还看得见花 */
.home-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(255, 253, 250, 0.95) 0%,
    rgba(255, 252, 248, 0.88) 36%,
    rgba(255, 250, 246, 0.42) 66%,
    rgba(255, 248, 242, 0.14) 100%
  );
}
/* 文案加深一档，配浅底更实 */
.home-banner__title { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75); }
.home-banner__inner {
  position: relative; z-index: 2; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.home-banner__eyebrow {
  font-size: 9.5px; letter-spacing: 0.22em; color: rgba(43, 35, 32, 0.55);
  text-transform: uppercase;
}
.home-banner__title {
  font-size: 21px; line-height: 1.32; font-weight: 700;
  color: #4a2b33; letter-spacing: 0.01em;
}
.home-banner__cta {
  margin-top: 6px; align-self: flex-start;
  background: rgba(255, 255, 255, 0.72); color: var(--rose-dark);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600;
}
.home-banner__deco {
  position: absolute; right: -8px; bottom: -14px; font-size: 96px;
  opacity: 0.85; transform: rotate(-8deg); z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(196, 82, 110, 0.25));
}

/* 双入口：到店自取 / 同城配送 */
.entry-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.entry-card {
  border-radius: var(--radius); padding: 14px 14px 13px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid transparent;
}
.entry-card--pickup { background: linear-gradient(150deg, #fdeff3, #f8dfe6); }
.entry-card--deliver { background: linear-gradient(150deg, #eef5ee, #dcebdc); }
.entry-card__emoji { font-size: 22px; margin-bottom: 2px; }
.entry-card__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.entry-card__sub { font-size: 11px; color: var(--ink-2); opacity: 0.75; }

/* 三小卡：送爱人 / 送长辈 / 送朋友 */
.scene-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.trio-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 8px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.trio-card__emoji {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.trio-card__title { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.trio-card__sub { font-size: 10px; color: var(--muted); }

/* 四大场合卡 */
.scene-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.quad-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: 15px 14px; min-height: 86px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.quad-card__emoji { position: absolute; right: 8px; bottom: 2px; font-size: 44px; opacity: 0.5; }
.quad-card__title { font-size: 15px; font-weight: 700; color: #46302f; position: relative; z-index: 1; }
.quad-card__sub { font-size: 10.5px; color: rgba(70, 48, 47, 0.66); position: relative; z-index: 1; }

/* 会员权益横幅 */
.member-banner {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, #3b2b26, #6b4a3f 62%, #8a5b45);
  box-shadow: 0 6px 18px rgba(59, 43, 38, 0.22);
}
.member-banner__title { font-size: 13px; font-weight: 700; color: #f7e7c8; }
.member-banner__sub { font-size: 10.5px; color: rgba(247, 231, 200, 0.72); margin-top: 1px; }
.member-banner__cta {
  margin-left: auto; font-size: 11.5px; color: #3b2b26;
  background: #f2d9a4; border-radius: 999px; padding: 5px 12px; font-weight: 600;
}

/* ===================== 分类页：圆形场合导航（竞品样式） ===================== */
.scene-rail {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 6px;
  scrollbar-width: none;
}
.scene-rail::-webkit-scrollbar { display: none; }
.scene-avatar {
  flex: none; width: 58px; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.scene-avatar__circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.scene-avatar__label {
  font-size: 11px; color: var(--ink-2); max-width: 58px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scene-avatar.is-active .scene-avatar__circle {
  border-color: var(--rose); background: var(--rose-soft); transform: translateY(-1px);
}
.scene-avatar.is-active .scene-avatar__label { color: var(--rose-dark); font-weight: 600; }

@media (max-width: 380px) {
  .home-banner__title { font-size: 19px; }
  .quad-card__emoji { font-size: 38px; }
}