/* TEST: If this CSS loads, body background will be yellow */
@media screen and (max-width: 768px) {
  body {
    background-color: yellow !important;
  }
}

/* ============================================
   Mobile Responsive Styles - Direct Load v4
   bytybuy.com - 2026-08-01
   ============================================ */

@media screen and (max-width: 1024px) and (min-width: 769px) {
  .page-center { width: 100% !important; max-width: 100% !important; padding: 0 15px !important; }
  .goods.grid.grid-cols-6, .goods.grid.grid-cols-5, .goods.grid.grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .outer.page-center .top { flex-wrap: wrap !important; }
  .outer.page-center .top .item { width: 48% !important; margin-bottom: 15px; }
}

@media screen and (max-width: 768px) {
  body, html { overflow-x: hidden !important; font-size: 14px; }
  .page-center { width: 100% !important; max-width: 100% !important; padding: 0 10px !important; }
  .top-nav { height: auto !important; min-height: 36px; }
  .top-nav .page-center { padding: 0 8px !important; }
  .top-nav .h35 { height: auto !important; min-height: 44px; align-items: center; }
  .top-nav .desktop-nav, .top-nav .left ul { display: none !important; }
  .top-nav .right ul { flex-wrap: nowrap !important; gap: 2px; }
  .top-nav .right ul li { margin-right: 2px !important; min-height: 36px; display: flex; align-items: center; }
  .top-nav .right ul li a, .top-nav .right ul li span, .top-nav .right ul li .el-dropdown-link { font-size: 12px !important; padding: 4px 4px !important; white-space: nowrap; }
  .search-wrap { height: auto !important; min-height: 56px; padding: 8px 10px !important; }
  .search-wrap .inner { flex-wrap: wrap !important; gap: 8px; height: auto !important; }
  .search-wrap .left { width: 100% !important; flex-wrap: wrap !important; height: auto !important; }
  .search-wrap .left .logo-wrap, .search-wrap .left > div:first-child { display: none !important; }
  .search-wrap .center { flex: 1 !important; min-width: 0 !important; width: 100% !important; }
  .search-wrap .center .w-630 { width: 100% !important; max-width: 100% !important; flex: 1 !important; }
  .search-wrap .center .btn { flex-shrink: 0; font-size: 13px !important; padding: 8px 12px !important; white-space: nowrap; }
  .search-wrap .right { margin-left: 0 !important; width: 100% !important; justify-content: center; }
  nav.nav.w-225, .cate-nav { display: none !important; }
  .banner-carousel, .banner.h433.px-15.w-780 { width: 100% !important; max-width: 100% !important; flex: 1 !important; padding: 0 !important; }
  .banner.py-15.page-center.flex { flex-direction: column !important; padding: 10px !important; }
  .user.flex-1.h433 { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .aside, aside, [class*="sidebar"] { display: none !important; }
  .main-content, main, [class*="main"] { width: 100% !important; max-width: 100% !important; }
  .recom-con { width: 100% !important; max-width: 100% !important; }
  .goods.grid.grid-cols-6, .goods.grid.grid-cols-5, .goods.grid.grid-cols-4, .goods.grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .tool-bar { top: auto !important; bottom: 80px !important; right: 10px !important; }
  .tool-bar > div { min-height: 44px !important; min-width: 44px !important; display: flex; align-items: center; justify-content: center; padding: 10px !important; }
  .outer.page-center .top { flex-direction: column !important; }
  .outer.page-center .top .item { width: 100% !important; margin-bottom: 15px; padding: 15px 20px !important; }
  .partners { width: 25% !important; margin-bottom: 10px; }
  .detail-pic { width: 100% !important; }
  .el-row { flex-direction: column !important; }
  .el-col { width: 100% !important; max-width: 100% !important; }
  .el-col[span="20"], .el-col[span="4"] { width: 100% !important; }
  a[href], button, [role="tab"], [role="button"], .cursor-pointer, [class*="cursor-pointer"] { min-height: 44px; }
  a.fs-12, a.fs-14, .fs-12 a, .fs-14 a { min-height: auto; padding: 8px 4px; }
  .fs-16 { font-size: 15px !important; }
  h1, h2, h3 { font-size: 18px !important; line-height: 1.4; }
  [role="tablist"] { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tab"] { flex-shrink: 0 !important; white-space: nowrap !important; padding: 8px 12px !important; min-height: 44px; }
  .el-carousel { height: 200px !important; }
  .el-carousel__item { height: 200px !important; }
  .user-panel, [class*="user-info"] { padding: 15px !important; }
  [class*="goods-view"], [class*="GoodsView"] { margin-bottom: 8px !important; }
  .wrapper-container.pt-116 { padding-top: 120px !important; }
}

@media screen and (max-width: 480px) {
  .search-wrap .btn { font-size: 12px !important; padding: 8px 10px !important; }
  .tool-bar { bottom: 70px !important; }
}