/* RoVault V58 — mobile release-candidate hardening
   Loaded last so iPhone / Android layout rules win over the accumulated desktop passes. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media(max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  body:not(.landing-active){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  main,.page,.market-page,.market-frame,.market-content{max-width:100%!important;min-width:0!important}

  /* Header: stay inside the viewport even with cart + account actions. */
  .topbar{
    width:100%;box-sizing:border-box;
    height:60px!important;min-height:60px!important;
    padding-left:max(12px,env(safe-area-inset-left,0px))!important;
    padding-right:max(12px,env(safe-area-inset-right,0px))!important;
    grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;
  }
  .topbar>.brand{justify-self:start!important;min-width:0}
  .top-actions{justify-self:end!important;min-width:0!important;max-width:100%;gap:6px!important}
  .cart-button{height:40px!important;padding:0 10px!important;gap:7px!important;border-radius:11px!important;white-space:nowrap}
  .cart-button strong{min-width:22px!important;height:22px!important}
  .icon-button{width:40px!important;height:40px!important;flex:0 0 40px!important}
  .profile-button{width:40px!important;min-width:40px!important;height:40px!important;padding:4px!important;flex:0 0 40px!important}
  .profile-avatar.small{width:30px!important;height:30px!important}

  /* Market shell: no desktop rail geometry or accidental minimum heights. */
  #page-market .market-frame{display:block!important;width:calc(100% - 24px)!important;margin:0 auto!important;min-height:0!important}
  #page-market .market-content{width:100%!important;padding:12px 0 28px!important;margin:0!important}
  #page-market .market-sidebar,#page-market .sidebar-scrim,#page-market .mobile-filter-button{display:none!important}
  #page-market .catalog-status{min-height:18px!important;margin:0 2px 8px!important;padding:0!important;font-size:8px!important}
  #page-market .catalog-status a{font-size:8px!important}

  /* The hero was the main iOS failure point: explicitly size every layer instead of
     letting older desktop rules contribute inherited height / spacing. */
  #page-market .v37-market-hero{
    display:block!important;position:relative!important;
    width:100%!important;box-sizing:border-box!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    margin:0 0 12px!important;padding:16px!important;
    border-radius:15px!important;overflow:visible!important;
  }
  #page-market .v37-market-hero:before{inset:0!important}
  #page-market .v37-hero-copy{display:block!important;position:relative!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;visibility:visible!important;opacity:1!important}
  #page-market .v37-hero-copy .section-eyebrow{display:block!important;margin:0 0 7px!important;color:var(--muted2)!important}
  #page-market .v37-hero-copy h1{display:block!important;margin:0!important;color:var(--text)!important;font-size:30px!important;line-height:1.02!important;letter-spacing:-.05em!important;visibility:visible!important;opacity:1!important}
  #page-market .v37-hero-copy p{display:block!important;margin:8px 0 0!important;color:var(--muted)!important;font-size:10.5px!important;line-height:1.55!important;max-width:none!important;visibility:visible!important;opacity:1!important}
  #page-market .v46-market-learn{display:inline-flex!important;margin-top:10px!important;font-size:9px!important}
  #page-market .v37-search-zone{display:block!important;position:relative!important;width:100%!important;height:auto!important;min-height:0!important;margin-top:16px!important}
  #page-market .v37-search-wrap{display:block!important;width:100%!important;max-width:none!important;min-width:0!important}
  #page-market .v37-market-search{display:flex!important;width:100%!important;box-sizing:border-box!important;height:48px!important;min-height:48px!important;padding:0 11px!important;border-radius:12px!important}
  #page-market .v37-market-search input{display:block!important;min-width:0!important;width:100%!important;font-size:16px!important;line-height:1.2!important;color:var(--text)!important}
  #page-market .v37-market-search kbd{flex:0 0 auto}
  #page-market .v37-search-tools{display:block!important;width:100%!important;height:auto!important;min-height:0!important;margin-top:9px!important}
  #page-market .v37-shortcuts{display:flex!important;width:calc(100% + 16px)!important;margin-right:-16px!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;padding:0 16px 3px 0!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch}
  #page-market .v37-shortcuts::-webkit-scrollbar{display:none!important}
  #page-market .v37-shortcuts button{flex:0 0 auto!important;height:31px!important;padding:0 10px!important;font-size:8px!important}
  #page-market .v37-saved-search-wrap{display:flex!important;width:100%!important;margin-top:7px!important;gap:7px!important}
  #page-market .v37-save-search,#page-market .v37-saved-searches-button{min-width:0!important;flex:1 1 0!important;height:34px!important}

  /* Search suggestions and filter sheets remain usable above the bottom nav. */
  #page-market .v37-search-suggestions{left:0!important;right:0!important;top:54px!important;width:100%!important;max-height:min(55dvh,460px)!important;overflow:auto!important}
  #page-market .v37-saved-searches-menu,.v31-filter-popover{
    position:fixed!important;left:12px!important;right:12px!important;top:auto!important;
    bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;width:auto!important;
    max-height:58dvh!important;overflow:auto!important;z-index:150!important
  }

  /* Discovery: force real cards/text on Safari instead of isolated thumbnails. */
  #page-market .v37-discovery{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%!important;margin:0 0 12px!important}
  #page-market .v37-discovery.is-hidden{display:none!important}
  #page-market .v37-discovery-group{display:block!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:12px!important;border-radius:14px!important;overflow:hidden!important}
  #page-market .v37-discovery-head{display:flex!important;min-height:0!important;margin:0 0 7px!important}
  #page-market .v37-discovery-row{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;width:100%!important;min-width:0!important}
  #page-market .v37-discovery-card{
    display:grid!important;grid-template-columns:48px minmax(0,1fr) 30px!important;
    width:100%!important;min-width:0!important;min-height:54px!important;height:auto!important;
    box-sizing:border-box!important;gap:9px!important;align-items:center!important;
    padding:3px!important;color:var(--text)!important;visibility:visible!important;opacity:1!important;overflow:hidden!important
  }
  #page-market .v37-discovery-art{display:grid!important;width:48px!important;height:48px!important;min-width:48px!important;position:relative!important;overflow:hidden!important}
  #page-market .v37-discovery-art .catalog-image{display:block!important;width:82%!important;height:82%!important;max-width:82%!important;max-height:82%!important;object-fit:contain!important;margin:auto!important}
  #page-market .v37-discovery-copy{display:grid!important;min-width:0!important;visibility:visible!important;opacity:1!important;color:var(--text)!important}
  #page-market .v37-discovery-copy strong{display:block!important;color:var(--text)!important;font-size:10px!important;line-height:1.25!important}
  #page-market .v37-discovery-copy small{display:block!important;color:var(--muted)!important;font-size:8px!important;line-height:1.25!important}
  #page-market .v37-discovery-copy span{display:block!important;color:var(--text)!important;font-size:9px!important;line-height:1.2!important}
  #page-market .v37-mini-watch{position:static!important;transform:none!important;width:30px!important;height:30px!important;justify-self:end!important}

  /* Community / Most Watched strip: readable cards, horizontal when needed. */
  #page-market .v29-community-strip{width:100%!important;box-sizing:border-box!important;overflow:hidden!important}
  #page-market .v29-community-strip .v29-discovery-row{display:flex!important;width:100%!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding-bottom:4px!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch}
  #page-market .v29-community-strip .v29-discovery-card{flex:0 0 min(270px,82vw)!important;min-width:min(270px,82vw)!important;max-width:min(270px,82vw)!important;box-sizing:border-box!important;scroll-snap-align:start!important}

  /* Explore/filter area. */
  #page-market .browse-panel,#page-market .browse-panel-clean{display:block!important;width:100%!important;box-sizing:border-box!important;height:auto!important;min-height:0!important;margin:0 0 20px!important;padding:0!important;border-radius:0!important;background:transparent!important;border-left:0!important;border-right:0!important}
  #page-market .browse-panel-head{display:flex!important;align-items:end!important;gap:10px!important;margin:0!important;padding:4px 0 10px!important}
  #page-market .browse-panel-head h2{font-size:22px!important;line-height:1.05!important}
  #page-market .v31-filterbar{width:100%!important;box-sizing:border-box!important;margin:0 0 12px!important;padding:8px 0!important;overflow:visible!important}
  #page-market .v31-filterbar-main{display:flex!important;width:100%!important;min-width:0!important;gap:7px!important;overflow-x:auto!important;overflow-y:visible!important;padding:1px 0 4px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch}
  #page-market .v31-filterbar-main::-webkit-scrollbar{display:none!important}
  #page-market .v33-sort,#page-market .v31-filter-control,#page-market .v31-filter-pill,#page-market .v31-clear-button{flex:0 0 auto!important;min-width:0!important}
  #page-market .v33-sort-button,#page-market .v31-filter-pill,#page-market .v31-clear-button{height:38px!important}
  #page-market .category-row{width:calc(100% + 12px)!important;margin-right:-12px!important;padding-right:12px!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important}

  /* Product grid: two useful columns, never thumbnail-only fragments. */
  #page-market .product-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:9px!important;align-items:stretch!important}
  #page-market .product-card{display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;overflow:hidden!important;contain:none!important;visibility:visible!important;opacity:1!important;border-radius:13px!important}
  #page-market .product-visual{display:grid!important;position:relative!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;overflow:hidden!important}
  #page-market .product-visual>.catalog-image{display:block!important;width:78%!important;height:78%!important;max-width:78%!important;max-height:78%!important;object-fit:contain!important;margin:auto!important}
  #page-market .product-info{display:block!important;position:relative!important;width:100%!important;box-sizing:border-box!important;height:auto!important;min-height:0!important;padding:10px!important;color:var(--text)!important;visibility:visible!important;opacity:1!important}
  #page-market .product-name-row{display:flex!important;min-width:0!important}
  #page-market .product-name-row h3{display:block!important;color:var(--text)!important;font-size:10.5px!important;line-height:1.25!important}
  #page-market .product-name-row>span{font-size:7px!important}
  #page-market .card-reference{display:block!important;margin-top:5px!important;color:var(--muted)!important;font-size:8px!important;white-space:normal!important}
  #page-market .v31-card-marketmeta{display:flex!important;flex-wrap:wrap!important;margin-top:6px!important;font-size:7.5px!important;line-height:1.3!important}
  #page-market .card-price{display:flex!important;margin-top:8px!important;padding-top:8px!important;min-width:0!important}
  #page-market .card-price>div{min-width:0!important}
  #page-market .card-price strong{display:block!important;color:var(--text)!important;font-size:15px!important;line-height:1.15!important}
  #page-market .other-market-line,#page-market .market-updated{white-space:normal!important;overflow-wrap:anywhere!important}
  #page-market .v37-quick-button{top:7px!important;right:39px!important;left:auto!important;max-width:82px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #page-market .card-watch{top:7px!important;right:7px!important;width:28px!important;height:28px!important}
  #page-market .card-badges{top:7px!important;left:7px!important;right:74px!important;padding-right:0!important;overflow:hidden!important}

  /* V58.1: the desktop deal label is too wide beside Quick view + Watch on a two-column
     phone card. Render a compact percentage on mobile so the discount never clips to "4.". */
  #page-market .v37-deal-tag{
    flex:0 0 auto!important;max-width:none!important;white-space:nowrap!important;
    font-size:0!important;line-height:1!important;overflow:visible!important
  }
  #page-market .v37-deal-tag::before{width:4px!important;height:4px!important;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 15%,transparent)!important}
  #page-market .v37-deal-tag::after{
    content:attr(data-mobile-label)!important;
    font-size:8px!important;font-weight:800!important;line-height:1!important;
    letter-spacing:0!important;white-space:nowrap!important;color:inherit!important
  }

  /* Mobile primary navigation + safe-area handling. */
  .v41-mobile-nav{
    left:max(10px,env(safe-area-inset-left,0px))!important;
    right:max(10px,env(safe-area-inset-right,0px))!important;
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
    width:auto!important;height:62px!important;box-sizing:border-box!important;padding:5px!important;
    z-index:140!important
  }
  .v41-mobile-nav button{min-width:0!important;font-size:8.5px!important;line-height:1.1!important;padding:4px 2px!important}
  .v41-mobile-nav button span:first-child{font-size:16px!important}
  .v41-mobile-sheet{left:max(10px,env(safe-area-inset-left,0px))!important;right:max(10px,env(safe-area-inset-right,0px))!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;max-height:65dvh!important;overflow:auto!important;z-index:151!important}

  /* General pages: stop desktop widths from leaking into phone layouts. */
  .standard-page,.seller-verify-shell,.v42-portfolio-page,.v34-inbox-page,.v46-info-page,.v53-my-support,#page-admin{
    width:calc(100% - 24px)!important;max-width:none!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important
  }
  .panel,.rv28-item-hero,.rv28-offers-panel,.rv28-sales-panel,.rv28-market-snapshot,.rv28-reference-card{max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .verified-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-left:14px!important;padding-right:14px!important}
  .verify-step{max-width:none!important;padding:26px 18px!important}
  .verified-account-bar,.inventory-list-head{padding-left:16px!important;padding-right:16px!important}
  .username-search{grid-template-columns:1fr!important}
  .roblox-confirm-card{grid-template-columns:58px minmax(0,1fr)!important}
  .roblox-confirm-avatar{width:58px!important;height:58px!important}
  .roblox-confirm-actions{grid-column:1/-1!important;width:100%!important}
  .roblox-confirm-actions button{flex:1!important}
  .crypto-order-grid{grid-template-columns:1fr!important}
  .crypto-address-wide{grid-column:auto!important}
  .crypto-order-actions,.rep-actions{flex-wrap:wrap!important}

  /* Modals and forms must fit the visual viewport; 16px input text prevents iOS focus zoom. */
  .modal-backdrop{padding:max(10px,env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important}
  .modal,.account-modal,.crypto-modal{width:100%!important;max-width:560px!important;max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;overflow:auto!important;box-sizing:border-box!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  button,a{touch-action:manipulation}

  /* Tables / charts scroll instead of widening the entire document. */
  .admin-table,.v44-snipe-table,.v55-chart-shell,.rv28-sales-table{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .v55-history-chart{min-width:560px!important}
}

@media(max-width:430px){
  .topbar{gap:6px!important}
  .top-actions{gap:5px!important}
  .cart-button{padding:0 9px!important}
  .cart-button span{font-size:12px!important}
  .icon-button,.profile-button{width:38px!important;height:38px!important;flex-basis:38px!important}
  .vault-mark{width:38px!important;height:38px!important}
  #page-market .market-frame{width:calc(100% - 20px)!important}
  #page-market .v37-market-hero{padding:14px!important}
  #page-market .v37-hero-copy h1{font-size:28px!important}
  #page-market .product-grid{gap:8px!important}
}

@media(max-width:350px){
  .cart-button span{display:none!important}
  #page-market .product-grid{grid-template-columns:1fr!important}
  .verified-inventory-grid{grid-template-columns:1fr!important}
}