/* 手机端轻量优化 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 300px);
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
  }

  .hero-btns .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .floating-widget {
    top: auto !important;
    bottom: calc(var(--phone-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    transform: none !important;
    right: 8px !important;
    z-index: 1200 !important;
  }

  .floating-action {
    width: 40px !important;
    height: 40px !important;
  }

  .floating-media {
    width: min(196px, calc(100vw - 68px)) !important;
    right: calc(100% + 8px) !important;
  }

  #exploded .lighter-selector {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 2px 2px 10px;
    margin-bottom: 22px;
    scrollbar-width: none;
  }

  #exploded .lighter-selector::-webkit-scrollbar {
    display: none;
  }

  .lighter-type-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 138px;
  }

  .table-wrapper {
    position: relative;
    border-radius: 10px;
  }

  .table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(10, 10, 10, 0.82));
  }

  .more-exploded-link,
  .more-lighters-link,
  .more-molds-link,
  .more-process-link {
    position: static !important;
    display: inline-flex;
    margin-top: 8px;
    margin-left: 0 !important;
    top: auto !important;
    right: auto !important;
  }

  #exploded .exploded-container {
    gap: 14px;
  }

  #exploded .exploded-info {
    padding: 16px;
    border-radius: 12px;
  }

  #machines .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  #machines .tabs::-webkit-scrollbar {
    display: none;
  }

  #machines .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
  }

  #machines .machine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .lang-dropdown {
    right: 0;
    left: auto;
    max-width: min(280px, calc(100vw - 16px));
  }
}

@media (max-width: 420px) {
  .hero-content h1 {
    font-size: clamp(1.55rem, 8.5vw, 2rem) !important;
  }

  #machines .machine-grid {
    grid-template-columns: 1fr !important;
  }

  #molds .mold-card {
    padding: 16px !important;
    padding-bottom: 108px !important;
  }

  .materials-filter-btn {
    font-size: 0.78rem;
    padding: 0 12px;
  }
}