/*
 * Корзина и счётчик количества — стили, которые нужны ВЕЗДЕ, где работает клиент корзины.
 *
 * Жили в общей теме (`theme.css`), а её грузит не каждый проект: витрина с полностью
 * своим оформлением (sofa-mebel) подключает только свои файлы. Из-за этого на её странице
 * корзины пропадала раскладка в две колонки — сводка уезжала под список товаров, — а
 * счётчик «− N +» на карточке не показывался вовсе.
 *
 * Подключается вместе с muse-cart.js, поэтому появляется ровно там, где есть корзина.
 */
.mc-cartctl{--mcc-h:42px;--mcc-pad:3px;--mcc-gap:8px;position:relative;height:var(--mcc-h);min-height:var(--mcc-h);margin:0 14px 14px;contain:layout paint}
.mc-cartctl .mcc-add,.mc-cartctl .mcc-on{position:absolute;inset:0;height:var(--mcc-h);min-height:var(--mcc-h);margin:0;box-sizing:border-box;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
.mc-cartctl .mcc-add{width:100%}
.mc-cartctl .mcc-on{display:flex;gap:var(--mcc-gap);opacity:0;transform:scale(.96);pointer-events:none}
.mc-cartctl.is-qty .mcc-add{opacity:0;transform:scale(.96);pointer-events:none}
.mc-cartctl.is-qty .mcc-on{opacity:1;transform:none;pointer-events:auto}
.mcc-on .mcc-status{flex:1 1 auto;min-width:0;height:var(--mcc-h);min-height:var(--mcc-h);margin:0;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;border:0;border-radius:var(--brand-radius-ctl);cursor:pointer}
.mcc-on .mcc-status .mcc-ok{animation:mccOk .26s cubic-bezier(.2,.7,.3,1.4) both}
@keyframes mccOk{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.mcc-on .mcc-step{flex:0 0 auto;height:var(--mcc-h);display:flex;align-items:center;gap:2px;background:#f1f2f5;border-radius:var(--brand-radius-ctl);padding:var(--mcc-pad);box-sizing:border-box}
.mcc-step button{flex:0 0 auto;width:calc(var(--mcc-h) - var(--mcc-pad)*2);height:calc(var(--mcc-h) - var(--mcc-pad)*2);min-height:0;align-self:center;border:0;background:#fff;border-radius:var(--brand-radius-ctl);font-size:19px;line-height:1;color:var(--acc);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(20,22,40,.08);transition:background .12s,transform .1s}
.mcc-step button:hover{background:var(--brand-soft)}
.mcc-step button:active{transform:scale(.9)}
.mcc-n{min-width:30px;height:calc(var(--mcc-h) - var(--mcc-pad)*2);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:15px;color:#1c1f29;font-variant-numeric:tabular-nums}
.mcc-step button:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.mcc-step button:disabled:hover{background:#fff}
.mc-cartctl.mcc-max .mcc-n{color:#c5564f}
.mc-cartctl.mcc-bump .mcc-step{animation:mccBump .3s cubic-bezier(.36,.07,.19,.97)}
@keyframes mccBump{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}50%{transform:translateX(-2px)}}
.mc-cartctl.is-loading{pointer-events:none}
.mc-cartctl.is-loading::after{content:"";position:absolute;z-index:5;right:12px;top:50%;width:16px;height:16px;margin:-8px 0 0;border:2px solid rgba(20,22,40,.18);border-top-color:var(--brand-accent);border-radius:50%;animation:muSpin .7s linear infinite}
.mu-crow.is-busy{pointer-events:none}
.mu-crow.is-busy .mu-cqty{visibility:hidden;position:relative}
.mu-crow.is-busy .mu-cqty::after{content:"";visibility:visible;position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(0,0,0,.15);border-top-color:var(--acc,var(--brand-danger));border-radius:50%;animation:muSpin .7s linear infinite}
.mc-cartctl.is-resolving{pointer-events:none}
.mc-cartctl.is-resolving .mcc-add,.mc-cartctl.is-resolving .mcc-on{opacity:0!important;transition:none}
.mc-cartctl.is-resolving::before{content:"";position:absolute;inset:0;z-index:4;border-radius:var(--brand-radius);
  background:linear-gradient(100deg,#edeff3 30%,#f6f8fb 50%,#edeff3 70%) 0 0/220% 100%;
  animation:mccSkel 1.15s ease-in-out infinite}
@keyframes mccSkel{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.mc-cartctl.is-resolving::before{animation:none}}
@keyframes muSpin{to{transform:rotate(360deg)}}
/* Ozon-счётчик на странице товара — тот же морф, но крупнее. Живёт здесь, а не в theme.css:
   оверрайд обязан идти ПОСЛЕ базового .mc-cartctl, иначе каскад возвращает высоту 42px и
   боковой отступ, и кнопка товара разъезжается с ценой/избранным (TASK-332). */
.m-vcartctl{--mcc-h:52px;--mcc-pad:4px;--mcc-gap:10px;max-width:340px;width:100%;margin:8px 0 0}  /* без бокового отступа .mc-cartctl — левый край вровень с ценой/избранным */
.m-vcartctl .mcc-add{margin-top:0!important}
.m-vcartctl .mcc-status{border-radius:var(--brand-radius-ctl);background:var(--grad);color:#fff;border:0}
.m-vcartctl .mcc-status .mcc-ok{width:26px;height:26px}
.m-vcartctl .mcc-step{border-radius:var(--brand-radius-ctl);padding:4px;gap:3px}
.m-vcartctl .mcc-step button{font-size:22px}
.m-vcartctl .mcc-n{min-width:42px;font-size:17px}
/* Страница — вертикальная лента: список со сводкой, затем рекомендации. Сетка в две колонки
   живёт внутри .mu-cart-main, и липкая сводка ограничена ею. Классы-колонки не переименованы —
   проектные темы на них опираются.
   minmax(0,1fr), а не 1fr: голый 1fr — это minmax(auto,1fr), колонка ужимается под контент,
   и корзина «ехала» при смене строки на плашку «Восстановить». */
.mu-cart-page{display:block}
.mu-cart-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.mu-cart-empty{grid-column:1/-1;min-height:360px;padding:56px 28px;text-align:center;color:#8a93a6;border:1px dashed #d8dbe3;border-radius:var(--brand-radius-lg);background:linear-gradient(180deg,#fff,#fafbfc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.mu-cart-empty svg{width:128px;height:128px;color:var(--brand-accent);opacity:.9}
.mu-cart-empty b{display:block;color:#1a1d27;font-size:24px;letter-spacing:-.01em}
.mu-cart-empty span{display:block;max-width:340px;font-size:15px;line-height:1.5}
.mu-cart-table{display:flex;flex-direction:column}
.mu-crow{display:grid;grid-template-columns:1fr 110px 110px 110px 32px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #eceef3}
/* строка-шапка: после базового .mu-crow, чтобы её border-bottom побеждал каскад */
.mu-chead{color:#8a93a6;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #d8dbe3}
.mu-crow.is-off{opacity:.5}
.mu-crow.is-undo{display:flex;align-items:center;gap:12px;grid-template-columns:none;box-sizing:border-box;min-height:56px;
  background:linear-gradient(0deg,var(--brand-soft),var(--brand-soft-2));border:1px solid var(--brand-danger-line);border-radius:var(--brand-radius);padding:0 16px;margin:0;position:relative;overflow:hidden;animation:muUndoIn .26s ease}
@keyframes muUndoIn{from{opacity:.35;transform:scale(.992)}to{opacity:1;transform:none}}
.mu-undo-t{flex:1;min-width:0;font-size:14px;color:var(--brand-danger-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-undo-t b{font-weight:700;color:var(--brand-danger-2)}
.mu-undo-btn{flex:0 0 auto;border:1.5px solid var(--brand-danger-line);background:#fff;color:var(--brand-danger-2);border-radius:var(--brand-radius-sm);padding:8px 16px;font-weight:700;font-size:13.5px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mu-undo-btn:hover{background:var(--brand-soft-2);border-color:var(--brand-danger);color:var(--brand-danger-2)}
.mu-undo-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--brand-danger),var(--brand-danger-2));transform-origin:left;border-radius:0 2px 0 0}
.mcc-u{font-size:11px;color:#8a8f9c;font-weight:600;margin:0 1px}
.mu-srow>span:last-child{white-space:nowrap;padding-left:10px}
.mu-cart-aside{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px}
.mu-cs-h{font-size:17px;font-weight:700;margin:0 0 14px}
.mu-cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,220px));justify-content:start;gap:16px}
.mu-cs-card{display:flex;flex-direction:column;gap:7px;min-width:0;text-decoration:none;color:inherit}
.mu-cs-pic{aspect-ratio:1;background:var(--brand-soft-2,#f2f3f5) center/contain no-repeat;border-radius:var(--brand-radius,12px);transition:transform .2s ease,box-shadow .2s ease}
.mu-cs-pic.is-empty{position:relative;background:linear-gradient(145deg,var(--brand-soft-2,#f2f3f5),#fafafa)}
.mu-cs-pic.is-empty:before{content:"";position:absolute;inset:50% auto auto 50%;width:34px;height:28px;border:1.5px solid color-mix(in srgb,var(--brand-ink,#1d1d1f) 18%,transparent);border-radius:6px;transform:translate(-50%,-50%)}
.mu-cs-pic.is-empty:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:12px;border-left:1.5px solid color-mix(in srgb,var(--brand-ink,#1d1d1f) 18%,transparent);border-bottom:1.5px solid color-mix(in srgb,var(--brand-ink,#1d1d1f) 18%,transparent);transform:translate(-50%,-32%) rotate(-35deg)}
.mu-cs-card:hover .mu-cs-pic{transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(var(--brand-shadow-rgb),.5)}
.mu-cs-name{font-size:13.5px;line-height:1.35;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mu-cs-price{font-weight:700;font-size:14px}
.mu-summary{background:var(--brand-soft-2,#f7f8fb);border-radius:var(--brand-radius);padding:16px}
.mu-srow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;color:#5b6172;padding:7px 0;font-variant-numeric:tabular-nums}
.mu-srow>span:last-child{white-space:nowrap}
.mu-srow.mu-tender span:last-child{color:#3aa17e}
.mu-srow.mu-total{margin-top:6px;padding-top:12px;border-top:1px solid #e2e5ec;color:#1a1d27;font-size:18px;font-weight:700}
.mu-srow.mu-cashback span:last-child{color:#3aa17e;font-weight:600}
.mu-cart-availability{padding:11px 12px;border:1px solid #f0d3c7;border-radius:var(--brand-radius);background:#fff7f3;color:#9b3d30;font-size:13px;line-height:1.4}
.mu-cart-availability span{display:block}
.mu-cart-clean{width:100%;margin-top:9px;padding:8px 10px;border:1px solid currentColor;border-radius:var(--brand-radius-sm);color:inherit;background:transparent;font:600 13px/18px var(--brand-font);cursor:pointer;transition:background .15s,color .15s}
.mu-cart-clean:hover:not(:disabled){background:#9b3d30;color:#fff}.mu-cart-clean:disabled{opacity:.55;cursor:wait}
.mu-cart-pop .m-cart-ic,.m-cart-ic.mu-cart-pop{animation:muCartPop .55s cubic-bezier(.34,1.56,.64,1)}
.mu-cart-pop{animation:muCartPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes muCartPop{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}
.sc-cart .mu-cart-page{display:block}
.sc-cart .mu-crow{grid-template-columns:1fr auto;row-gap:2px}
.sc-cart .mu-cart-aside{margin-top:14px}
/* Mobile: одна колонка, сводка ПОД списком. Блок стоит В КОНЦЕ файла сознательно:
   его правила при равной специфичности должны побеждать desktop-правила выше
   (в т.ч. sticky у .mu-cart-aside), а каскад решает порядком. */
@media(max-width:860px){
  .mu-cart-main{grid-template-columns:minmax(0,1fr)}
  .mu-cart-table,.mu-cart-aside{min-width:0}
  .mu-crow.mu-chead{display:none}
  .mu-crow{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"prod prod rm" "qty qty line";gap:10px 12px}
  .mu-crow>.mu-cprod{grid-area:prod}
  .mu-crow>.mu-cqty{grid-area:qty;justify-self:start}
  .mu-crow>.mu-cprice{display:none}
  .mu-crow>.mu-cline{grid-area:line;text-align:right}
  .mu-crow>.mu-crm{grid-area:rm;align-self:start}
  /* Sticky-сводка имеет смысл только рядом со списком, на узком экране она мешает. */
  .mu-cart-aside{position:static}
}
