/* KLIMATOLOGIYA CATALOG UX v1.0.4
   FIX MOBILE CATALOG CARDS v1
   Loaded after v1.0.3 intentionally. */

.catalog-ui-mobile-specs{
  display:none;
}

@media(max-width:760px){

  /* Use the real mobile viewport and leave only a small useful gutter. */
  .catalog-ui-210 .catalog-ui-section>.container{
    width:100%!important;
    max-width:none!important;
    padding-left:8px!important;
    padding-right:8px!important;
    box-sizing:border-box!important;
  }
  .catalog-ui-210 .catalog-ui-main,
  .catalog-ui-210 .catalog-ui-toolbar,
  .catalog-ui-210 .catalog-ui-products{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Compact one-line controls. Full sort value must remain readable. */
  .catalog-ui-210 .catalog-ui-toolbar{
    min-height:42px!important;
    padding:5px 6px!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:5px!important;
    overflow:visible!important;
  }
  .catalog-ui-210 .catalog-ui-found{
    min-width:55px!important;
    font-size:9px!important;
  }
  .catalog-ui-210 .catalog-ui-found:before{content:"Найдено "!important}
  .catalog-ui-210 .catalog-ui-toolbar-actions{
    min-width:0!important;
    grid-template-columns:auto minmax(96px,1fr)!important;
    gap:5px!important;
  }
  .catalog-ui-210 .catalog-ui-filter-trigger{
    height:32px!important;
    min-width:0!important;
    padding:0 7px!important;
    font-size:9px!important;
  }
  .catalog-ui-210 .catalog-ui-sort{
    min-width:96px!important;
    width:100%!important;
    overflow:visible!important;
  }
  .catalog-ui-210 .catalog-ui-sort select{
    width:100%!important;
    min-width:96px!important;
    max-width:none!important;
    height:32px!important;
    padding:0 20px 0 7px!important;
    font-size:9px!important;
    text-overflow:clip!important;
  }

  /* Two real columns, no horizontal overflow. */
  .catalog-ui-210 .catalog-ui-products,
  .favorites-page-v103 .catalog-ui-products{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    margin-top:9px!important;
  }

  /* Rebuild card geometry instead of shrinking text inside the old 356px card.
     248px is ~30% lower than v1.0.3 and all cards stay equal. */
  .catalog-ui-210 .catalog-ui-product-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:248px!important;
    min-height:248px!important;
    grid-template-rows:86px minmax(0,1fr)!important;
    border-radius:12px!important;
  }

  /* Fixed image zone: source aspect ratio cannot make the card taller. */
  .catalog-ui-210 .catalog-ui-card-media{
    min-height:0!important;
    height:86px!important;
    padding:5px 6px 2px!important;
    overflow:hidden!important;
  }
  .catalog-ui-210 .catalog-ui-card-media>img{
    width:100%!important;
    height:78px!important;
    max-height:78px!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .catalog-ui-210 .catalog-ui-badge{
    left:6px!important;
    top:6px!important;
    min-height:17px!important;
    max-width:calc(100% - 12px)!important;
    padding:2px 6px!important;
    font-size:7px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Exact vertical rows: brand / two-line title / compact specs / fixed footer. */
  .catalog-ui-210 .catalog-ui-card-body{
    min-height:0!important;
    display:grid!important;
    grid-template-rows:12px 31px 31px minmax(0,1fr)!important;
    gap:3px!important;
    padding:0 6px 7px!important;
  }

  .catalog-ui-210 .catalog-ui-card-brand{
    min-width:0!important;
    height:12px!important;
    font-size:7.5px!important;
    line-height:12px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .catalog-ui-210 .catalog-ui-card-body h3{
    min-height:29px!important;
    height:29px!important;
    max-height:29px!important;
    margin:0!important;
    font-size:9.2px!important;
    line-height:1.42!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    overflow:hidden!important;
  }

  /* The desktop icon list is replaced by two mobile text lines.
     This removes broken words such as "Инверт..." entirely. */
  .catalog-ui-210 .catalog-ui-quick-specs{
    display:none!important;
  }
  .catalog-ui-210 .catalog-ui-mobile-specs{
    display:grid!important;
    align-content:start!important;
    gap:2px!important;
    min-width:0!important;
    height:31px!important;
    overflow:hidden!important;
    color:#465451!important;
  }
  .catalog-ui-210 .catalog-ui-mobile-specs__line{
    min-width:0!important;
    min-height:13px!important;
    font-size:7.8px!important;
    line-height:1.35!important;
    font-weight:750!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  /* Dedicated footer zone: status is never part of the price/buttons row. */
  .catalog-ui-210 .catalog-ui-card-bottom{
    align-self:end!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:2px 0 0!important;
    display:grid!important;
    grid-template-rows:12px auto!important;
    gap:2px!important;
    overflow:visible!important;
  }

  .catalog-ui-210 .catalog-ui-stock{
    min-width:0!important;
    min-height:12px!important;
    height:12px!important;
    justify-content:flex-start!important;
    gap:3px!important;
    margin:0!important;
    font-size:7.2px!important;
    line-height:12px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .catalog-ui-210 .catalog-ui-stock i{
    width:5px!important;
    min-width:5px!important;
    height:5px!important;
  }

  /* Price and actions are separate columns; actions cannot overlap price/caption. */
  .catalog-ui-210 .catalog-ui-price-actions{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:4px!important;
  }
  .catalog-ui-210 .catalog-ui-price-row{
    min-width:0!important;
    overflow:visible!important;
  }
  .catalog-ui-210 .catalog-ui-price-row>div{
    min-width:0!important;
  }
  .catalog-ui-210 .catalog-ui-price-row strong{
    display:block!important;
    min-width:0!important;
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.05!important;
    letter-spacing:-.25px!important;
    white-space:nowrap!important;
  }
  .catalog-ui-210 .catalog-ui-price-row small{
    display:block!important;
    margin-top:2px!important;
    max-width:none!important;
    font-size:6.2px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .catalog-ui-210 .catalog-ui-card-actions--compact{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:flex-end!important;
    gap:3px!important;
    margin:0!important;
  }
  .catalog-ui-210 .catalog-ui-icon-btn{
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0!important;
    border-radius:7px!important;
  }
  .catalog-ui-210 .catalog-ui-icon-btn--favorite svg,
  .catalog-ui-210 .catalog-ui-icon-btn--cart img{
    width:13px!important;
    height:13px!important;
  }

  /* Last row must always scroll fully above the fixed mobile navigation. */
  body{
    padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
  }
  .catalog-ui-210 .catalog-ui-pagination-wrap,
  .favorites-page-v103 .section.compact{
    margin-bottom:18px!important;
  }
}

/* Very narrow phones: keep 2 columns but shave only decorative spacing. */
@media(max-width:360px){
  .catalog-ui-210 .catalog-ui-section>.container{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .catalog-ui-210 .catalog-ui-products,
  .favorites-page-v103 .catalog-ui-products{
    gap:5px!important;
  }
  .catalog-ui-210 .catalog-ui-product-card{
    height:244px!important;
    min-height:244px!important;
  }
  .catalog-ui-210 .catalog-ui-price-row strong{font-size:11.7px!important}
  .catalog-ui-210 .catalog-ui-icon-btn{
    width:26px!important;
    min-width:26px!important;
    height:26px!important;
    min-height:26px!important;
  }
}