/* ══ СТРАНИЦА КОРЗИНЫ (.cart2--v3) ═══════════════════════════════════════
   Каркас снят с pangrampangram.com/cart живьём 20.09 (наполненная корзина,
   1440): плита товара 939×347 на сером #EDEDED, радиус 20, паддинг 25.7,
   зазор плит 12; блок итога 296×347 чёрный, сумма 60/78, кнопка 68 высотой.
   Пропорции оставлены, цвета и шкала — наши: ни одного нового токена.

   Классы .cline / .cart-wrap / .cart-pay / .cart-side__total сохранены —
   на них завязаны e2e-обходы и тесты промокода. Модификатор --v3 поднимает
   специфичность над базовым скином refine.css и отключает прежний --v2,
   который жил в cart-dock.css.

   Подключается постранично из templates/commerce/cart.html. */

/* ── сетка: у референса 939 против 296, то есть четверть рельса ───────── */
/* рельс во всю ширину страницы: у референса плита 939 из 1256, то есть
   три четверти. На прежних 1120 название вставало в четыре строки */
.cart2--v3 .cart-wrap{max-width:var(--rail)}
.cart2--v3 .cart2__grid{grid-template-columns:1fr 340px;gap:24px}

/* ── плита позиции ────────────────────────────────────────────────────── */
.cart2--v3 .clines{display:flex;flex-direction:column;gap:12px}
/* Пропорции референса, снятые с его живой страницы (1440):
   заголовок 80/80, название в плите 36/46.8, плита 939×347 с паддингом 25.7
   и радиусом 20, блок итога 296×347, сумма 60/78, кнопка 68 высотой.
   Переносим масштаб, а не причёсываем под обычный кегль страниц сайта. */
.cart2--v3{
  --cart-h1:clamp(44px,5.6vw,76px);
  --cart-title:clamp(23px,2.5vw,34px);
  --cart-sum:clamp(38px,4.2vw,58px);
  --cart-plate-h:300px;
  --cart-art:200px}
/* заголовок-плакат: на этой странице он крупнее общего --fs-h1-page */
.cart2--v3 h1{font-size:var(--cart-h1);line-height:1.02;margin-bottom:30px}
.cart2--v3 .cline{
  display:grid;grid-template-columns:var(--cart-art) 1fr auto;gap:30px;
  align-items:stretch;min-height:var(--cart-plate-h);
  padding:26px;border:1px solid var(--edge-card);border-top:1px solid var(--edge-card);
  border-radius:var(--r-panel);background:var(--white);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-ui) var(--ease-ui),
             box-shadow var(--dur-ui) var(--ease-ui)}
.cart2--v3 .cline:first-child{border-top:1px solid var(--edge-card)}
.cart2--v3 .cline:last-child{border-bottom:1px solid var(--edge-card)}
/* плита не ездит вверх: у референса она неподвижна, живёт только кромка */
.cart2--v3 .cline:hover{border-color:var(--edge-strong);box-shadow:var(--lift)}

.cart2--v3 .cline__art{
  width:var(--cart-art);height:var(--cart-art);border-radius:var(--r-small);
  overflow:hidden;
  align-self:start;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--violet),var(--lavender))}
.cart2--v3 .cline__art img{width:100%;height:100%;object-fit:cover;display:block}
.cart2--v3 .cline__art-letter{font-family:'Arsenal',Georgia,serif;font-size:var(--fs-numeral);
  color:var(--white);line-height:1}

/* тело плиты ростом с обложку: мета и название сверху, цена прижата к низу */
.cart2--v3 .cline__b{display:flex;flex-direction:column;gap:12px;min-width:0;
  min-height:var(--cart-art)}
.cart2--v3 .cline__b>b{font-family:'Arsenal',Georgia,serif;font-weight:400;
  font-size:var(--cart-title);line-height:1.15;color:var(--ink-deep);
  letter-spacing:-.01em}
.cart2--v3 .cline__note{font-size:var(--fs-note);color:var(--muted);line-height:1.5}
.cart2--v3 .cline__note a{color:var(--violet);text-decoration:underline;
  text-underline-offset:3px}

/* «Убрать» — в правом верхнем углу плиты, как у референса */
.cart2--v3 .cline__rm{align-self:start;margin:-6px -6px 0 0}
.cart2--v3 .cline__price{margin-top:auto;padding-top:12px;
  font-family:'Arsenal',Georgia,serif;font-weight:400;
  font-size:var(--cart-title);line-height:1;color:var(--violet);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cart2--v3 .cline__old{margin-left:10px;font-size:var(--fs-note);
  color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}

/* «По углам» (29.09, выбор Дани из четырёх): подводка под названием, цифры
   «что внутри» в нижнем углу напротив цены — середина плиты остаётся воздухом */
.cart2--v3 .cline__lede{margin:0;max-width:52ch;font-size:var(--fs-note);line-height:1.5;
  color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.cart2--v3 .cline__foot{margin-top:auto;display:flex;align-items:flex-end;
  justify-content:space-between;flex-wrap:wrap;gap:10px 20px;padding-top:12px}
.cart2--v3 .cline__foot .cline__price{margin-top:0;padding-top:0}
.cart2--v3 .cline__facts{display:flex;gap:14px;margin:0;padding:0;list-style:none;
  white-space:nowrap;font-size:var(--fs-tag);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cart2--v3 .cline__facts li{display:flex;align-items:center;gap:14px}
.cart2--v3 .cline__facts li+li::before{content:"";width:3px;height:3px;margin-left:-8px;
  border-radius:50%;background:var(--lavender)}
.cart2--v3 .cline__facts b{color:var(--violet);font-weight:700}

/* крестик стал словом: зона нажатия те же 44px по обеим сторонам */
.cart2--v3 .cline__x{
  width:auto;min-width:44px;min-height:44px;height:auto;padding:0 14px;
  border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Open Sans',system-ui,sans-serif;font-size:var(--fs-note);
  font-weight:600;letter-spacing:0;color:var(--muted);
  transition:color var(--dur-ui) var(--ease-ui),
             background-color var(--dur-ui) var(--ease-ui)}
.cart2--v3 .cline__x::before{content:none}
/* фирменный фокус: у .btn он есть, а «Убрать» — своя кнопка, и приёмка
   поймала на ней браузерный контур в 1px вместо канонных двух */
.cart2--v3 .cline__x:focus-visible{outline:var(--focus);
  outline-offset:var(--focus-offset)}
.cart2--v3 .cline__x:hover{color:var(--terra-ink);background:var(--terra-soft);
  transform:none;letter-spacing:0;box-shadow:none}

/* ── правая колонка ───────────────────────────────────────────────────── */
.cart2--v3 .cart-side{position:sticky;top:104px;border:0;border-radius:0;
  padding:0;background:transparent;display:flex;flex-direction:column;gap:18px}

/* Блок итога говорит фактурой плавающей корзины: тот же градиент и блик,
   чтобы две корзины сайта читались как одна вещь (cart-dock.css:26-30). */
.cart2--v3 .cart-side__box{
  position:relative;overflow:hidden;border-radius:var(--r-panel);padding:26px;
  min-height:var(--cart-plate-h);display:flex;flex-direction:column;
  background:linear-gradient(150deg,var(--violet),
             color-mix(in srgb,var(--violet) 72%,var(--ink)));
  box-shadow:var(--shadow),var(--gloss)}
/* мягкий световой круг в углу — единственная «картинка» блока */
.cart2--v3 .cart-side__box::after{content:"";position:absolute;
  right:-70px;top:-90px;width:220px;height:220px;border-radius:50%;
  background:var(--lavender);opacity:.22;filter:blur(30px);pointer-events:none}
.cart2--v3 .cart-side__box>*{position:relative}

/* состав суммы: от чего считаем и сколько снял код */
.cart-sum{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid rgba(253,247,235,.22)}
.cart-sum__row{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin:0;font-size:var(--fs-note);color:var(--on-dark-muted)}
.cart-sum__row b{font-weight:600;color:var(--on-dark);
  font-variant-numeric:tabular-nums}
.cart-sum__row--cut b{color:var(--sage-mid)}

.cart2--v3 .cart-side__total{display:block;padding-bottom:0;border-bottom:0}
.cart2--v3 .cart-side__total span{display:block;font-size:var(--fs-tag);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.cart2--v3 .cart-side__total b{display:block;margin-top:10px;
  font-family:'Arsenal',Georgia,serif;font-weight:400;font-size:var(--cart-sum);
  line-height:1.02;color:var(--on-dark);font-variant-numeric:tabular-nums;
  letter-spacing:-.015em}
/* объяснение «платить нечего» — не подпись, а единственный ответ на вопрос
   «почему нет кнопки»: цвет полный, а не приглушённый */
.cart2--v3 .cart-side__note{margin:14px 0 0;font-size:var(--fs-note);line-height:1.55;
  color:var(--on-dark)}
/* обещание про оплату стоит под самой кнопкой, а не в подвале страницы */
.cart2--v3 .cart-side__pay{margin:12px 0 0;flex:0 0 auto;text-align:center;
  font-size:var(--fs-fine);line-height:1.5;color:rgba(253,247,235,.82)}

/* кнопка внутри блока: светлая на фиолетовом, сумма прямо в ней */
.cart2--v3 .cart-pay{margin-top:auto;background:var(--lavender-soft);
  color:var(--accent-deep);gap:10px;white-space:nowrap;
  height:68px;font-size:var(--fs-h3)}
.cart2--v3 .cart-pay:hover{background:var(--white);color:var(--accent-deep)}
.cart2--v3 .cart-pay:hover .ab-arr{transform:translateX(2px)}

/* промокод и доверие живут под блоком, на белом */
.cart2--v3 .cart-extras{margin-top:0;border-top:0}
.cart2--v3 .cart-x{border-bottom:0;padding:0}
.cart2--v3 .cart-x summary{font-size:var(--fs-note)}
.cart2--v3 .cart-side .smart-note{margin:0}
/* ответ на промокод, перенесённый к полю (main.js, promoAnswer) */
.cart2--v3 .cart-x__answer{margin:12px 0 0}
.cart-trust{display:flex;flex-direction:column;gap:8px;
  padding-top:16px;border-top:1px solid var(--hair)}
.cart-trust li{display:flex;gap:8px;font-size:var(--fs-fine);line-height:1.5;
  color:var(--muted);list-style:none}
.cart-trust li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:7px;
  border-radius:50%;background:var(--lavender)}
.cart-trust{margin:0;padding-left:0}

/* ── планшет: колонка одна, блок итога перестаёт липнуть ─────────────── */
@media(max-width:960px){
  .cart2--v3{--cart-art:160px;--cart-plate-h:auto}
  .cart2--v3 .cart2__grid{grid-template-columns:1fr;gap:26px}
  .cart2--v3 .cart-side__box{min-height:0}
  .cart2--v3 .cart-pay{margin-top:24px}
  .cart2--v3 .cart-side{position:static}
  .cart2--v3 .cline:last-child{border-bottom:1px solid var(--hair-soft)}
}

/* ── телефон: обложка меньше, цена и «Убрать» уходят под название ────── */
@media(max-width:560px){
  .cart2--v3{--cart-art:96px}
  .cart2--v3 .cline{grid-template-columns:var(--cart-art) 1fr;gap:16px;padding:16px}
  .cart2--v3 .cline__art-letter{font-size:var(--fs-h3)}
  .cart2--v3 .cline__b>b{font-size:var(--fs-h4)}
  .cart2--v3 .cline{position:relative}
  .cart2--v3 .cline__b{min-height:var(--cart-art);padding-right:72px}
  .cart2--v3 .cart-pay{height:var(--btn-h);font-size:var(--fs-md)}
  /* на телефоне «Убрать» встаёт в один ряд с ценой, в углу плиты:
     в потоке оно уезжало третьей строкой и рвало пару «цена — действие» */
  .cart2--v3 .cline__rm{position:absolute;right:8px;bottom:8px;margin:0}
  .cart2--v3 .cline__price{padding-top:10px}
  .cart2--v3 .cart-side__box{padding:20px}
  /* цифры на телефоне переносятся по одной, точки-разделители не нужны */
  .cart2--v3 .cline__facts{flex-wrap:wrap;white-space:normal;gap:2px 10px}
  .cart2--v3 .cline__facts li+li::before{display:none}
  .cart2--v3 .cline__lede{font-size:var(--fs-fine)}
}

/* уходящая плита (main.js, cartLeave) не ловит наведение и нажатия */
.cart2--v3 .cline.is-leaving{pointer-events:none}
/* оплата в полёте (checkout-form.js ставит data-submitting): пока заказ
   уходит в кассу, состав не меняется — «Убрать» и промокод приглушены.
   Отправку в обход мыши (Enter, скрипт) гасит main.js */
.cart2--v3 .cart-wrap:has([data-checkout-form][data-submitting="1"]) :is(.cline__rm,.cart-x){
  opacity:.45;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .cart2--v3 .cline,.cart2--v3 .cline__x,.cart2--v3 .cart-pay{transition:none}
}

/* ══ ФОРМА ОПЛАТЫ в блоке итога (вошедшему, templates/commerce/cart.html) ═
   Отдельной страницы оформления нет с 30.09: она выглядела той же корзиной,
   только без «Убрать» (Даня). Галочка согласия, почта для чека и «Оплатить»
   стоят в фиолетовом блоке итога, поэтому их тексты — светлые. */
/* форма забирает остаток блока, кнопка прижата к низу — как ссылка гостя */
.cart2--v3 .cart-side__box form{display:flex;flex-direction:column;flex:1 1 auto;margin-top:18px}
.cart2--v3 .receipt-mail{margin:0 0 16px;font-size:var(--fs-note)}
.cart2--v3 .receipt-mail__now{color:var(--on-dark-muted)}
/* длинный адрес не распирает блок: переносится где угодно */
.cart2--v3 .receipt-mail__now b{color:var(--on-dark);font-weight:600;overflow-wrap:anywhere}
.cart2--v3 .receipt-mail__switch{color:var(--on-dark)}
.cart2--v3 .receipt-mail__switch:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px}
.cart2--v3 .receipt-mail__field span{color:var(--on-dark-muted)}
.cart2--v3 .pay-consent{display:flex;gap:8px;align-items:flex-start;margin:0;
  font-size:var(--fs-fine);line-height:1.45;color:var(--on-dark-muted)}
.cart2--v3 .pay-consent input{flex:0 0 auto;margin-top:2px;accent-color:var(--lavender)}
.cart2--v3 .pay-consent a{color:var(--on-dark)}
/* «Прочитать полностью» law.js ставит сразу за галочкой; цвет она берёт от
   окружения и на фиолетовом без этого почти не видна. Отступ до строки про
   чек — у самой строки, чтобы он был и когда кнопки нет */
.cart2--v3 .cart-side__box .law-more{margin:4px 0 0 21px;color:var(--on-dark)}
.cart2--v3 .pay-consent~.receipt-mail{margin-top:16px}
@media(max-width:960px){
  .cart2--v3 .cart-side__box form .cart-pay{margin-top:8px}
}

/* ══ ПУСТАЯ КОРЗИНА: КОНВЕРТ (templates/commerce/_cart_envelope.html) ════
   Реф — godly «Stamp folder»: матовая папка, сквозь обложку размыто видны
   карточки; обложка распахивается дверцей вокруг левого края, карточки
   выезжают веером вправо и тем же путём возвращаются. Папка — в --night:
   единственный акцент сайта, заливок под светлым нет, карточки белые с
   рамкой. Состояние одно число: --o (0 закрыт, 1 раскрыт), всё движение
   — переходы от него, поэтому наведение посреди авто-показа разворачивает
   веер от текущего положения, без рывка. Корень [data-cart-env] — сцена,
   data-state на ней водит cart-env.js. Сервер отдаёт "open": без JS и до
   запуска скрипта веер раскрыт, закрывает его только запустившийся скрипт. */
.cart-env{display:grid;grid-template-columns:minmax(260px,340px) auto;gap:56px;
  align-items:center;justify-content:start;padding:18px 0 40px}
.cart-env__text{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cart-env__text h3{margin:0;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.cart-env__text p{margin:0;max-width:34ch;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
.cart-env__text .nx-btn{margin-top:10px}

/* кнопка и стрелка — штатные .nx-btn (home.css:29-55) и .ab-arr
   (about.css:62-72): корзина этих таблиц не грузит, правила повторены
   как есть, без своих отступлений. Свечение приходит из glow.css */
.cart-env .nx-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;font-family:'Open Sans',sans-serif;
  font-weight:600;font-size:var(--btn-fs);line-height:1.2;height:var(--btn-h);
  padding:0 var(--btn-px);border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  transition-property:transform,box-shadow,background-color,border-color,color,letter-spacing;
  transition-duration:.55s;transition-timing-function:cubic-bezier(.4,.05,.2,1);
  white-space:nowrap;text-decoration:none}
.cart-env .nx-btn:active{transform:translateY(1px)}
.cart-env .nx-btn--primary{background:var(--nx-violet);color:#fff;
  border-color:var(--nx-violet);box-shadow:var(--gloss)}
.cart-env .nx-btn:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
.cart-env .nx-btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;
  box-shadow:var(--gloss),var(--lift)}
.cart-env .ab-arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:var(--violet);color:#fff;font-size:var(--fs-note);line-height:1;font-style:normal;
  transition:transform .4s var(--dl-ease)}
/* стрелка не текстом: в тексте ссылки её прочли бы вместе с надписью */
.cart-env .ab-arr::before{content:"→"}
.cart-env .nx-btn--primary .ab-arr{background:#fff;color:var(--violet)}
.cart-env .nx-btn:has(.ab-arr){padding-right:11px;gap:14px}
.cart-env .nx-btn:hover .ab-arr{transform:translateX(2px)}

/* ── сцена: размеры папки и шаг веера — переменные, телефон их меняет.
   Ширина — по числу карточек (--n из разметки): одна карточка не стоит
   посреди пустого места под четыре ─────────────────────────────────── */
/* --n и --i приходят из разметки (_cart_envelope.html, style="--n:…"/"--i:…"); здесь —
   значения по умолчанию, чтобы переменная не висела без объявления */
.cart-env__stage{--n:1;--o:0;--fw:244px;--fh:312px;--cw:164px;--in:22px;--x0:118px;--step:146px;
  --t:.72s;--name:15px;--lines:3;
  position:relative;width:calc(var(--in) + var(--x0) + (var(--n) - 1) * var(--step) + var(--cw) + 16px);
  height:calc(var(--fh) + 24px);perspective:1400px;perspective-origin:0 50%}
.cart-env__stage[data-state="open"]{--o:1}

/* задник папки: её толщина — чуть шире обложки, край виден справа */
.cart-env__back{position:absolute;left:0;top:12px;width:calc(var(--fw) + 8px);height:var(--fh);
  border-radius:16px 18px 18px 16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--night) 86%,var(--violet)),var(--night));
  box-shadow:var(--float),inset 0 1px 0 rgba(255,255,255,.10)}

/* обложка — дверца: матовое стекло поверх карточек, светлая кромка сверху.
   На закрытии ждёт, пока карточки вернутся под неё */
.cart-env__folder{position:absolute;z-index:6;left:0;top:12px;width:var(--fw);height:var(--fh);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:22px 20px;
  border-radius:16px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(165deg,rgba(86,61,135,.46),rgba(46,34,71,.74));
  --blur:calc((1 - var(--o)) * 11px);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18),var(--lift);
  color:#fff;text-decoration:none;
  transform-origin:0 50%;transform:rotateY(calc(var(--o) * -58deg));
  transition:transform var(--t) var(--r-ease) calc((1 - var(--o)) * .09s),
             backdrop-filter var(--t) var(--r-ease),-webkit-backdrop-filter var(--t) var(--r-ease),
             scale .12s ease-out}
/* распахнутая дверца густеет: стекло в 3D-повороте Chromium размывает не
   по форме обложки, а прямоугольником — сквозь открытую дверцу видна была
   бы полоса размытого и полоса резкого */
.cart-env__folder::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(165deg,color-mix(in srgb,var(--night) 70%,var(--violet)),var(--night));
  opacity:calc(var(--o) * .92);transition:opacity var(--t) var(--r-ease)}
.cart-env__folder>*{position:relative}
.cart-env__label{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-h3);
  line-height:1.1;letter-spacing:.01em}
.cart-env__folder .ab-arr{background:#fff;color:var(--violet)}
.cart-env__folder:hover .ab-arr{transform:translateX(2px)}
.cart-env__folder:active{scale:.97}
.cart-env__folder:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}

/* карточки: в папке лежат стопкой (--h*), раскрытые — веером (--x/--y/--r).
   Одна и та же пара свойств в обе стороны — путь обратно тот же */
.cart-env__card{--i:0;--hx:calc(var(--i) * 7px);--hy:calc(var(--i) * -3px);--hr:0deg;
  --x:calc(var(--x0) + var(--i) * var(--step));--y:0px;--r:0deg;
  position:absolute;z-index:1;left:var(--in);top:calc(12px + var(--in));width:var(--cw);
  color:var(--ink);text-decoration:none;
  translate:calc(var(--hx) + (var(--x) - var(--hx)) * var(--o)) calc(var(--hy) + (var(--y) - var(--hy)) * var(--o));
  rotate:calc(var(--hr) + (var(--r) - var(--hr)) * var(--o));
  transition:translate var(--t) var(--r-ease) calc(var(--o) * var(--i) * 40ms),
             rotate var(--t) var(--r-ease) calc(var(--o) * var(--i) * 40ms)}
.cart-env__card:nth-child(3){--hr:-3deg;--y:8px;--r:-4deg}
.cart-env__card:nth-child(4){--hr:2deg;--y:-6px;--r:-1deg}
.cart-env__card:nth-child(5){--hr:-1deg;--y:4px;--r:2.5deg}
.cart-env__card:nth-child(6){--hr:3deg;--y:-10px;--r:5deg}
.cart-env__paper{display:flex;flex-direction:column;gap:9px;padding:8px 8px 12px;
  background:#fff;border:1px solid var(--edge-card);border-radius:12px;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--dl-ease),box-shadow .45s var(--dl-ease)}
.cart-env__paper img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;border-radius:7px}
/* обложки нет — росчерки на --night, как у витрины */
.cart-env__noimg{background:var(--night)}
/* длинные названия — в три строки, дальше многоточие: карточку не ломают */
.cart-env__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);
  overflow:hidden;padding:0 2px;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--name);line-height:1.22;overflow-wrap:anywhere;hyphens:auto;
  /* высота под все строки и у короткого названия: веер ровный по низу */
  min-height:calc(var(--lines) * 1.22em)}
.cart-env__card:hover .cart-env__paper{transform:translateY(-6px);box-shadow:var(--lift)}
.cart-env__card:active .cart-env__paper{transform:translateY(-6px) scale(.97);transition-duration:.1s}
/* карточка в фокусе встаёт над соседями: на телефоне третья и четвёртая
   лежат под первой, и без этого фокус уходил бы на невидимое */
.cart-env__stage .cart-env__card:focus{z-index:5}
.cart-env__card:focus-visible{outline:none}
.cart-env__card:focus-visible .cart-env__paper{transform:translateY(-6px);box-shadow:var(--lift);
  outline:var(--focus);outline-offset:var(--focus-offset)}

/* ── уже рельса: текст над сценой ───────────────────────────────────── */
@media(max-width:1180px){
  .cart-env{grid-template-columns:1fr;gap:34px}
}
@media(max-width:900px){
  /* шаг веера — от ширины экрана: на 768 карточки не наезжают на названия */
  .cart-env__stage{--fw:200px;--fh:258px;--cw:136px;--in:18px;--x0:124px;--name:14px;
    --step:clamp(112px,calc((100vw - 350px) / 3),146px)}
  .cart-env__label{font-size:var(--fs-lg)}
}
/* ── телефон: раскрыт сразу. Как у рефа, наружу выходят две карточки —
   четыре в 350px легли бы друг на друга и срезали названия; остальные
   лежат стопкой под первой, видны только их края. Размеры — от ширины
   колонки (cqw): на 320 и 360 правая карточка не уходит за край.
   Сумма in + x0 + step + cw + запас под поворот ≈ 2,55·cw + 12 */
@media(max-width:700px){
  .cart-env{container-type:inline-size}
  .cart-env__stage{--o:1;--cw:min(136px,calc((100cqw - 12px) / 2.55));--fw:calc(var(--cw) + 14px);
    --fh:calc(var(--cw) * 1.25 + 60px);--in:12px;--x0:calc(var(--fw) * .55 - 2px);
    --step:calc(var(--cw) - 12px);
    --name:13px;width:100%;max-width:calc(var(--in) + var(--x0) + min(var(--n) - 1, 1) * var(--step) + var(--cw))}
  .cart-env__card:nth-child(n+5){z-index:0;--x:calc(var(--x0) + 4px);--y:-2px;--r:-3.5deg}
  .cart-env__card:nth-child(6){--x:calc(var(--x0) + 9px);--r:2.5deg}
  .cart-env__label{font-size:var(--fs-lg)}
  .cart-env__folder{padding:14px 12px}
  .cart-env__folder .ab-arr{display:none}
}
/* без наведения (сенсорный экран любой ширины) раскрыт всегда; раскладка
   при этом по-прежнему по ширине */
@media(hover:none){
  .cart-env__stage{--o:1}
}
@media(prefers-reduced-motion:reduce){
  .cart-env__stage{--o:1}
  .cart-env__folder,.cart-env__folder::before,.cart-env__card,.cart-env__paper,
  .cart-env__stage .ab-arr{transition:none}
}
/* без прозрачности или без стекла вовсе — плотная обложка; карточки за ней
   просто не видны, а не проступают резкими сквозь тонировку */
@media(prefers-reduced-transparency:reduce){
  .cart-env__folder{background:var(--night);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cart-env__folder{background:var(--night)}
}