/* ============ Корзина ============ */
.page-cart .container { max-width: 900px; }
.cart { padding: calc(var(--nav-h) + 56px) 0 calc(140px + env(safe-area-inset-bottom)); min-height: 100vh; }
.nav__icons a[aria-current="page"] svg { stroke: #fff; }

.cart__head { margin-bottom: 26px; }
.cart__title { font-size: clamp(40px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.cart__lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); margin-top: 10px; min-height: 1.4em; }

/* строка товара: текст слева, фото справа */
.cart__list { border-top: 1px solid var(--line); }
.crow {
  display: grid; grid-template-columns: 1fr 150px; gap: 28px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--line);
  animation: rowIn .6s var(--ease-out) both;
}
.crow__text { min-width: 0; display: flex; flex-direction: column; }
.crow__title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.crow__title a:hover { color: var(--accent-2); }
/* характеристики и описание — другим, спокойным шрифтом */
.crow__specs, .crow__desc {
  font-family: "Inter", "SF Pro Text", -apple-system, sans-serif; font-weight: 400; letter-spacing: 0;
  color: var(--muted); font-size: 14.5px; line-height: 1.55;
}
.crow__specs { margin-top: 8px; }
/* характеристики переносятся целиком, по одной («Аккумулятор 92%» не разрывается) */
.crow__specs:not(.crow__state) { display: flex; flex-wrap: wrap; column-gap: 16px; }
.crow__specs:not(.crow__state) span::before { content: none !important; }
.crow__specs:not(.crow__state) span { white-space: nowrap; }
.crow__specs span + span::before { content: "·"; margin: 0 7px; opacity: .6; }
.crow__state { margin-top: 4px; }
.crow__state .is-warn { color: #ffd479; }
.crow__desc { margin-top: 10px; color: rgba(245, 245, 247, .62); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crow__bottom { display: flex; align-items: baseline; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.crow__price { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.crow__price s { color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 8px; }
.crow__remove { color: var(--accent); font-size: 15px; }
.crow__remove:hover { color: var(--accent-2); }
.crow__img {
  display: block; aspect-ratio: 4 / 4.6; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 40%, #1d1d21 0%, #111113 70%);
  position: relative; transition: transform .5s var(--ease-out);
}
.crow__img:hover { transform: translateY(-2px); }
.crow__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.crow__img img.is-photo { object-fit: cover; }
.crow__img .phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 4.2px; }

/* товар больше нельзя купить (продан, бронь) */
.crow__flag {
  align-self: flex-start; margin-top: 12px; height: 26px; padding: 0 11px; border-radius: 13px;
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 600;
  color: #ffd479; border: 1px solid rgba(255, 212, 121, .35);
}
.crow.is-unavailable .crow__title, .crow.is-unavailable .crow__price, .crow.is-unavailable .crow__img { opacity: .45; }
.crow.is-removing { animation: rowOut .45s var(--ease-out) forwards; }

/* скелетон при загрузке */
.crow--sk .sk { border-radius: 8px; background: #1a1a1d; }
.crow--sk { animation: none; }

/* закреплённая внизу панель: сумма и «Оформить» */
.cart__dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(22, 22, 24, .84); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .08);
  animation: dockIn .6s var(--ease-out) both .15s;
}
.cart__dock[hidden] { display: none; }
.cart__dock-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 0 6px; }
.cart__total { margin-right: auto; display: flex; flex-direction: column; min-width: 0; }
.cart__total span { color: var(--muted); font-size: 13px; }
.cart__total b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.cart__checkout { height: 52px; padding: 0 34px; }
.cart__checkout:disabled { background: #2a2a2e; color: var(--muted); box-shadow: none; cursor: default; transform: none; }

.cart__empty { text-align: center; padding: 70px 16px 40px; }
.cart__empty-icon { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 22px; display: grid; place-items: center; background: rgba(255, 122, 0, .12); }
.cart__empty-icon svg { width: 36px; height: 36px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cart__empty h2 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.cart__empty p { color: var(--muted); font-size: 17px; margin: 10px auto 26px; max-width: 420px; }

.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px;
  background: rgba(44, 44, 48, .95); border: 1px solid rgba(255, 255, 255, .1); font-size: 15px; text-align: center;
  animation: toastIn .4s var(--ease-out) both;
}

@keyframes rowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rowOut { to { opacity: 0; transform: translateX(-24px); } }
@keyframes dockIn { from { transform: translateY(110%); } to { transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 560px) {
  .cart { padding-top: calc(var(--nav-h) + 32px); }
  .crow { grid-template-columns: 1fr 104px; gap: 16px; padding: 22px 0; }
  .crow__img { border-radius: 14px; }
  .crow__specs, .crow__desc { font-size: 13.5px; }
  .crow__desc { -webkit-line-clamp: 2; }
  .crow__price { font-size: 18px; }
  .cart__total b { font-size: 20px; }
  .cart__checkout { height: 50px; padding: 0 22px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .crow, .cart__dock, .toast { animation: none; }
}
