/* Mobile Responsive Fixes for ProTechTrader.com */
/* Created: 2026-01-21 */

/* ================================
   1. BESTSELLER SECTION MOBILE FIX
   ================================ */

/* Fix bestseller overflow on mobile - make grid fully responsive */
@media (max-width: 768px) {
  .s_module_bestseller .s_listing.s_grid_view {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
  }

  .s_module_bestseller .s_listing.s_grid_view .s_item {
    width: calc(50% - 5px) !important; /* 2 items per row on tablets */
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .s_module_bestseller .s_listing.s_grid_view .s_item {
    width: 100% !important; /* 1 item per row on mobile */
    max-width: 350px !important; /* Prevent items from being too wide */
  }
}

/* Ensure product images scale properly */
@media (max-width: 768px) {
  .s_module_bestseller .s_item .s_thumb,
  .s_module_bestseller .s_item .s_thumb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ================================
   2. CART PAGE MOBILE FIX
   ================================ */

/* Fix cart table overflow on mobile */
@media (max-width: 500px) {
  /* Make cart table scrollable horizontally */
  .cart-info table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* Ensure cart wrapper doesn't overflow */
  .cart-info,
  #content .cart-info,
  .checkout-cart .cart-info {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Adjust cart table cells for mobile */
  .cart-info table td {
    padding: 5px !important;
    font-size: 12px !important;
  }

  .cart-info table th {
    padding: 5px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Make product images smaller in cart */
  .cart-info table td img {
    max-width: 50px !important;
    height: auto !important;
  }

  /* Adjust quantity inputs */
  .cart-info table input[type="text"] {
    width: 40px !important;
    padding: 2px !important;
    font-size: 12px !important;
  }

  /* Make remove buttons smaller */
  .cart-info table .button,
  .cart-info table a.button {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 400px) {
  /* Extra fixes for very small screens */
  .cart-info table {
    font-size: 10px !important;
  }

  .cart-info table td,
  .cart-info table th {
    padding: 3px !important;
  }

  /* Stack cart totals vertically */
  .cart-total {
    width: 100% !important;
    float: none !important;
  }

  /* Full width buttons on very small screens */
  .buttons,
  .checkout-cart .buttons {
    width: 100% !important;
  }

  .buttons .button,
  .checkout-cart .buttons .button {
    width: 100% !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
}

/* Ensure body doesn't overflow */
@media (max-width: 500px) {
  body, html, #container, .s_wrap {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* Additional cart responsive improvements */
@media (max-width: 768px) {
  /* Make cart responsive for tablets */
  .cart-info table {
    width: 100% !important;
  }

  /* Adjust cart heading */
  .checkout-cart #content h1,
  .cart-heading h1 {
    font-size: 20px !important;
    padding: 10px !important;
  }

  /* Stack cart modules vertically on tablets */
  .checkout-cart .checkout-product,
  .checkout-cart .checkout-content {
    width: 100% !important;
    float: none !important;
  }
}