/* 右侧悬浮栏 - 大牌极简专业版
   核心：变量统一、轻质感、细腻交互、兼容全面 */
:root {
  /* 全局变量（改样式只改这里，新手友好） */
  --fs-brand-black: #1A1A1A; /* 主黑色（低调不刺眼） */
  --fs-brand-orange: #EF7800; /* 购物车品牌色 */
  --fs-brand-green: #01c511; /* WhatsApp品牌色 */
  --fs-bg-white: #FFFFFF; /* 按钮背景 */
  --fs-bg-hover: #F9F9F9; /* hover浅灰（比原#f5f5f5更高级） */
  --fs-border: #E5E5E5; /* 极细边框（替代粗黑边） */
  
  --fs-btn-width: 64px; /* 按钮宽度（比原70px更精致） */
  --fs-btn-height: 56px; /* 按钮高度（比原60px更协调） */
  --fs-radius: 16px; /* 圆角（比原10px更舒展，大牌常用） */
  --fs-transition: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); /* 丝滑过渡曲线 */
}

/* 悬浮栏容器（核心优化：加右侧间距，不贴边） */
.floating-sidebar {
  position: fixed;
  right: 16px; /* 离右侧16px，避免贴边，有呼吸感 */
  top: 50%;
  -webkit-transform: translateY(-50%); /* 老浏览器兼容前缀 */
  transform: translateY(-50%);
  z-index: 9990; /* 注释：悬浮栏层级，低于侧边栏（9999），避免遮挡 */
  display: flex;
  flex-direction: column;
  gap: 1px; /* 按钮间极细分割线，替代原1px黑边 */
  box-sizing: border-box;
}

/* 单个按钮（核心优化：轻边框+极简质感） */
.floating-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fs-btn-width);
  height: var(--fs-btn-height);
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-border); /* 1px极细浅灰边，替代2px粗黑边 */
  border-right: none; /* 保留右侧无边框，贴合视觉 */
  cursor: pointer;
  -webkit-transition: background var(--fs-transition); /* 精准过渡，仅背景 */
  transition: background var(--fs-transition);
  position: relative;
  outline: none; /* 清除默认焦点边框 */
}

/* 第一个按钮（圆角优化+层级） */
.floating-sidebar-item:first-child {
  border-radius: var(--fs-radius) 0 0 0;
}

/* 最后一个按钮（圆角优化+层级） */
.floating-sidebar-item:last-child {
  border-radius: 0 0 0 var(--fs-radius);
}

/* hover效果（更细腻的浅灰，无突兀感） */
.floating-sidebar-item:hover {
  background: var(--fs-bg-hover);
}

/* 焦点状态（可访问性，大牌必备） */
.floating-sidebar-item:focus-visible {
  outline: 2px solid var(--fs-brand-black);
  outline-offset: 2px;
  border-radius: var(--fs-radius);
}

/* 点击状态（反馈感，按下去的手感） */
.floating-sidebar-item:active {
  background: #F0F0F0;
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
  -webkit-transition: transform 0.1s ease;
  transition: transform 0.1s ease;
}

/* 购物车按钮（样式统一） */
.floating-cart-btn {
  position: relative;
  flex-direction: row;
  gap: 4px;
}

.floating-cart-btn svg {
  width: 24px; /* 缩小图标，更精致 */
  height: 24px;
  color: var(--fs-brand-black);
  stroke: var(--fs-brand-black);
  fill: none;
  -webkit-transition: color var(--fs-transition), stroke var(--fs-transition); /* 精准过渡 */
  transition: color var(--fs-transition), stroke var(--fs-transition);
}

.floating-cart-btn:hover svg {
  color: var(--fs-brand-orange);
  stroke: var(--fs-brand-orange);
}

/* 购物车数量（隐藏，删除冗余样式） */
.floating-cart-count {
  display: none !important;
}

/* WhatsApp按钮（样式统一） */
.floating-whatsapp-btn svg {
  width: 28px; /* 缩小图标，更协调 */
  height: 28px;
  color: var(--fs-brand-black);
  fill: var(--fs-brand-black);
  -webkit-transition: color var(--fs-transition), fill var(--fs-transition); /* 精准过渡 */
  transition: color var(--fs-transition), fill var(--fs-transition);
}

.floating-whatsapp-btn:hover svg {
  color: var(--fs-brand-green);
  fill: var(--fs-brand-green);
}

/* 响应式 - 移动端优化（不仅缩小，更易用） */
@media (max-width: 768px) {
  .floating-sidebar {
    right: 8px; /* 移动端离右侧更近一点 */
  }
  
  .floating-sidebar-item {
    width: 52px; /* 适度缩小，不挤屏幕 */
    height: 48px;
  }
  
  .floating-cart-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .floating-whatsapp-btn svg {
    width: 24px;
    height: 24px;
  }
  
  /* 移动端点击区域放大（避免点不到） */
  .floating-sidebar-item::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    pointer-events: none;
  }
}