/* shopops/static/shopops/css/adaptive_cart.css */
/* Только мобилка корзины (десктоп не трогаем) */

@media (max-width: 860px){

  /* отступы + запас под нижнюю панель */
  .cart-container{
    padding: 16px 12px calc(140px + env(safe-area-inset-bottom)) !important;
  }

  .cart-title{
    font-size: 28px;
    margin: 10px 0 14px;
  }

  /* одна колонка + меньше gap */
  .cart-layout{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .cart-main{ gap: 12px; }

  /* карточка на мобилке: 72px + контент */
  .cart-card{
    grid-template-columns: 72px 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .cart-thumb{
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px;
  }

  /* инфо – сверху, не по центру */
  .cart-info{
    justify-content: flex-start !important;
    padding-top: 2px;
  }

  .cart-name{
    font-size: 15px;
    line-height: 1.15;
    -webkit-line-clamp: 2;
  }

  .cart-price{
    font-size: 14px;
    font-weight: 700;
  }

  /* ✅ Контролы: перестраиваем в 2 строки через grid-areas */
  .cart-controls{
    grid-column: 1 / -1;
    display: grid !important;
    grid-auto-flow: initial !important;

    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "qty . del"
      "total total total";

    gap: 10px !important;
    align-items: center !important;

    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }

  .qty{ grid-area: qty; }

  /* степпер чуть компактнее */
  .qty{
    grid-template-columns: 30px 44px 30px !important;
    border-radius: 12px;
  }
  .qty-btn{ height: 34px !important; font-size: 18px; }
  .cart-qty{ width: 44px !important; height: 34px !important; }

  /* ✅ Итого — отдельной строкой и без min-width */
  .line-total{
    grid-area: total;
    min-width: 0 !important;              /* <- прибиваем твои 140px */
    width: 100%;
    justify-content: space-between !important;
  }

  .line-total__label{ font-size: 13px; }
  .line-total__value{ font-size: 14px; }

  /* ✅ Удалить — справа в первой строке */
  .cart-remove{
    grid-area: del;
    justify-self: end;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 12px;
    font-size: 13px;
  }

  /* summary ниже — без sticky (на телефоне липучка мешает) */
  .cart-aside{
    position: static !important;
    top: auto !important;
  }

  .summary-submit{
    height: 46px !important;
    font-size: 14px;
  }
}

/* очень узкие экраны */
@media (max-width: 360px){
  .cart-card{ grid-template-columns: 64px 1fr !important; }
  .cart-thumb{ width: 64px !important; height: 64px !important; }
  .cart-name{ font-size: 14px; }
}