/* 1. 顶部导航栏样式 */
header {
  background-color: #333; /* 暗灰色背景 */
  padding: 10px 0;
}

h2 {
  color: red;
}

header li {
  display: inline;
  margin-right: 4vw;
}

/* 导航菜单列表：横向一字排开 */
header nav ul {
  list-style: none;       /* 去掉默认圆点 */
  margin: 0;
  padding: 0;
  display: flex;          /* 横向 Flex 布局 */
  justify-content: center; /* 居中对齐 */
  gap: 20px;              /* 菜单项间距 */
}

/* 导航链接样式 */
header nav a {
  color: #ffffff;         /* 字体设为白色 */
  text-decoration: none;  /* 去掉下划线 */
  font-size: 16px;
  transition: color 0.2s;
}

header nav a:hover {
  color: #4caf50;         /* 悬浮变绿 */
}

/* 2. 拼豆画廊列表区域 */
.bead-gallery {
display: block;
text-align: center;
padding: 2vw;
max-width: 1200px;
margin: 0 auto;
}

.bead-gallery img {
width: 18vw;
min-width: 140px;
max-width: 220px;
aspect-ratio: 1 / 1;
object-fit: contain;
margin: 1vw;
border-radius: 8px;
background-color: #f7f7f7;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}

.bead-gallery img:hover {
transform: translateY(-4px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.bead-gallery a {
display: inline-block;
text-decoration: none;
}

/* 3. 搜索与筛选区域 */
.filter-section {
max-width: 800px;
margin: 20px auto;
text-align: center;
padding: 0 15px;
}

.search-box input {
width: 100%;
max-width: 400px;
padding: 10px 16px;
border: 2px solid #ddd;
border-radius: 20px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}

/* 4. 页脚区域 */
footer {
text-align: center;
padding: 20px 0;
font-size: 14px;
color: #666;
}

.footer-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}

.footer-content p {
margin: 0;
}

.legal-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
}

.legal-links a {
color: #555;
text-decoration: none;
}

.legal-links a:hover {
color: #000;
text-decoration: underline;
}