/* WWW homepage mobile — match Bitmain m.bitmain.com layout */
@media (max-width: 768px) {
  html,
  body,
  #__nuxt,
  #__layout,
  .view,
  .container,
  #content {
    min-width: 0 !important;
    max-width: 100vw;
    overflow-x: clip;
  }

  .recommend .product,
  .antminer-list .product-item,
  .antminer-list .product-item img,
  .antminer-list-h5 .product-item {
    transition: none !important;
    transform: none !important;
  }

  /* Hero carousel */
  .banner .swipe,
  .banner .roller {
    width: 100% !important;
    height: auto !important;
    min-height: 220px;
  }

  .banner .roller img {
    max-width: 100%;
    height: auto;
  }

  /* Recommend section */
  .recommend .inner {
    width: 92% !important;
    max-width: 100vw !important;
  }

  .recommend .inner .line.line1 {
    display: block !important;
  }

  .recommend .inner .line.line1 .product:first-child,
  .recommend .inner .line.line1 .product:nth-child(2n) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  .recommend .inner .line.line2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  .recommend .inner .line.line2 .product,
  .recommend .inner .line.line2 .product:first-child,
  .recommend .inner .line.line2 .product:nth-child(2n) {
    width: 49% !important;
    max-width: 49% !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  .recommend .inner .line .product a .img-box .pc {
    display: none !important;
  }

  .recommend .inner .line .product a .img-box .h5 {
    display: block !important;
  }

  .recommend .inner .line .product a .text-box {
    text-align: center !important;
    padding: 8px 6px 0 !important;
  }

  .recommend .inner .line .product a .text-box .name {
    font-size: clamp(10px, 2.8vw, 12px) !important;
    justify-content: center !important;
  }

  .recommend .inner .line .product a .text-box .sub-descirbe {
    font-size: clamp(8px, 2.5vw, 10px) !important;
  }

  .recommend .inner .line .product a .read-more {
    position: absolute !important;
    bottom: 8px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .recommend .inner .line .product a .read-more .price {
    color: #3371ff !important;
    font-size: 16px !important;
    width: 100% !important;
  }

  /* Antminer: hide desktop grid when mobile flag active */
  .bm-mobile .antminer-list {
    display: none !important;
  }

  .bm-mobile .antminer-list-h5 {
    display: flex !important;
    flex-direction: column !important;
    width: 92% !important;
    margin: 0 auto !important;
  }

  /* List view rows (image left, text right) */
  .antminer-list-h5 .product-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee !important;
    text-decoration: none !important;
    box-sizing: border-box;
  }

  .antminer-list-h5 .product-item .img,
  .antminer-list-h5 .product-item .img img {
    flex: 0 0 110px !important;
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    object-fit: contain !important;
  }

  .antminer-list-h5 .product-item .text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .antminer-list-h5 .product-item .title,
  .antminer-list-h5 .product-item .name {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .antminer-list-h5 .product-item .algorithm,
  .antminer-list-h5 .product-item .parameter span {
    font-size: 9px !important;
  }

  .antminer-list-h5 .product-item .price {
    font-size: 14px !important;
    color: #3371ff !important;
    margin-top: 4px !important;
  }

  /* Fallback grid if mobile detection fails before Vue mounts */
  .antminer-list {
    white-space: normal !important;
    flex-wrap: wrap !important;
    width: 92% !important;
    max-width: 100vw !important;
    justify-content: space-between !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .antminer-list .product-item {
    flex: 0 0 49% !important;
    width: 49% !important;
    max-width: 49% !important;
    margin-left: 0 !important;
    margin-bottom: 12px !important;
  }

  .news .inner,
  .news-list {
    width: 92% !important;
    max-width: 100vw !important;
  }

  .go-top {
    width: 36px !important;
    height: 36px !important;
    bottom: 90px !important;
    right: 12px !important;
  }
}