/* Панель корзины. Figma: pc 611:4271 (2 товара), 611:4255 (пусто), 611:4428 (9 товаров со скроллом);
   mb 611:4319, 611:4263, 611:4366. Спека — log-figma.md §33.
   Это не страница, а оверлей у правого края поверх текущей страницы: в композиции 611:4205
   панель лежит на скриншоте страницы, затемнения под ней в макете нет.
   Под MODX — один чанк с состояниями, подключается в хвост любого шаблона. */

.cart {
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 629px;
  height: 100%;
  padding: 120px 0 72px;         /* заголовок на 120; кнопка 957 + 51 = 1008 при 1080 */
  background: var(--white);
  overflow: hidden;
  z-index: 60;
  transition: transform .28s ease, visibility .28s ease;
}

/* Оверлей закрыт по умолчанию: панель уезжает за правый край без reflow страницы.
   Открытое состояние — снятый aria-hidden, его переключает js/main.js. */
.cart[aria-hidden="true"] {
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cart {
    transition: none;
  }
}


/* Элементы состояний: в пустой корзине нет списка, скроллбара и кнопки заказа;
   в непустой — заметки и ссылки на каталог. Градиент и скроллбар только у cart--full. */
.cart--empty .cart__body,
.cart--empty .cart__list,
.cart--empty .cart__checkout,
.cart:not(.cart--empty) .cart__note,
.cart:not(.cart--empty) .cart__catalog,
.cart:not(.cart--full) .cart__fade,
.cart:not(.cart--full) .cart__track,
.cart:not(.cart--full) .cart__thumb {
  display: none;
}

/* Крестик «Close dark» 611:4275: 573/30, ассет уже с opacity .5 внутри */
.cart__close {
  position: absolute;
  left: 573px;
  top: 30px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cart__close img {
  display: block;
  width: 28px;
  height: 28px;
}

/* Заголовок 611:4274: фрейм 62/110 w307 с padding 10 → текст 72/120 */
.cart__title {
  flex: 0 0 auto;
  width: 287px;
  margin: 0 0 0 72px;
  font-weight: 700;
  font-size: 36px;
  color: var(--black);
}

/* --- Состояние «пусто» (611:4255): заголовок ниже, абзац и кнопка --- */
.cart--empty .cart__title {
  margin-top: 172px;             /* 292 при верхнем поле панели 120 */
}

/* 611:4260: подсказка в потоке flex-колонки под заголовком, зазор 63.33px (398 - 334.67) */
.cart__note {
  width: 287px;
  margin: 63.33px 0 0 72px;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* 611:4261 — кнопка каталога в потоке под подсказкой, зазор 36px (482 - 446) */
.cart__catalog {
  margin: 36px 0 0 72px;
  align-self: flex-start;
  background: var(--brand);
  color: var(--white);
}

/* --- Контейнер списка товаров: карточки идут потоком от y 260 --- */
.cart__body {
  position: relative;            /* точка отсчёта для трека скроллбара и градиента */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                /* забирает остаток высоты, кнопка прижата к низу */
  min-height: 0;                 /* иначе flex-элемент не даёт списку скроллиться */
  margin: 54px 0 0;              /* заголовок 120 + 86, список на 260 */
}

.cart__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Строка товара: отступ слева 72px в потоке вместо relative left.
   position: relative оставляем только для абсолютного свечения .cart-item__glow. */
.cart-item {
  position: relative;
  margin-left: 72px;
  display: flex;
  flex-direction: column;
  width: 485px;
  padding-bottom: 33px;          /* шаг 230: контент 196 + рамка 1 */
}

/* Верхний ряд: фото 128 и текст с отступом 5 (133 − 128) */
.cart-item__top {
  position: relative;           /* кольцо отсчёта приколото к ряду */
  display: flex;
  gap: 5px;
  padding-bottom: 20px;          /* зазор до кнопок под фото */
}

/* Разделитель между товарами, а не внутри товара. В макете линия стояла под верхним
   рядом (611:4294), из-за чего кнопки «убрать», счётчик и цена оказывались за линией
   и читались как относящиеся к следующему товару. */
.cart-item + .cart-item {
  border-top: 1px solid var(--brand-10);
  padding-top: 20px;
}

/* Нижний ряд: «убрать» слева, счётчик и цена справа. Зазор счётчик→цена 24
   (минус кончается на 370, цена с padding начинается на 394).
   padding-top убран: он держал отступ от разделителя, которого внутри товара больше нет,
   а зазор до кнопок теперь даёт padding-bottom верхнего ряда. */
.cart-item__bottom {
  display: flex;
  align-items: center;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 4px;                      /* круги на 229/334, плашка 269 при ширине 36/61 */
  margin-left: auto;
}

/* Свечение Ellipse 15 611:4277: 90/(T+14) 92×93, #305684 @40%, размытие 70 */
.cart-item__glow {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 92px;
  height: 93px;
  border-radius: 50%;
  background: rgba(48, 86, 132, 0.4);
  filter: blur(70px);
}

/* Фото 611:4278: 128×120, radius 32; внутри слой 127×120 по центру и кроп из Figma */
.cart-item__photo {
  position: relative;
  flex: 0 0 auto;
  width: 128px;
  height: 120px;
  border-radius: var(--r-card);
  background: var(--white);
  overflow: clip;
}

.cart-item__photo-inner {
  position: absolute;
  left: calc(50% - 0.5px);
  top: 50%;
  width: 127px;
  height: 120px;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

/* Полный кадр, без кропа Figma — иначе в корзине срезалась крышка флакона. */
.cart-item__photo-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Колонка текста 611:4280: 205/(T+20), gap 8. Ширины ниже — это ширины РЯДОВ
   (262 и 284 в pc, 188 в mb): при box-sizing: border-box padding 10 входит в них,
   и на текст остаётся ровно объявленная в Figma ширина 242 / 264 / 168. */
.cart-item__text {
  padding-top: 20px;             /* текст начинался на 20 от верха строки */
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.cart-item__name,
.cart-item__desc {
  margin: 0;
  padding: 0 10px;
  color: var(--black);
}

.cart-item__name {
  width: 262px;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}

.cart-item__desc {
  width: 284px;
  font-size: 14px;
}

/* 611:4285: Regular 14 красный @50%, 72/(T+171) */
.cart-item__remove {
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: red;
  opacity: 0.5;
  cursor: pointer;
}

/* 611:4286: Bold 24 бренд, 466/(T+165) */
.cart-item__price {
  margin: 0 0 0 24px;            /* от счётчика 24 */
  font-weight: 700;
  font-size: 24px;
  color: var(--brand);
}

/* Счётчик 611:4287: круги 36 на 301 и 406, плашка 61×36 на 341, значение на 366.
   Символы +/- центрируются flex-ом внутри круга вместо absolute 12/6. */
.cart-item__minus,
.cart-item__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--brand-10);
  border-radius: var(--r-round);
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--brand);
  cursor: pointer;
}

.cart-item__minus span,
.cart-item__plus span {
  display: block;
  line-height: 1;
}

.cart-item__minus span {
  opacity: 0.5;
}
.cart-item__count {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 36px;
  border-radius: var(--r-round);
  background: var(--brand-05);
  font-weight: 700;
  font-size: 16px;
  color: var(--brand);
}

/* Разделитель Line 5 611:4294 — рамка .cart-item__top */

/* --- Удалённый товар (вторая карточка 611:4295) --- */
.cart-item--gone .cart-item__photo {
  background: rgba(255, 255, 255, 0.5);
}

.cart-item--gone .cart-item__photo-inner {
  opacity: 0.25;
}

.cart-item--gone .cart-item__text {
  opacity: 0.5;
}

.cart-item--gone .cart-item__price,
.cart-item--gone .cart-item__plus,
.cart-item--gone .cart-item__minus,
.cart-item--gone .cart-item__count {
  opacity: 0.25;
}

/* «Вернуть товар» 611:4307: тот же y, что «Убрать из корзины», но бренд и без прозрачности */
.cart-item__restore {
  color: var(--brand);
  opacity: 1;
}

/* Отсчёт возврата: кольцо Ellipse 18 611:4299 (56, бренд @20% + фоновый блюр)
   и дуга Ellipse 19 611:4300 поверх него. Лежит рядом с фото, а не внутри:
   в mb у бокса фото стоит opacity .5, а бейдж полностью непрозрачный. */
.cart-timer {
  position: absolute;
  left: 36px;
  top: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-20);
  backdrop-filter: blur(5px);
}

.cart-timer img {
  position: absolute;
  left: 0;
  top: 0;
  width: 55.9663px;
  height: 51.7256px;
  max-width: none;
}

.cart-timer span {
  position: absolute;
  left: 19px;
  top: 14px;
  font-weight: 700;
  font-size: 24px;
  color: var(--brand);
}

/* --- Кнопка «Оформить заказ» 611:4317: 62/957 495×51 --- */
.cart__checkout {
  flex: 0 0 auto;
  margin-left: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 495px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--brand-20);
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--brand);
  cursor: pointer;
}

/* --- Состояние «9 товаров» (611:4428): скролл списка, градиент, свой скроллбар --- */
.cart--full .cart__list {
  overflow-y: auto;
  scrollbar-width: none;
}

.cart--full .cart__list::-webkit-scrollbar {
  display: none;
}

/* В состоянии со скроллом у кнопки появляется фоновый блюр */
.cart--full .cart__checkout {
  backdrop-filter: blur(5px);
}

/* Градиент 611:4448: привязан к контейнеру списка со сдвигом 631px от верха списка (891 - 260) */
.cart__fade {
  position: absolute;
  left: 0;
  top: 631px;
  width: 100%;
  height: 189px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 63.492%);
  pointer-events: none;
}

/* Трек Line 6 611:4512: привязан к контейнеру списка, top: 0 (список на 260), x=619.
   Служит offsetParent для .cart__thumb. */
.cart__track {
  position: absolute;
  left: 619px;
  top: 0;
  width: 3px;
  height: 653px;
  border-radius: var(--r-round);
  background: var(--brand-10);
}

/* Ползунок Line 7 611:4513: 3px, длина 151, старт на 0 внутри трека.
   Сдвиг при скролле считает js/main.js по фактической геометрии трека. */
.cart__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 151px;
  border-radius: var(--r-round);
  background: var(--brand);
}
/* Затемнение остальной страницы под открытой панелью. z-index ниже панели (60),
   но выше залипшей шапки (5), иначе шапка осталась бы яркой поверх затемнения. */
.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(10, 10, 10, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.cart-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;          /* клик по затемнению закрывает панель */
}

/* position: fixed выше перебивает браузерное [hidden] */
.cart-backdrop[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cart-backdrop {
    transition: none;
  }
}

/* ================= Мобильная панель: 390×1080, шаг карточек 325 ================= */
@media (max-width: 1199px) {
  .cart {
    width: 390px;
  }

  .cart__close {
    left: 334px;
  }

  /* mb: кнопка «Оформить заказ» на 981 (не 957), заголовок в две строки выше */
  .cart {
    padding-bottom: 48px;        /* 981 + 51 = 1032 при 1080 */
  }

  .cart__body {
    margin-top: 74px;            /* заголовок в mb 28px/две строки, низ 186 → список 260 */
  }

  /* 611:4320: фрейм 16/110 w209 → текст 26/120 w189, две строки, поворот из макета */
  .cart__title {
    width: 189px;
    margin-left: 26px;
    font-size: 28px;
    transform: rotate(0.18deg);
  }

  /* В mb пустая корзина держит тот же y, что и корзина с товарами: фрейм 110 + padding 10 */
  .cart--empty .cart__title {
    width: 287px;
    margin-top: 0;               /* в mb пустой заголовок стоит на тех же 120 */
    transform: none;
  }

  .cart__note {
    margin: 53px 0 0 26px;       /* зазор 53px от низа заголовка 153 до верха подсказки 206 */
    font-size: 14px;
  }

  .cart__catalog {
    margin: 36px 0 0 26px;       /* зазор 36px от низа подсказки 254 до верха кнопки 290 */
  }

  /* В mb раскладка иная: текст выше (0, не 20), разделитель на 172, ниже ряд
     «счётчик + цена» на 192, а «убрать из корзины» уходит отдельной строкой на 254. */
  .cart-item {
    margin-left: 26px;
    width: 338px;
    padding-bottom: 53px;        /* шаг 325: контент 271 + рамка 1 */
  }
  /* В mb текст (152) выше фото (120), а разделитель в макете стоит на 172 — он
     отмерен от фото, текст просто выступает ниже. min-height, а не height:
     иначе длинное название пробивает разделитель вместо того, чтобы отодвинуть его. */
  .cart-item__top {
    align-items: flex-start;
    min-height: 172px;           /* фото 120 + 51: держит колонку текста */
    padding-bottom: 0;
  }

  /* Колонка текста 611:4334: 159/T w188, обе строки по 168 */
  .cart-item__text {
    padding-top: 0;
  }

  .cart-item__name,
  .cart-item__desc {
    width: 188px;
  }

  /* Нижняя часть в mb переносится: первая строка — счётчик и цена, вторая — «убрать» */
  .cart-item__bottom {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 20px;           /* ряд счётчика на 192 при низе верхнего ряда 172 */
  }

  .cart-item__qty {
    order: -2;                   /* счётчик первым в строке */
    margin-left: 0;
  }

  .cart-item__price {
    order: -1;
    margin: 5px 0 0 106px;       /* цена на 247 при конце счётчика 141, ниже на 5 */
  }

  .cart-item__remove {
    flex: 0 0 100%;              /* «убрать» уходит на свою строку */
    align-self: flex-start;      /* иначе align-self: center из pc центрирует его */
    margin-top: 26px;            /* на 254 при низе счётчика 228 */
    text-align: left;
  }

  /* 611:4328: у mb прозрачность стоит на всём боксе фото, картинка внутри обычная */
  .cart-item--gone .cart-item__photo {
    background: var(--white);
    opacity: 0.5;
  }

  .cart-item--gone .cart-item__photo-inner {
    opacity: 1;
  }

  /* 611:4339: колонка удалённого товара на 22 ниже обычной */
  .cart-item--gone .cart-item__text {
    margin-top: 22px;
  }

  .cart__checkout {
    left: 26px;
    top: 981px;
    width: 338px;
  }

  /* В mb скроллбара нет — только градиент */
  .cart__track,
  .cart__thumb {
    display: none;
  }
}