/*
 F24 mobile Marketplace refinement.
 Presentation only.
*/

/* Keep "My listings" accessible above bottom nav. */
@media (max-width:1023px){
  .f24-owner-launcher-mobile{
    display:flex!important;

    align-items:center!important;
    justify-content:center!important;

    position:fixed!important;

    right:.75rem!important;

    bottom:calc(
      4.75rem +
      env(safe-area-inset-bottom,0px)
    )!important;

    z-index:120!important;

    width:auto!important;
    max-width:calc(100vw - 1.5rem)!important;

    min-height:2.75rem!important;

    padding:.65rem .9rem!important;

    white-space:normal!important;
    text-align:center!important;

    visibility:visible!important;
    opacity:1!important;
  }
}

/* 440px / small phones: exactly two compact cards. */
@media (max-width:479px){
  .f24-market-product-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    width:100%!important;
    max-width:100%!important;

    gap:.5rem!important;
  }

  .f24-market-product-grid > *{
    min-width:0!important;
    max-width:100%!important;

    overflow:hidden!important;
  }

  .f24-market-product-grid img{
    max-width:100%!important;
  }

  .f24-market-product-grid button{
    min-width:0!important;
    max-width:100%!important;

    white-space:normal!important;

    line-height:1.15!important;

    overflow-wrap:anywhere!important;
  }

  /*
    Owner list actions:
    Edit and status cannot leave the viewport.
  */
  .f24-owner-card-actions{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    width:100%!important;
    max-width:100%!important;

    gap:.5rem!important;

    overflow:visible!important;
  }

  .f24-owner-card-actions > button,
  .f24-owner-card-actions > select{
    display:block!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    min-height:2.75rem!important;

    margin:0!important;
  }

  .f24-owner-modal-panel{
    width:100vw!important;
    max-width:100vw!important;

    overflow-x:hidden!important;
  }

  .f24-owner-list-grid,
  .f24-owner-edit-grid,
  .f24-owner-edit-titlebar{
    width:100%!important;
    max-width:100%!important;

    min-width:0!important;
  }

  .f24-owner-edit-grid{
    grid-template-columns:
      minmax(0,1fr)!important;

    overflow-x:hidden!important;
  }

  .f24-owner-media-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
  }

  .f24-owner-actions{
    width:100%!important;
    max-width:100%!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
  }
}

/* Larger phones also two cards. */
@media (min-width:480px) and (max-width:767px){
  .f24-market-product-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    width:100%!important;

    gap:.65rem!important;
  }

  .f24-market-product-grid > *{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Tablet remains three cards. */
@media (min-width:768px) and (max-width:1023px){
  .f24-market-product-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr))!important;
  }
}