/* SEARCH RUST MARKET — Mobile Overhaul v11
   Loaded after page-level styles so these rules intentionally win on phones. */

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  main { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
  .container, .rm-container { width: min(100% - 24px, 1220px) !important; }

  /* Header */
  .site-header { position: relative; }
  .header-inner {
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 9px 10px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .brand-logo { width: 42px !important; height: 42px !important; object-fit: contain; }
  .brand-name, .header-catalog-link, .header-actions .desktop-only { display: none !important; }
  .header-actions { grid-column: 3; grid-row: 1; gap: 6px !important; }
  .header-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .header-search input {
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    padding-left: 42px !important;
  }
  .header-search i { left: 15px !important; }
  .icon-button, .mobile-toggle {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }
  .dropdown-menu { max-width: calc(100vw - 24px); }

  /* Bottom nav: smaller, with real safe-area spacing */
  .mobile-bottom-nav {
    display: block !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.15) !important;
  }
  .mobile-bottom-nav-grid { gap: 2px !important; }
  .mobile-bottom-link {
    min-height: 52px !important;
    padding: 7px 3px !important;
    gap: 3px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .mobile-bottom-link i { font-size: 17px !important; }

  /* Global spacing / typography */
  h1 { font-size: clamp(28px, 8.5vw, 36px) !important; line-height: 1.08 !important; }
  h2 { line-height: 1.14; }
  .card, .rm-card { border-radius: 16px !important; }
  .btn, .rm-btn, .btn-primary, .btn-secondary, .btn-accent { min-height: 44px; }

  /* Home — Steam */
  .catalog-page { padding: 14px 0 48px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 20px !important; }
  .hero-banner:not(.steam-topup) { display: none !important; }
  .steam-topup {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg,#fff 0%,#f4f8ff 100%) !important;
  }
  .steam-topup::after { width: 130px !important; height: 130px !important; right: -52px !important; bottom: -55px !important; }
  .steam-head { gap: 11px !important; margin-bottom: 14px !important; }
  .steam-icon { width: 46px !important; height: 46px !important; border-radius: 14px !important; font-size: 23px !important; }
  .steam-title { font-size: 20px !important; }
  .steam-subtitle { margin-top: 3px !important; font-size: 12px !important; }
  .fee-badge { font-size: 10px !important; padding: 3px 6px !important; }
  .steam-form { grid-template-columns: 1fr !important; gap: 9px !important; }
  .steam-control label { margin-bottom: 6px !important; font-size: 11px !important; }
  .steam-control input { height: 46px !important; border-radius: 12px !important; font-size: 16px !important; }
  .steam-login-status { min-height: 18px !important; margin: 0 !important; font-size: 10px !important; line-height: 1.35 !important; }
  .steam-payment-methods { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .steam-payment-card { min-height: 48px !important; padding: 9px 11px !important; border-radius: 12px !important; }
  .steam-payment-card strong { font-size: 11px !important; }
  .steam-payment-card small { font-size: 9px !important; }
  .steam-payment-fee { font-size: 9px !important; }
  .steam-submit { min-height: 48px !important; margin-top: 1px !important; }
  .steam-note { margin-top: 9px !important; font-size: 10px !important; }
  .steam-auto-balance, .steam-breakdown { padding: 10px 11px !important; }
  .steam-order-modal { padding: 8px !important; place-items: end center !important; }
  .steam-order-modal-dialog { width: 100% !important; max-height: calc(100dvh - 16px) !important; padding: 17px !important; border-radius: 20px 20px 14px 14px !important; }

  /* Home — categories */
  .section-title { margin-top: 22px !important; margin-bottom: 12px !important; }
  .section-title h2 { font-size: 25px !important; }
  .category-cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .category-card {
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 15px !important;
    transform: none !important;
  }
  .category-card img {
    width: 100% !important;
    aspect-ratio: 3 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 14px !important;
  }

  /* Category filter bar */
  .catalog-filters, .category-filters, .filter-row, .filters-row, .filter-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .catalog-filters::-webkit-scrollbar, .category-filters::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .filters-row::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display:none; }
  .filter-bar { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:4px !important; padding:6px !important; overflow:visible !important; }
  .filter-buttons {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
    width: 100% !important;
  }
  .filter-button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    border-radius: 11px !important;
  }
  .service-subfilters { flex-wrap: nowrap !important; overflow-x: auto !important; margin-bottom: 14px !important; scrollbar-width:none; }
  .service-subfilters::-webkit-scrollbar{display:none}

  /* Main catalog — force compact cards */
  .products-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .product-card { min-width: 0 !important; border-radius: 16px !important; }
  .product-visual { aspect-ratio: 1.42 / 1 !important; min-height: 0 !important; }
  .product-visual img { width:100% !important; height:100% !important; object-fit:cover !important; }
  .product-badge { right: 7px !important; top: 7px !important; padding: 5px 7px !important; font-size: 8px !important; border-radius: 8px !important; }
  .product-body { padding: 11px !important; }
  .product-category { font-size: 8px !important; }
  .product-name { min-height: 34px !important; margin: 6px 0 !important; font-size: 13px !important; line-height: 1.28 !important; }
  .product-description { display: none !important; }
  .product-meta { gap: 4px !important; margin-bottom: 9px !important; }
  .product-meta span { max-width: 100%; padding: 4px 6px !important; font-size: 8.5px !important; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
  .product-footer { padding-top: 9px !important; }
  .product-price { font-size: 17px !important; }
  .product-old-price { font-size: 9px !important; }
  .product-more { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  .no-products { min-height: 180px !important; }

  /* Recommendations/personal picks */
  .recommendations-grid, .recommendation-grid, .recommended-grid, .personalized-grid, .popular-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .recommendations-section h2, .recommended-section h2, .personalized-section h2 { font-size: 26px !important; }

  /* Reviews */
  .reviews-section { margin-top: 34px !important; }
  .reviews-head { margin-bottom: 12px !important; }
  .reviews-head h2 { font-size: 26px !important; }
  .reviews-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .review-card { min-height: 0 !important; padding: 16px !important; border-radius: 16px !important; }
  .review-card-text { min-height: 0 !important; font-size: 12px !important; line-height: 1.55 !important; -webkit-line-clamp: 5 !important; }
  .review-author { margin-top: 12px !important; padding-top: 12px !important; }

  /* Product detail */
  .product-wrap { padding: 16px 0 48px !important; }
  .product-toolbar { margin-bottom: 10px !important; }
  .product-page { grid-template-columns: 1fr !important; gap: 12px !important; }
  .product-info { padding: 17px !important; }
  .product-info h1 { font-size: 29px !important; margin: 10px 0 !important; }
  .meta-grid { gap: 8px !important; }
  .meta-card { min-height: 62px !important; padding: 10px !important; }
  .buy-line { margin: 14px 0 !important; padding: 12px 0 !important; }
  .buy-line .price { font-size: 30px !important; }
  .related-section { margin-top: 22px !important; }
  .related-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  .related-image { aspect-ratio: 1.45/1 !important; }
  .related-body { padding: 11px !important; }
  .related-name { min-height: 34px !important; font-size: 13px !important; }
  .related-description { display: none !important; }
  .related-price { font-size: 17px !important; }
  .related-open { width:34px !important; height:34px !important; }
  .mobile-buybar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(74px + env(safe-area-inset-bottom,0px)) !important;
    padding: 9px 10px !important;
    border-radius: 15px !important;
  }
  .mobile-buybar .btn { min-width: 120px !important; min-height: 42px !important; }

  /* Cart */
  .cart-page { padding: 18px 0 48px !important; }
  .cart-head { margin-bottom: 12px !important; }
  .cart-layout { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cart-item { grid-template-columns: 76px minmax(0,1fr) !important; gap: 11px !important; padding: 11px !important; }
  .cart-item-image { width: 76px !important; border-radius: 12px !important; }
  .cart-item-name { font-size: 14px !important; }
  .cart-item-side { grid-column: 2 !important; text-align:left !important; min-width:0 !important; }
  .cart-item-actions { flex-direction: row !important; align-items:center !important; flex-wrap:wrap !important; }
  .qty-form { flex: 1 1 180px !important; }
  .qty-form input { flex:1 !important; min-width:0; }
  .cart-summary { position:static !important; padding:17px !important; }
  .summary-row.total strong { font-size: 24px !important; }
  .cart-payment-methods { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .cart-payment-method label { min-height: 58px !important; grid-template-columns:1fr !important; justify-items:center !important; text-align:center !important; }
  .cart-topup-dialog { width:100% !important; padding:17px !important; border-radius:18px !important; }

  /* Account */
  .account-dashboard, .account-page { padding: 22px 0 46px !important; }
  .account-header, .account-head { margin-bottom: 14px !important; gap:12px !important; }
  .account-header h1, .account-head h1 { font-size: 30px !important; }
  .account-header p, .account-head p { font-size: 13px !important; line-height:1.5 !important; }
  .account-header-actions, .account-actions { width:100% !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .account-header-actions .btn, .account-actions .btn { width:100% !important; padding:0 10px !important; }
  .account-shell { border-radius:18px !important; }
  .account-tabs {
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .account-tabs::-webkit-scrollbar{display:none}
  .account-tab {
    flex:0 0 auto !important;
    min-width:120px !important;
    padding:14px 13px !important;
    font-size:11px !important;
  }
  .account-tab.is-active::after { left:14px !important; right:14px !important; }
  .account-pane { padding:14px !important; }
  .account-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .stack { gap:12px !important; }
  .profile-card { flex-direction:row !important; align-items:center !important; padding:16px !important; gap:12px !important; }
  .profile-avatar { width:56px !important; height:56px !important; border-radius:16px !important; font-size:21px !important; }
  .profile-info h2 { font-size:20px !important; }
  .profile-info p { font-size:12px !important; }
  .profile-mini { margin-top:9px !important; gap:6px !important; }
  .profile-mini-badge { padding:6px 8px !important; font-size:9px !important; }
  .stats-card, .balance-card, .mvk-card, .list-card, .session-card { padding:16px !important; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .stat-box { padding:13px !important; }
  .stat-box strong { font-size:22px !important; }
  .balance-value { font-size:34px !important; }
  .balance-form { grid-template-columns:1fr !important; gap:8px !important; }
  .balance-form input, .balance-form select { height:44px !important; font-size:16px !important; }
  .mvk-card { gap:12px !important; }
  .mvk-card img { width:48px !important; height:48px !important; }
  .mvk-card .value { font-size:25px !important; }
  .review-summary { padding:15px !important; gap:10px !important; border-radius:15px !important; }
  .review-summary-icon { width:40px !important; height:40px !important; border-radius:12px !important; }
  .review-summary h3 { font-size:16px !important; }
  .review-summary .btn { width:100% !important; }
  .order-item, .topup-item, .pending-review-item { grid-template-columns:1fr !important; padding:12px !important; }
  .amount-block { text-align:left !important; }
  .security-overview { grid-template-columns:1fr !important; gap:8px !important; }
  .session-table-card { overflow-x:auto !important; }
  .session-table { min-width:720px !important; }

  /* Order / purchase details */
  .order-page, .purchase-page { padding:16px 0 48px !important; }
  .order-toolbar, .purchase-toolbar { gap:8px !important; margin-bottom:10px !important; }
  .order-layout, .purchase-layout { grid-template-columns:1fr !important; gap:12px !important; }
  .order-sidebar, .purchase-sidebar { position:static !important; grid-template-columns:1fr !important; gap:10px !important; }
  .order-copy, .credentials-box, .review-box, .summary-card, .instruction-card, .purchase-hero { padding:16px !important; }
  .order-copy h1, .purchase-hero h1 { font-size:29px !important; }
  .order-visual, .order-visual img, .order-placeholder { min-height:0 !important; }
  .product-head { grid-template-columns:82px minmax(0,1fr) !important; gap:11px !important; padding:13px !important; }
  .product-thumb { width:82px !important; border-radius:12px !important; }
  .product-copy h2 { font-size:16px !important; }
  .sidebar-actions { grid-template-columns:1fr !important; }
  .summary-row { font-size:11px !important; }
  .summary-row.total strong { font-size:25px !important; }
  .account-section, .review-area, .service-data { margin-left:12px !important; margin-right:12px !important; }

  /* Support */
  .support-layout, .support-grid, .support-shell { grid-template-columns:1fr !important; }
  .support-sidebar { position:static !important; }
  .support-card, .support-compose, .ticket-card { border-radius:16px !important; }

  /* Footer */
  .site-footer { margin-top:28px !important; padding:22px 0 calc(90px + env(safe-area-inset-bottom,0px)) !important; }
  .footer-inner { grid-template-columns:1fr !important; gap:14px !important; }
  .footer-links { justify-content:flex-start !important; gap:3px 8px !important; }
  .footer-links a { padding:6px 5px !important; font-size:11px !important; }
}

@media (max-width: 390px) {
  .container, .rm-container { width: min(100% - 18px, 1220px) !important; }
  .header-inner { gap:8px 7px !important; }
  .icon-button, .mobile-toggle { width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; }
  .products-grid, .related-grid, .recommendations-grid, .recommendation-grid, .recommended-grid, .personalized-grid, .popular-grid { gap:8px !important; }
  .product-body, .related-body { padding:10px !important; }
  .product-name, .related-name { font-size:12px !important; }
  .product-price, .related-price { font-size:16px !important; }
  .filter-button { font-size:10px !important; padding:0 5px !important; }
}

@media (max-width: 340px) {
  .products-grid, .related-grid, .recommendations-grid, .recommendation-grid, .recommended-grid, .personalized-grid, .popular-grid { grid-template-columns:1fr !important; }
  .filter-buttons { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}