/* === v1.33.3 Market Mobile Grid FINAL ===
   /market ve ana sayfa Puan Marketi mobil kartlarını 2 kolon ve düzgün yazı akışıyla sabitler.
   Desktop etkilenmez.
*/

@media(max-width:760px){
  /* Both market page and homepage market grid */
  html body:not(.admin-body) main.main .market-page-grid,
  html body:not(.admin-body) main.main > .market-page-grid,
  html body:not(.admin-body) main.main .market-home-grid,
  html body:not(.admin-body) main.main .market-home-wrap.market-home-grid,
  html body:not(.admin-body) main.main > .cards.market-grid,
  html body:not(.admin-body) main.main > .market-grid{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:unset!important;
    grid-auto-rows:auto!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    align-items:start!important;
    justify-content:stretch!important;
    padding-left:0!important;
    padding-right:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* If homepage market is slider mode, keep it scrollable but make cards readable */
  html body:not(.admin-body) main.main .market-home-wrap.market-home-slider{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
  }

  html body:not(.admin-body) main.main .market-home-wrap.market-home-slider .market-product-card{
    flex:0 0 47%!important;
    min-width:47%!important;
    max-width:47%!important;
    scroll-snap-align:start!important;
  }

  /* Real card reset: prevents empty first slot / shifted cards */
  html body:not(.admin-body) main.main .market-page-grid > .market-product-card,
  html body:not(.admin-body) main.main .market-page-grid > .product-card,
  html body:not(.admin-body) main.main .market-home-grid > .market-product-card,
  html body:not(.admin-body) main.main .market-home-grid > .product-card,
  html body:not(.admin-body) main.main .market-grid > .market-product-card,
  html body:not(.admin-body) main.main .market-grid > .product-card{
    grid-column:auto!important;
    grid-row:auto!important;
    order:0!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
    margin:0!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    padding:0!important;
    border-radius:18px!important;
  }

  html body:not(.admin-body) main.main .market-page-grid > .market-product-card:first-child,
  html body:not(.admin-body) main.main .market-home-grid > .market-product-card:first-child{
    grid-column:1!important;
    grid-row:auto!important;
    margin-left:0!important;
    transform:none!important;
  }

  html body:not(.admin-body) main.main .market-product-art{
    width:100%!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    padding:10px!important;
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
  }

  html body:not(.admin-body) main.main .market-product-art img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:12px!important;
  }

  html body:not(.admin-body) main.main .market-product-info{
    min-width:0!important;
    max-width:100%!important;
    padding:11px 10px 12px!important;
    gap:7px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  html body:not(.admin-body) main.main .market-title-block{
    display:flex!important;
    align-items:flex-start!important;
    gap:6px!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  html body:not(.admin-body) main.main .market-title-icon{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    flex:0 0 18px!important;
    margin-top:2px!important;
  }

  html body:not(.admin-body) main.main .market-title-text{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    display:block!important;
  }

  html body:not(.admin-body) main.main .market-title-text strong{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    white-space:normal!important;
    text-overflow:ellipsis!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    max-width:100%!important;
    min-height:2.14em!important;
    font-size:clamp(18px, 5.2vw, 23px)!important;
    line-height:1.07!important;
    letter-spacing:-.045em!important;
  }

  html body:not(.admin-body) main.main .market-title-text span{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:12px!important;
    line-height:1.2!important;
    letter-spacing:.12em!important;
  }

  html body:not(.admin-body) main.main .market-stock,
  html body:not(.admin-body) main.main .market-title-stock{
    font-size:12px!important;
    line-height:1.2!important;
    margin-top:5px!important;
    white-space:nowrap!important;
  }

  html body:not(.admin-body) main.main .market-coin,
  html body:not(.admin-body) main.main .coin.market-coin{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    flex-wrap:wrap!important;
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.08!important;
    margin-top:5px!important;
    white-space:normal!important;
  }

  html body:not(.admin-body) main.main .coin-badge{
    width:19px!important;
    height:19px!important;
    min-width:19px!important;
    flex:0 0 19px!important;
  }

  html body:not(.admin-body) main.main .market-product-info form{
    width:100%!important;
    margin-top:3px!important;
  }

  html body:not(.admin-body) main.main .market-order-btn,
  html body:not(.admin-body) main.main button.market-order-btn,
  html body:not(.admin-body) main.main .green.market-order-btn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:10px 8px!important;
    border-radius:10px!important;
    font-size:15px!important;
    line-height:1.08!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

/* Very narrow phones: still 2 columns, slightly tighter */
@media(max-width:390px){
  html body:not(.admin-body) main.main .market-page-grid,
  html body:not(.admin-body) main.main .market-home-grid,
  html body:not(.admin-body) main.main .market-home-wrap.market-home-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:10px!important;
  }

  html body:not(.admin-body) main.main .market-title-text strong{
    font-size:17px!important;
  }

  html body:not(.admin-body) main.main .market-coin,
  html body:not(.admin-body) main.main .coin.market-coin{
    font-size:14px!important;
  }

  html body:not(.admin-body) main.main .market-order-btn,
  html body:not(.admin-body) main.main button.market-order-btn{
    font-size:14px!important;
    min-height:40px!important;
  }
}