/* --- 1. 布局容器 (Layout) --- */
.section--banner {
    background-image: var(--bg-mobile, var(--bg-tablet, var(--bg-desktop)));
}
.wrap--banner {
       height: 50vh;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.banner-title {
    color: var(--background-color);
    font-size: 3.5rem;
    /* font-family: inherit; */
    text-shadow: 2px 2px 8px var(--brand-black-color);
}
.section--store {
    background: linear-gradient(to bottom, var(--brand-grey-color), var(--brand-ivory-color));
  color: var(--brand-black-color);
  background-color: var(--brand-grey-color);
}

.section--store h1,
.section--store h2,
.section--store h3,
.section--store p,
.section--store a {
  color: var(--brand-black-color);
}
/* --- 视图切换器 --- */
.view-switcher {
    margin-bottom: 20px;
    text-align: center;

}
.view-switcher button {
  color: var(--black-color);
    padding: 10px 20px;
    border: 1px solid var(--brand-grey-color);
    background-color: var(--background-color);
    cursor: pointer;
         font-size: 1.2em;
    font-weight: bold;
    /* font-family: inherit; */
}
.view-switcher button.active {
    background-color: var(--brand-red-color); /* WordPress 蓝色 */
    color: var(--background-color);
    border-color: var(--brand-red-color);
   
}
.view-switcher button:first-child {
    border-radius: 5px 0 0 5px;
}
.view-switcher button:last-child {
    border-radius: 0 5px 5px 0;
    margin-left: -1px; /* 让边框重叠 */
}

/* --- 视图内容容器 --- */
.view-content {
    display: none; /* 默认隐藏 */
}
.view-content.active {
    display: block; /* 激活的显示 */
}

/* --- 列表视图项 --- */
.city-columns-wrapper {
    display: grid;
    gap: 30px; /* 列之间的间距 */
    /* 创建响应式列，最少300px宽，自动填充 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.city-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--brand-red-color);
    padding-bottom: 10px;
}

.store-list-item {
}

/* --- 地图视图 --- */
#map-container {
  position: relative;
  overflow: hidden; /* 改为 hidden，防止在动画过程中出现滚动条 */
  border: 1px solid var(--brand-grey-color);
  border-radius: 8px;
  min-height: 600px; /* 确保在地图加载前有高度 */
}


/* 
 * 最佳实践：样式完全由 CSS 控制
 * JS 只负责切换 class
 */
.map-info-card {
  position: absolute;
  bottom: 20px;
  left: 50%;
  
  /* 初始状态：隐藏且在屏幕下方 */
  opacity: 0;
  transform: translate(-50%, 20px);
  visibility: hidden;
  
  
  /* 统一样式 */
  max-width: 320px;
  width: calc(100% - 40px); /* 在小屏幕上更好看 */
  background: var(--background-color);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 0;
  z-index: 10;
}

/* 卡片可见状态 */
.map-info-card.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

/* 卡片加载中状态 */
.map-info-card.is-loading .map-card-content {
  display: none; /* 隐藏旧内容 */
}

/* 加载指示器样式 */
.map-info-card .spinner {
  display: none; /* 默认隐藏 */
  margin: 20px auto;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-left-color: var(--brand-red-color); /* WordPress 蓝色 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.map-info-card.is-loading .spinner {
  display: block; /* 加载中时显示 */
}

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


.custom-cluster-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--brand-red-color); /* 替换成你的品牌主色调 */
  color: var(--background-color); /* 文本颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  /* font-family: inherit; */
  border: 2px solid var(--background-color); /* 添加一个白色边框，使其更突出 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform var(--transition-duration) var(--animation-curve);
}
.custom-marker-container {
  position: relative; 
  display: flex;
  flex-direction: column; /* 垂直排列 logo 和 箭头 */
  align-items: center; /* 水平居中 */
  cursor: pointer;
}

.custom-marker-icon {
  width: 44x;      /* 设置你想要的宽度 */
  height: 44px;     /* 设置你想要的高度 */
  
  /* 可选：增加一些效果让它更突出 */
  border-radius: 50%; /* 如果想让 logo 在一个圆形背景里，可以和下面的 background-color 配合 */
  background-color: var(--background-color); /* 可选的白色背景 */
  border: 2px solid var(--background-color); /* 添加白色边框，使其在深色地图背景上更清晰 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.4); /* 添加阴影增加立体感 */
  transition: transform var(--transition-duration) var(--animation-curve);
}
.custom-marker-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--background-color); 
  position: relative;
  top: -2px; 
}
.custom-marker-arrow::before {
  content: '';
  position: absolute;
  top: 1px; /* 阴影稍微向下偏移一点 */
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0,0,0,0.2);
  filter: blur(1px); /* 模糊阴影 */
}
@media (min-width: 768px) {
    .section--banner {
  background-image:  var(--bg-tablet, var(--bg-desktop));
    }
}

@media (min-width: 1024px) {
  .section--banner {
  background-image:  var(--bg-desktop);
}
.custom-cluster-icon:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大一点，增加交互感 */
}

.custom-marker-icon:hover {
  transform: scale(1.15); /* 鼠标悬浮时放大，提供交互反馈 */
}

}