@media (max-width: 1260px) {
  .header-container,
  .el-header:has(> .navigation) {
    height: auto !important;
    min-height: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 768px) {
  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .top-nav .nav-container,
  .bottom-nav .nav-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
  }

  .search-container,
  .logo-container,
  .top-nav-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .logo-container .logo-link {
    width: auto !important;
    max-width: 100% !important;
    justify-content: center;
  }

  .search-container .search-box {
    width: 100% !important;
    max-width: 280px !important;
  }

  .hot-categories-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 16px !important;
  }

  .categories-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 32px !important;
  }

  .categories-header .title {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 1px !important;
    white-space: normal !important;
  }

  .categories-grid,
  .category-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .categories-grid {
    margin-top: 24px !important;
  }

  .category-card {
    padding: 24px 16px !important;
  }

  .carousel-container,
  .carousel-wrapper,
  .carousel-content {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .footer-container,
  .footer,
  .footer-top,
  .footer-links,
  .brand-info,
  .links-column,
  .footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .footer .footer-top {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer .footer-top .brand-info,
  .footer .footer-top .footer-links .links-column {
    min-width: 0 !important;
  }

  .footer .footer-top .footer-links {
    gap: 24px !important;
  }

  .footer .categories-grid,
  .footer .category-row,
  .footer .category-row ul {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .footer .category-row ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 20px !important;
  }
}