/* Products Navigation Mobile Clean Version - 移动端产品按钮干净版本 */
/* 基于第一版设计思路，仅优化移动端，不影响PC端 */

/* ===== 仅在移动端应用 (768px 以下) ===== */
@media (max-width: 768px) {

  /* 1. 按钮整体 - 缩小并圆润化 */
  .product-nav-item {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    min-height: 60px !important;
  }

  /* 2. 图标 - 适度缩小 */
  .nav-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* 3. 文字内容 - 完整显示 */
  .nav-content h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  /* 4. 隐藏副标题 */
  .nav-content p {
    display: none !important;
  }

  /* 5. 箭头图标 - 缩小 */
  .nav-arrow {
    width: 16px !important;
    height: 16px !important;
  }

  .nav-arrow svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* 6. 徽章 - 绝对定位 */
  .nav-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* 7. 激活状态线条 - 圆角匹配按钮 */
  .product-nav-item::before {
    border-radius: 0 14px 14px 0 !important;
  }

  /* 8. 按钮间距 */
  .products-nav {
    gap: 10px !important;
  }
}

/* ===== 小屏手机 (480px 以下) ===== */
@media (max-width: 480px) {

  .product-nav-item {
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    min-height: 56px !important;
  }

  .nav-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
  }

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

  .nav-content h3 {
    font-size: 13px !important;
  }

  .nav-arrow {
    width: 14px !important;
    height: 14px !important;
  }

  .nav-arrow svg {
    width: 11px !important;
    height: 11px !important;
  }

  .nav-badge {
    top: 6px !important;
    right: 6px !important;
    font-size: 8px !important;
    padding: 2px 5px !important;
  }

  .product-nav-item::before {
    border-radius: 0 12px 12px 0 !important;
  }

  .products-nav {
    gap: 8px !important;
  }
}