/* ==========================================================================
   КОРЗИНА (cart.php) — вёрстка по макету cart.png
   Базовые компоненты (.co__head, .step, .sum-*, .bar, .stepper) берём
   из оформления заказа, здесь — только специфика корзины.
   ========================================================================== */

/* --- шапка: действия справа --- */
.co__actions{display:flex;align-items:center;gap:18px}
.co__act{
  position:relative;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--navy);cursor:pointer;
}
.co__act .ic{width:23px;height:23px}
.co__act:hover{color:var(--blue-bright)}
.co__act-count{
  position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--pill);
  background:var(--blue);color:#fff;font-size:10px;font-weight:700;
}

/* --- заголовок страницы --- */
.cart__head{display:flex;align-items:baseline;gap:14px}
/* заголовок с теми же отступами, что в оформлении заказа */
.cart__head .co__h1{margin:24px 0 22px;line-height:1.15}
.cart__count{font-size:14px;color:var(--muted)}

.cart__h2{margin:0;font-size:18px;font-weight:700;color:var(--navy)}

/* --- блок товаров --- */
.cart__items{padding:18px 22px}
.cart__items-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--border-soft);
}
.cart__items-count{font-size:13px;color:var(--muted)}

/* --- строка товара ---
   Раскладка как у маркетплейсов: фото · описание со степпером · цены.
   Сумма — крупно, «цена за штуку» — подписью под ней, удаление — в углу. */
.cart-row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  gap:0 18px;
  align-items:start;
  padding:18px 0;
}
.cart-row + .cart-row{border-top:1px solid var(--border-soft)}

.cart-row__img{
  width:96px;height:96px;border-radius:var(--r);
  background:var(--panel);display:flex;align-items:center;justify-content:center;
}
.cart-row__img img{max-width:86%;max-height:86%;object-fit:contain}

.cart-row__main{min-width:0;display:flex;flex-direction:column;gap:4px;height:96px}
.cart-row__head{display:flex;align-items:flex-start;gap:12px}
.cart-row__name{
  flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--navy);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cart-row__name:hover{color:var(--blue-bright)}
.cart-row__sku{font-size:12.5px;color:var(--muted)}
.cart-row__del{
  flex:none;width:28px;height:28px;margin:-2px -4px 0 0;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .16s,background .16s;
}
.cart-row__del:hover{color:var(--red);background:#fdecea}
.cart-row__del .ic{width:15px;height:15px}

/* низ описания: степпер и экономия — прижаты к низу бокса фото */
.cart-row__foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:auto;
}
.cart-row__save{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:#0a8f47;
}
.cart-row__save .ic{width:14px;height:14px;flex:none}

/* правая колонка: сумма и цена за штуку */
.cart-row__prices{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  height:96px;justify-content:center;text-align:right;
}
.cart-row__sum{font-size:20px;font-weight:700;color:var(--navy);white-space:nowrap}
.cart-row__unit{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* --- полосы прогресса --- */
/* единый вертикальный ритм 16px — как между .step в оформлении заказа */
.cart-bar{margin:0 0 16px;padding:16px 18px 14px}
.cart-bar .bar__label{align-items:center;gap:12px}
.cart-bar__nums{margin-left:auto;flex:none;font-size:13px;color:var(--muted)}
.cart-bar__nums--below{display:block;margin:8px 0 0;text-align:right}
.bar__strong{font-size:15px;font-weight:700;color:var(--navy)}
.cart-bar__note{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted)}

/* Подарок — янтарный, а не красный: красный читается как ошибка,
   а это позитивное предложение. Доставка остаётся синей (бренд). */
.cart-bar--gift{background:#fff6e8}
.cart-bar--gift .bar__track{background:rgba(255,255,255,.85)}
.cart-bar--gift .bar__fill{background:#f2a33c}
.cart-bar--gift .bar__ic{background:#fdecd5;color:#d98324}
.cart-bar--gift .bar__ic .ic{color:#d98324}

/* --- «С этим часто покупают» ---
   Компактные карточки в стиле главной (.mini): фото, название, цена
   и круглая кнопка добавления. Блок уже, чем основной контент. */
.cart-also{margin-top:16px}
.cart-also__head{margin-bottom:14px}
.cart-also__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  max-width:900px;
}
.cart-also__item{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r);background:#fff;
  padding:12px;
  transition:border-color .18s;
}
.cart-also__item:hover{border-color:#cfdcea}
.cart-also__img{
  height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.cart-also__img img{max-width:100%;max-height:100%;object-fit:contain}
.cart-also__name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:600;color:var(--navy);line-height:1.3;
  min-height:2.6em;margin-bottom:8px;
}
.cart-also__name:hover{color:var(--blue-bright)}
.cart-also__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.cart-also__price{font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap}
.cart-also__add{
  flex:none;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--blue);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.cart-also__add:hover{background:var(--blue-hover)}
.cart-also__add .ic{width:15px;height:15px}

/* --- боковая панель --- */
.sum__h2{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--navy)}
.sum-list{padding:10px 0 0}
.sum-hint{
  margin:6px 0 0;font-size:11.5px;color:var(--muted);
}
.cart-extra{
  display:flex;align-items:center;gap:9px;width:100%;
  margin-top:12px;padding:0;border:0;background:transparent;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--blue-bright);
  cursor:pointer;text-align:left;
}
.cart-extra .ic{width:17px;height:17px;flex:none}
.cart-extra:hover{color:var(--navy)}
.cart-safe{
  display:flex;align-items:center;gap:11px;margin-top:16px;padding:12px 14px;
  border-radius:var(--r);background:var(--panel);
  font-size:12px;line-height:1.35;color:var(--muted);
}
.cart-safe__ic{
  flex:none;width:34px;height:34px;border-radius:var(--pill);
  background:#e2f7ea;color:#0a8f47;
  display:flex;align-items:center;justify-content:center;
}
.cart-safe__ic .ic{width:18px;height:18px}
.co__aside .sum{margin-bottom:20px}

/* ==========================================================================
   МОБИЛЬНАЯ КОРЗИНА
   ========================================================================== */
.cart-m .cart__head{padding:0 0 2px}
.cart-m .co-m__h1{margin:14px 0 4px;font-size:24px}
.cart-m .cart__count{display:block;margin-bottom:12px}

/* Мобильная строка: фото + описание в одну строку, степпер и сумма —
   во вторую. Степпер фиксированной ширины, кнопки не растягиваются. */
.cart-row--m{
  grid-template-columns:76px minmax(0,1fr);
  gap:0 14px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:14px;
}
.cart-row--m .cart-row__img{width:76px;height:76px}
.cart-row--m .cart-row__main{height:auto;gap:3px}
.cart-row--m .cart-row__name{font-size:14px;-webkit-line-clamp:3}
.cart-row--m .cart-row__unit{font-size:12px}
.cart-row--m .cart-row__foot{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;
}
.cart-row--m .cart-row__foot .stepper{flex:none}
.cart-row--m .cart-row__sum{font-size:19px}

.cart-also__grid{max-width:none}

.cart-m .cart-bar{margin:0 0 14px}
.cart-m .bar__strong{font-size:14px}

.cart-m__bottom{
  display:flex;align-items:center;gap:16px;
  padding:14px 0 6px;
}
.cart-m__total{display:flex;flex-direction:column;gap:2px;flex:none}
.cart-m__total-label{font-size:12.5px;color:var(--muted)}
.cart-m__total-value{font-size:22px;font-weight:700;color:var(--navy)}
/* ширина 100% из .sum-cta переполняла flex-строку и текст обрезался;
   это <a>, а не <button> — строчное выравнивание и центрирование задаём сами */
.cart-m__cta{
  flex:1 1 auto;width:auto;min-width:0;margin-top:0;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}

@media (max-width:1023px){
  .cart-also__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cart-also__img{height:92px}
}