/**
 * 火彩商城 - 首页样式
 * Apple Store 风格 homepage-v4
 */

/* ===== 首页布局调整 ===== */
.layout-homepage {
  overflow-x: hidden;
}

/* 首页头部 - 固定在顶部 */
.layout-homepage > .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header-homepage {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 主导航栏 - 简洁版 */
.site-nav-simple {
  width: 100%;
  height: 56px; /* 固定高度，不依赖变量 */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--color-border);
  transition: top var(--transition-base) var(--ease-out);
}

/* 当有通知栏时，导航栏下移 */
body.has-notice .site-header-homepage {
  top: 44px !important;
}

/* 当有状态栏时，导航栏下移 */
body.has-status .site-header-homepage {
  top: 44px !important;
}

/* 当同时有通知栏和状态栏时，导航栏进一步下移 */
body.has-notice.has-status .site-header-homepage {
  top: 88px !important; /* 44px + 44px */
}

.nav-container-simple {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand-simple {
  flex-shrink: 0;
}

.nav-logo-link-simple {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-logo-link-simple:hover {
  opacity: 0.8;
}

.nav-logo-icon-simple {
  width: 24px;
  height: 24px;
}

.nav-logo-img-simple {
  height: 32px;
  width: auto;
  display: block;
}

.nav-actions-simple {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 40px;
}

.nav-action-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-primary);
  transition: color 0.2s ease;
  position: relative;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
}

.nav-action-simple:hover {
  color: var(--color-primary);
}

.nav-action-simple svg {
  width: 20px;
  height: 20px;
}

/* ===== 购物车图标 - 亚马逊风格 ===== */
.nav-cart-simple {
  position: relative;
}

.nav-cart-simple .cart-icon {
  width: 28px;
  height: 28px;
  color: var(--color-text-primary);
  transition: color 0.2s ease;
}

.nav-cart-simple:hover .cart-icon {
  color: var(--color-primary);
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  background: #FF9900;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

/* 当数量为0时隐藏徽章 */
.cart-badge:empty {
  display: none;
}

/* 移动端导航优化 */
@media (max-width: 767px) {
  .nav-container-simple {
    padding: 0 12px;
  }

  .nav-actions-simple {
    gap: 2px;
    padding-left: 16px;
  }

  .nav-action-simple {
    width: 36px;
    height: 36px;
  }
}

.site-main-homepage {
  padding-top: 122px; /* 57px nav (56+1 border) + 65px secondary-nav (64+1 border) */
}

/* 当有通知栏时 */
body.has-notice .site-main-homepage {
  padding-top: 166px; /* 122px + 44px notice */
}

/* 当有状态栏时 */
body.has-status .site-main-homepage {
  padding-top: 166px; /* 122px + 44px status */
}

/* 当同时有通知栏和状态栏时 */
body.has-notice.has-status .site-main-homepage {
  padding-top: 210px; /* 122px + 44px + 44px */
}

/* ===== 二级导航 - 图标横向滚动 ===== */
.secondary-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 64px; /* 增加高度以容纳图标+文字 */
  position: fixed !important;
  top: 56px !important; /* 紧贴在主导航下面 */
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  margin: 0 !important;
  transition: top var(--transition-base) var(--ease-out);
}

/* 当有通知栏时，二级导航下移 */
body.has-notice .secondary-nav {
  top: 100px !important; /* 56px + 44px */
}

/* 当有状态栏时，二级导航下移 */
body.has-status .secondary-nav {
  top: 100px !important; /* 56px + 44px */
}

/* 当同时有通知栏和状态栏时，二级导航进一步下移 */
body.has-notice.has-status .secondary-nav {
  top: 144px !important; /* 56px + 44px + 44px */
}

.secondary-nav-items {
  display: flex;
  align-items: center;
  min-width: max-content;
}

/* 图标+文字垂直布局导航项 */
.nav-item-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color 0.2s ease;
  position: relative;
  min-width: 52px;
  flex-shrink: 0;
  height: 100%;
  box-sizing: border-box;
}

.nav-item-icon:hover {
  color: var(--color-primary);
}

.nav-item-icon.active {
  color: var(--color-primary);
}

.nav-item-icon.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--color-primary);
}

.nav-item-icon-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}

.nav-item-icon-icon svg {
  width: 18px;
  height: 18px;
}

.nav-item-icon-label {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
}

/* ===== 横向滚动容器 ===== */
.scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
  display: none;
}
.scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== 二级导航滑动指示器 ===== */
.secondary-nav-dots {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 10;
}

.secondary-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(110, 110, 115, 0.4); /* 灰色 */
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
}

.secondary-nav-dot:hover {
  background: rgba(110, 110, 115, 0.7); /* 深灰色 */
}

.secondary-nav-dot.active {
  width: 20px;
  border-radius: 4px;
  background: rgba(110, 110, 115, 1); /* 纯灰色 */
}

/* ===== 内容区域 ===== */
.content-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-4);
}

/* 首页幻灯片区域添加顶部间距 */
.site-main-homepage > .content-section:first-child {
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .site-main-homepage > .content-section:first-child {
    margin-top: var(--space-4);
  }
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
}

.blue-link {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.blue-link:hover {
  color: var(--color-primary-dark);
}

/* ===== Hero 轮播样式 ===== */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  z-index: 1;
}

.slider-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.slide-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--space-4);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .slide-content {
    padding: 50px var(--space-6);
    aspect-ratio: 16 / 7;
  }
}

@media (min-width: 1024px) {
  .slide-content {
    padding: 60px var(--space-10);
    aspect-ratio: 21 / 9;
  }
}

.slide-bg-gradient {
  position: absolute;
  inset: 0;
}

/* 幻灯片背景图片 */
.slide-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  /* 默认遮罩不透明度为 30%，可通过内联样式 --overlay-opacity 覆盖 */
  --overlay-opacity: 0.3;
}

/* 为背景图片添加遮罩以提高文字可读性 */
.slide-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity));
  z-index: 1;
}

/* 确保内容在背景图片之上 */
.slide-bg-image ~ .slide-content-inner {
  z-index: 10;
  position: relative;
}

.slide-content-1 .slide-bg-gradient {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
}

.slide-content-2 .slide-bg-gradient {
  background: linear-gradient(135deg, #5856D6 0%, #3634A3 100%);
}

.slide-content-3 .slide-bg-gradient {
  background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%);
}

.slide-content-4 .slide-bg-gradient {
  background: linear-gradient(135deg, #34C759 0%, #248A3D 100%);
}

.slide-content-inner {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  max-width: 100%;
  padding: 0 var(--space-2);
}

@media (min-width: 768px) {
  .slide-content-inner {
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  .slide-content-inner {
    max-width: 800px;
  }
}

.slide-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .slide-badge {
    padding: var(--space-2) var(--space-5);
    font-size: 14px;
    margin-bottom: var(--space-4);
  }
}

.slide-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .slide-title {
    font-size: 32px;
    margin-bottom: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .slide-title {
    font-size: 48px;
    line-height: 1.2;
  }
}

.slide-description {
  font-size: 14px;
  opacity: 0.95;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .slide-description {
    font-size: 16px;
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .slide-description {
    font-size: 18px;
  }
}

.slide-cta {
  display: inline-block;
  padding: 10px 20px;
  background: white;
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .slide-cta {
    padding: 14px var(--space-8);
    font-size: 16px;
  }
}

.slide-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 轮播指示器 */
.slider-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 20;
}

@media (min-width: 768px) {
  .slider-dots {
    bottom: var(--space-5);
  }
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--dot-color-default, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot:hover {
  background: var(--dot-color-hover, rgba(255, 255, 255, 0.8));
}

.slider-dot.active {
  width: 20px;
  border-radius: var(--radius-sm);
  background: var(--dot-color-active, white);
}

@media (min-width: 768px) {
  .slider-dot.active {
    width: 24px;
  }
}

/* 轮播箭头 - 隐藏 */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 20;
}

.slider-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.slider-arrow svg {
  width: 24px;
  height: 24px;
  color: white;
}

.slider-arrow-prev {
  left: var(--space-4);
}

.slider-arrow-next {
  right: var(--space-4);
}

/* ===== 大卡片通用样式 ===== */
.large-card {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  flex-shrink: 0;
}

.large-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ===== 视频播放卡片 ===== */
.video-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 视频加载指示器 */
.video-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
  transition: opacity 0.3s ease;
}

.video-loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.video-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: video-spin 0.8s linear infinite;
}

@keyframes video-spin {
  to {
    transform: rotate(360deg);
  }
}

.video-loading-text {
  margin-top: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* 移动端优化：更小的加载指示器 */
@media (max-width: 767px) {
  .video-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
  }

  .video-loading-text {
    font-size: 12px;
    margin-top: 12px;
  }
}

.video-info {
  padding: 20px;
}

.video-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.video-description {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.video-stats {
  display: flex;
  gap: 20px;
}

.video-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.video-stat svg {
  flex-shrink: 0;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .video-title {
    font-size: 24px;
  }

  .video-description {
    font-size: 16px;
  }

  .video-info {
    padding: 24px;
  }
}

/* ===== 首页内容容器 ===== */
.homepage-content {
  padding: 0;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .section-title {
    font-size: 28px;
  }

  .content-section {
    padding: 0 var(--space-4);
  }
}

/* ===== 搜索模态框 ===== */
.search-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-modal.active {
  display: block;
  opacity: 1;
}

.search-modal-content {
  background: white;
  border-radius: 0 0 20px 20px;
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.search-modal.active .search-modal-content {
  transform: translateY(0);
}

.search-modal-header {
  padding: 20px;
  border-bottom: 1px solid #F5F5F7;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.search-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F5F5F7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-back-btn:hover {
  background: #E8E8ED;
}

.search-back-btn svg {
  width: 20px;
  height: 20px;
}

.search-modal-input-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-modal-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-size: 17px;
  border: none;
  outline: none;
  background: transparent;
}

.search-modal-input::placeholder {
  color: #86868B;
}

.search-clear-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E8E8ED;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-clear-btn.show {
  display: flex;
}

.search-clear-btn:hover {
  background: #D2D2D7;
}

.search-clear-btn svg {
  width: 16px;
  height: 16px;
  color: #86868B;
}

.search-modal-submit {
  padding: 12px 24px;
  background: #0066CC;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.search-modal-submit:hover {
  background: #0052A3;
}

.search-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.search-section {
  margin-bottom: 32px;
}

.search-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #6E6E73;
  margin-bottom: 16px;
}

/* 猜您喜欢 - 产品卡片 */
.search-suggestions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* 手机端根据 data-mobile-limit 属性控制显示数量 */
.search-suggestions[data-mobile-limit="1"] .product-card[data-product-index]:nth-child(n+2),
.search-suggestions[data-mobile-limit="2"] .product-card[data-product-index]:nth-child(n+3),
.search-suggestions[data-mobile-limit="3"] .product-card[data-product-index]:nth-child(n+4) {
  display: none;
}

.search-suggestion-item.product-card {
  padding: 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-suggestion-item.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.product-card-image {
  width: 100%;
  aspect-ratio: 1;
  background: #F5F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-title {
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1D1D1F;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 34px;
}

/* 热门搜索 */
.hot-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hot-keyword {
  padding: 8px 16px;
  background: #F5F5F7;
  border-radius: 20px;
  font-size: 13px;
  color: #0066CC;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hot-keyword:hover {
  background: #E8E8ED;
}

/* 搜索历史 */
.search-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #F5F5F7;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-item:hover {
  background: #E8E8ED;
}

.history-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-icon {
  width: 20px;
  height: 20px;
  color: #86868B;
  flex-shrink: 0;
}

.history-text {
  font-size: 15px;
  color: #1D1D1F;
}

.history-delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-delete:hover {
  background: #E8E8ED;
}

.history-delete svg {
  width: 16px;
  height: 16px;
  color: #86868B;
}

.history-delete:hover svg {
  color: #FF3B30;
}

.empty-history {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

@media (min-width: 768px) {
  .search-suggestions {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 桌面端显示所有产品 */
  .search-suggestions[data-mobile-limit] .product-card[data-product-index] {
    display: flex !important;
  }
}

/* ===== 登录模态框 ===== */
.login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.login-modal.active {
  display: block;
  opacity: 1;
}

.login-modal-content {
  background: white;
  border-radius: 0 0 20px 20px;
  max-width: 450px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.login-modal.active .login-modal-content {
  transform: translateY(0);
}

.login-modal-header {
  padding: 20px;
  border-bottom: 1px solid #F5F5F7;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.login-modal-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0;
}

.login-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.login-form-group {
  margin-bottom: 20px;
}

.login-form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #6E6E73;
  margin-bottom: 8px;
}

.login-form-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid #D2D2D7;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s ease;
}

.login-form-input:focus {
  border-color: #0066CC;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.login-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.login-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #1D1D1F;
}

.login-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.login-forgot-link {
  font-size: 14px;
  color: #0066CC;
  text-decoration: none;
}

.login-forgot-link:hover {
  color: #0052A3;
}

.login-submit-btn {
  width: 100%;
  padding: 14px;
  background: #0066CC;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-submit-btn:hover {
  background: #0052A3;
}

.login-form-footer {
  margin-top: 20px;
  text-align: center;
}

.login-form-footer p {
  font-size: 14px;
  color: #6E6E73;
  margin: 0;
}

.login-register-link {
  color: #0066CC;
  text-decoration: none;
  font-weight: 500;
}

.login-register-link:hover {
  color: #0052A3;
}

.login-social-divider {
  display: flex;
  align-items: center;
  margin: 32px 0 24px;
  color: #86868B;
  font-size: 14px;
}

.login-social-divider::before,
.login-social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E8E8ED;
}

.login-social-divider span {
  padding: 0 16px;
}

.login-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-btn {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid #D2D2D7;
  border-radius: 10px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.social-btn:hover {
  background: #F5F5F7;
}

.wechat-btn {
  color: #07C160;
  border-color: #07C160;
}

.wechat-btn:hover {
  background: #F0F9EB;
}

.social-icon {
  width: 24px;
  height: 24px;
}

/* ===== 用户头像按钮 ===== */
.user-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.user-avatar-btn:hover {
  background: linear-gradient(135deg, #0052A3 0%, #004080 100%);
  transform: scale(1.05);
}

/* ===== Drupal 登录表单样式 ===== */
.login-modal-body form {
  margin: 0;
}

.login-modal-body .form-item {
  margin-bottom: 20px;
}

.login-modal-body label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  margin-bottom: 8px;
}

.login-modal-body input[type="text"],
.login-modal-body input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid #D2D2D7;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.login-modal-body input[type="text"]:focus,
.login-modal-body input[type="password"]:focus {
  border-color: #0066CC;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.login-modal-body .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.login-modal-body .form-type-checkbox label {
  margin: 0;
  font-size: 14px;
  color: #1D1D1F;
  cursor: pointer;
}

.login-modal-body .form-type-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* 完全隐藏 Drupal 登录表单默认生成的所有链接 */
.login-modal-body .item-list,
.login-modal-body .item-list *,
.login-modal-body > form > .item-list,
.login-modal-body > form > div:last-of-type:not(.form-item):not(.form-actions):not(.js-form-wrapper),
.login-modal-body .more-links,
.login-modal-body #edit-more-links {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.login-modal-body input[type="submit"],
.login-modal-body button[type="submit"] {
  width: 100%;
  padding: 14px;
  background: #0066CC;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-modal-body input[type="submit"]:hover,
.login-modal-body button[type="submit"]:hover {
  background: #0052A3;
}

.login-modal-body .description {
  font-size: 12px;
  color: #86868B;
  margin-top: 8px;
}

/* 登录表单底部链接 */
.login-form-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding: 20px;
  background: #F5F5F7;
  border-radius: 12px;
}

.login-footer-link {
  font-size: 16px;
  font-weight: 600;
  color: #0066CC;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-block;
}

.login-footer-link:hover {
  color: #0052A3;
  background: white;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}

.login-footer-divider {
  color: #C7C7CC;
  font-size: 16px;
  font-weight: 600;
}

/* ===== 用户菜单模态框 ===== */
.user-menu-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.user-menu-modal.active {
  display: block;
  opacity: 1;
}

.user-menu-modal-content {
  background: white;
  border-radius: 0 0 20px 20px;
  max-width: 500px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.user-menu-modal.active .user-menu-modal-content {
  transform: translateY(0);
}

.user-menu-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #E8E8ED;
}

.user-menu-modal-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0;
}

.user-menu-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.user-info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #F5F5F7 0%, #E8E8ED 100%);
  border-radius: 12px;
  margin-bottom: 24px;
}

.user-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar-text-large {
  font-size: 28px;
  font-weight: 600;
  color: white;
}

.user-info-details {
  flex: 1;
  min-width: 0;
}

.user-info-name {
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-info-email {
  font-size: 14px;
  color: #6E6E73;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.user-menu-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 1px solid #E8E8ED;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.user-menu-option:hover {
  background: #F5F5F7;
  border-color: #D2D2D7;
  transform: translateX(4px);
}

.menu-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F5F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0066CC;
}

.menu-option-icon svg {
  width: 20px;
  height: 20px;
}

.menu-option-text {
  flex: 1;
  min-width: 0;
}

.menu-option-title {
  font-size: 16px;
  font-weight: 500;
  color: #1D1D1F;
  margin-bottom: 2px;
}

.menu-option-desc {
  font-size: 13px;
  color: #86868B;
}

.menu-option-arrow {
  width: 20px;
  height: 20px;
  color: #C7C7CC;
  flex-shrink: 0;
}

.user-menu-footer {
  border-top: 1px solid #E8E8ED;
  padding-top: 20px;
}

.user-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: white;
  border: 1px solid #FF3B30;
  color: #FF3B30;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.user-logout-btn:hover {
  background: #FF3B30;
  color: white;
}

.user-logout-btn svg {
  width: 20px;
  height: 20px;
}

/* ===== 购物车模态框 ===== */
.cart-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cart-modal.active {
  display: block;
  opacity: 1;
}

.cart-modal-content {
  background: white;
  border-radius: 0 0 20px 20px;
  max-width: 500px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.cart-modal.active .cart-modal-content {
  transform: translateY(0);
}

.cart-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #E8E8ED;
}

.cart-modal-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0;
}

.cart-count-badge {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: #0066CC;
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  margin-left: 8px;
}

.cart-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 购物车为空 */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.cart-empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  color: #D2D2D7;
}

.cart-empty-icon svg {
  width: 100%;
  height: 100%;
}

.cart-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 8px;
}

.cart-empty-desc {
  font-size: 14px;
  color: #86868B;
  margin-bottom: 24px;
}

.cart-empty-btn {
  padding: 12px 32px;
  background: #0066CC;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cart-empty-btn:hover {
  background: #0052A3;
}

/* 购物车商品列表 */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #F5F5F7;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.cart-item:hover {
  background: #E8E8ED;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: white;
  flex-shrink: 0;
  overflow: hidden;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: 16px;
  font-weight: 500;
  color: #1D1D1F;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-variant {
  font-size: 13px;
  color: #86868B;
  margin-bottom: 8px;
}

.cart-item-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cart-item-price {
  font-size: 16px;
  font-weight: 600;
  color: #1D1D1F;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-item-quantity button {
  width: 28px;
  height: 28px;
  border: 1px solid #D2D2D7;
  background: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-item-quantity button:hover {
  background: #E8E8ED;
  border-color: #C7C7CC;
}

.cart-item-quantity span {
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
}

.cart-item-remove {
  color: #FF3B30;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.cart-item-remove svg {
  width: 20px;
  height: 20px;
}

/* 购物车底部 */
.cart-modal-footer {
  padding: 20px;
  border-top: 1px solid #E8E8ED;
  background: white;
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cart-subtotal-label {
  font-size: 16px;
  color: #6E6E73;
}

.cart-subtotal-amount {
  font-size: 20px;
  font-weight: 600;
  color: #1D1D1F;
}

.cart-checkout-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #0066CC;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
}

.cart-checkout-btn:hover {
  background: #0052A3;
}

/* ===== 用户下拉菜单 ===== */
.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: var(--space-3);
  display: none;
  z-index: 100;
}

.user-menu-dropdown.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

.user-menu-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
  gap: var(--space-3);
}

.user-menu-item:hover {
  background: var(--color-bg-hover);
}

.user-menu-item svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

.user-menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

/* ===== 帮助选择卡片 ===== */
/* 卡片容器 - 横向滚动 */
.help-selection-container {
  display: flex;
  gap: 12px;
  width: max-content;
}

/* 单个帮助卡片 */
.help-selection-card {
  display: block;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  width: 300px; /* 移动端默认宽度 */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .help-selection-card {
    width: 360px; /* 桌面端宽度 */
  }
}

.help-selection-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 卡片内边距 */
.help-selection-card-padding {
  padding: 32px;
}

/* 图标容器 */
.help-selection-icon-container {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.help-selection-icon-container svg {
  width: 32px;
  height: 32px;
}

/* 图标渐变背景 */
.help-selection-icon-blue {
  background: linear-gradient(to bottom right, #DBEAFE, #BFDBFE);
}
.help-selection-icon-blue svg {
  color: #2563EB;
}

.help-selection-icon-pink {
  background: linear-gradient(to bottom right, #FCE7F3, #FBCFE8);
}
.help-selection-icon-pink svg {
  color: #DB2777;
}

.help-selection-icon-green {
  background: linear-gradient(to bottom right, #D1FAE5, #A7F3D0);
}
.help-selection-icon-green svg {
  color: #059669;
}

.help-selection-icon-amber {
  background: linear-gradient(to bottom right, #FEF3C7, #FDE68A);
}
.help-selection-icon-amber svg {
  color: #D97706;
}

.help-selection-icon-purple {
  background: linear-gradient(to bottom right, #E9D5FF, #DDD6FE);
}
.help-selection-icon-purple svg {
  color: #7C3AED;
}

.help-selection-icon-red {
  background: linear-gradient(to bottom right, #FEE2E2, #FECACA);
}
.help-selection-icon-red svg {
  color: #DC2626;
}

.help-selection-icon-orange {
  background: linear-gradient(to bottom right, #FFEDD5, #FED7AA);
}
.help-selection-icon-orange svg {
  color: #EA580C;
}

.help-selection-icon-teal {
  background: linear-gradient(to bottom right, #CCFBF1, #99F6E4);
}
.help-selection-icon-teal svg {
  color: #0D9488;
}

/* 卡片标题 */
.help-selection-card-heading {
  font-size: 20px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 8px;
}

/* 卡片描述 */
.help-selection-card-text {
  font-size: 14px;
  color: #6E6E73;
}

/* ===== 热门产品卡片 ===== */
/* 区域标题容器 */
.content-section > .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .content-section > .section-header {
    margin-bottom: 32px;
  }
}

.content-section > .section-header .section-link {
  font-size: 14px;
  flex-shrink: 0;
  margin-right: var(--space-3);
}

/* 产品卡片容器 */
.hot-products-container {
  display: flex;
  gap: 12px;
  width: max-content;
}

/* 单个产品卡片 */
.hot-product-card {
  display: block;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  width: 300px;
}

@media (min-width: 768px) {
  .hot-product-card {
    width: 360px;
  }
}

.hot-product-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 产品图片区域 */
.hot-product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* 背景渐变色 */
.hot-product-gradient-gray {
  background: linear-gradient(to bottom right, #F9FAFB, #F3F4F6);
}

.hot-product-gradient-blue {
  background: linear-gradient(to bottom right, #DBEAFE, #BFDBFE);
}

.hot-product-gradient-green {
  background: linear-gradient(to bottom right, #D1FAE5, #A7F3D0);
}

.hot-product-gradient-purple {
  background: linear-gradient(to bottom right, #E9D5FF, #DDD6FE);
}

.hot-product-gradient-orange {
  background: linear-gradient(to bottom right, #FFEDD5, #FED7AA);
}

.hot-product-gradient-pink {
  background: linear-gradient(to bottom right, #FCE7F3, #FBCFE8);
}

/* 产品徽章 */
.hot-product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  z-index: 1;
}

.hot-product-badge-red {
  background: #EF4444;
}

.hot-product-badge-blue {
  background: #3B82F6;
}

.hot-product-badge-green {
  background: #10B981;
}

.hot-product-badge-orange {
  background: #F59E0B;
}

.hot-product-badge-purple {
  background: #8B5CF6;
}

/* 产品图片或图标 */
.hot-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 200px;
}

.hot-product-icon {
  width: 200px;
  height: 200px;
  color: #9CA3AF;
}

.hot-product-gradient-blue .hot-product-icon {
  color: #3B82F6;
}

.hot-product-gradient-green .hot-product-icon {
  color: #10B981;
}

.hot-product-gradient-purple .hot-product-icon {
  color: #8B5CF6;
}

.hot-product-gradient-orange .hot-product-icon {
  color: #F59E0B;
}

.hot-product-gradient-pink .hot-product-icon {
  color: #EC4899;
}

/* 产品信息区域 */
.hot-product-info {
  padding: 16px;
}

/* 产品标题 */
.hot-product-title {
  font-size: 16px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 4px;
}

/* 产品描述 */
.hot-product-description {
  font-size: 14px;
  color: #6E6E73;
  margin-bottom: 8px;
}

/* 产品价格 */
.hot-product-price {
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
}

/* ===== 最新产品卡片 ===== */
/* 产品卡片容器 */
.latest-products-container {
  display: flex;
  gap: 12px;
  width: max-content;
}

/* 单个产品卡片 */
.latest-product-card {
  display: block;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  width: 300px;
}

@media (min-width: 768px) {
  .latest-product-card {
    width: 360px;
  }
}

.latest-product-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* 产品图片包装器 */
.latest-product-image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 背景图片 - 占满整个卡片 */
.latest-product-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* 产品徽章 */
.latest-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  z-index: 2;
}

.latest-product-badge-red {
  background: #EF4444;
}

.latest-product-badge-blue {
  background: #3B82F6;
}

.latest-product-badge-green {
  background: #10B981;
}

.latest-product-badge-orange {
  background: #F59E0B;
}

.latest-product-badge-purple {
  background: #8B5CF6;
}

/* 产品覆盖层 */
.latest-product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 1;
}

/* 产品信息区域 */
.latest-product-info {
  color: white;
}

/* 产品标题 */
.latest-product-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

/* 产品描述 */
.latest-product-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

/* 产品价格 */
.latest-product-price {
  font-size: 18px;
  font-weight: 600;
  color: white;
}


/* ===== 茶园卡片 ===== */
/* 茶园卡片容器 */
.tea-gardens-container {
  display: flex;
  gap: 12px;
  width: max-content;
}

/* 单个茶园卡片 */
.tea-garden-card {
  display: block;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  width: 300px;
}

@media (min-width: 768px) {
  .tea-garden-card {
    width: 360px;
  }
}

.tea-garden-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* 茶园图片包装器 */
.tea-garden-image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 背景图片 - 占满整个卡片 */
.tea-garden-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* 茶园徽章 */
.tea-garden-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  z-index: 2;
}

.tea-garden-badge-red {
  background: #EF4444;
}

.tea-garden-badge-blue {
  background: #3B82F6;
}

.tea-garden-badge-green {
  background: #10B981;
}

.tea-garden-badge-orange {
  background: #F59E0B;
}

.tea-garden-badge-purple {
  background: #8B5CF6;
}

/* 茶园覆盖层 */
.tea-garden-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 1;
}

/* 茶园信息区域 */
.tea-garden-info {
  color: white;
}

/* 茶园标题 */
.tea-garden-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

/* 茶园描述 */
.tea-garden-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

/* ===== 二级导航动画效果 ===== */

/* 图片样式支持 */
.nav-item-icon-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* 脉冲动画 - 二级导航版本 */
@keyframes secondary-nav-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.nav-item-icon--pulse .nav-item-icon-icon svg,
.nav-item-icon--pulse .nav-item-icon-icon img,
.nav-item-svg--pulse {
  animation: secondary-nav-pulse 2s ease-in-out infinite;
}

/* 弹跳动画 */
@keyframes secondary-nav-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.nav-item-icon--bounce .nav-item-icon-icon svg,
.nav-item-icon--bounce .nav-item-icon-icon img,
.nav-item-svg--bounce {
  animation: secondary-nav-bounce 1.5s ease-in-out infinite;
}

/* 旋转动画 */
@keyframes secondary-nav-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.nav-item-icon--rotate .nav-item-icon-icon svg,
.nav-item-icon--rotate .nav-item-icon-icon img,
.nav-item-svg--rotate {
  animation: secondary-nav-rotate 3s linear infinite;
}

/* 摇晃动画 */
@keyframes secondary-nav-shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

.nav-item-icon--shake .nav-item-icon-icon svg,
.nav-item-icon--shake .nav-item-icon-icon img,
.nav-item-svg--shake {
  animation: secondary-nav-shake 0.8s ease-in-out infinite;
}

/* 闪烁动画 */
@keyframes secondary-nav-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.nav-item-icon--blink .nav-item-icon-icon svg,
.nav-item-icon--blink .nav-item-icon-icon img,
.nav-item-svg--blink {
  animation: secondary-nav-blink 1.2s ease-in-out infinite;
}

/* 呼吸动画 */
@keyframes secondary-nav-breath {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.nav-item-icon--breath .nav-item-icon-icon svg,
.nav-item-icon--breath .nav-item-icon-icon img,
.nav-item-svg--breath {
  animation: secondary-nav-breath 2.5s ease-in-out infinite;
}

/* 波浪动画 */
@keyframes secondary-nav-wave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-3deg);
  }
  50% {
    transform: translateY(-3px) rotate(0deg);
  }
  75% {
    transform: translateY(-2px) rotate(3deg);
  }
}

.nav-item-icon--wave .nav-item-icon-icon svg,
.nav-item-icon--wave .nav-item-icon-icon img,
.nav-item-svg--wave {
  animation: secondary-nav-wave 2s ease-in-out infinite;
}

/* 弹簧动画 */
@keyframes secondary-nav-spring {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  10% {
    transform: scale(1.08) translateY(-1px);
  }
  30% {
    transform: scale(0.97) translateY(0.5px);
  }
  50% {
    transform: scale(1.04) translateY(-0.5px);
  }
  70% {
    transform: scale(0.99) translateY(0.25px);
  }
  90% {
    transform: scale(1.01) translateY(-0.25px);
  }
}

.nav-item-icon--spring .nav-item-icon-icon svg,
.nav-item-icon--spring .nav-item-icon-icon img,
.nav-item-svg--spring {
  animation: secondary-nav-spring 1.8s ease-in-out infinite;
}

/* 发光动画 */
@keyframes secondary-nav-glow {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(0, 102, 204, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.8));
  }
}

.nav-item-icon--glow .nav-item-icon-icon svg,
.nav-item-icon--glow .nav-item-icon-icon img,
.nav-item-svg--glow {
  animation: secondary-nav-glow 2s ease-in-out infinite;
}

/* 悬浮动画 */
@keyframes secondary-nav-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.nav-item-icon--float .nav-item-icon-icon svg,
.nav-item-icon--float .nav-item-icon-icon img,
.nav-item-svg--float {
  animation: secondary-nav-float 3s ease-in-out infinite;
}

/* 魔法动画 - 悬浮+发光组合 */
@keyframes secondary-nav-magic {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 2px rgba(0, 102, 204, 0.5));
  }
  50% {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 0 6px rgba(0, 102, 204, 0.9));
  }
}

.nav-item-icon--magic .nav-item-icon-icon svg,
.nav-item-icon--magic .nav-item-icon-icon img,
.nav-item-svg--magic {
  animation: secondary-nav-magic 2.5s ease-in-out infinite;
}

/* 激活状态下的动画增强 */
.nav-item-icon.active .nav-item-icon-icon svg,
.nav-item-icon.active .nav-item-icon-icon img {
  animation-duration: 1.5s;
}

/* 悬停状态下的动画增强 */
.nav-item-icon:hover .nav-item-icon-icon svg,
.nav-item-icon:hover .nav-item-icon-icon img {
  animation-duration: 0.8s;
}

/* 减少动画效果 - 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav-item-icon-icon svg,
  .nav-item-icon-icon img,
  .nav-item-svg {
    animation: none !important;
  }
}

/* ===== 二级导航图片占满模式 ===== */

/* 图片占满时隐藏标签 */
.nav-item-icon--image-only .nav-item-icon-label {
  display: none;
}

/* 大图片样式 */
.nav-item-svg--large {
  width: 36px !important;
  height: 36px !important;
}

/* 图片占满模式的布局调整 */
.nav-item-icon--image-only .nav-item-icon-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
}

.nav-item-icon--image-only {
  padding: 14px 10px;
  min-width: 60px;
}

/* ===== 二级导航垂直翻滚效果 ===== */

/* 翻滚标签容器 - 相对定位，不设置固定高度 */
.nav-item-icon-label-scroll {
  display: block;
  position: relative;
  line-height: 1.2;
  overflow: hidden;
}

/* 标签样式 - 绝对定位叠加在同一位置 */
.nav-item-icon-label-scroll .nav-item-icon-label {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 第一段标签 - 默认显示，使用相对定位撑开容器高度 */
.nav-item-icon-label-scroll .nav-item-icon-label:first-child {
  position: relative;
  opacity: 1;
}

/* 翻滚动画 - 淡入淡出切换，更慢更平滑 */
@keyframes secondary-nav-fade-switch {
  0%, 42% {
    opacity: 1;
  }
  48%, 92% {
    opacity: 0;
  }
  98%, 100% {
    opacity: 1;
  }
}

@keyframes secondary-nav-fade-switch-alt {
  0%, 42% {
    opacity: 0;
  }
  48%, 92% {
    opacity: 1;
  }
  98%, 100% {
    opacity: 0;
  }
}

/* 应用动画到两段标签 - 6秒循环 */
.nav-item-icon--scroll .nav-item-icon-label-scroll .nav-item-icon-label:first-child {
  animation: secondary-nav-fade-switch 6s ease-in-out infinite;
}

.nav-item-icon--scroll .nav-item-icon-label-scroll .nav-item-icon-label:last-child {
  animation: secondary-nav-fade-switch-alt 6s ease-in-out infinite;
}

/* 主标签样式 */
.nav-item-icon-label--primary {
  font-weight: 500;
}

/* 翻滚标签样式 */
.nav-item-icon-label--scroll {
  font-weight: 600;
  color: var(--color-primary, #0066cc) !important;
}

/* 鼠标悬停时暂停动画 */
.nav-item-icon--scroll:hover .nav-item-icon-label-scroll .nav-item-icon-label {
  animation-play-state: paused;
}

/* 减少动画效果 - 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav-item-icon-label-scroll {
    animation: none !important;
  }
  
  .nav-item-icon-label-scroll .nav-item-icon-label {
    display: inline-block;
  }
  
  .nav-item-icon-label-scroll .nav-item-icon-label--scroll {
    display: inline-block;
    margin-left: 4px;
  }
}