/* Корзина: общие кнопки, мини-панель, окна, страница кошика. Подключается на всех страницах (header.php). */
:root{--ok:#5be08a;--err:#ff6b5b}
html.cm-lock{overflow:hidden}

/* ---------- кнопки ---------- */
.btn-y,.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:14px;
  font:inherit;font-size:16px;font-weight:800;text-align:center;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s,background .2s,color .2s}
.btn-y{background:var(--yellow);color:var(--yellow-ink);border:0;box-shadow:0 8px 22px rgba(255,217,26,.2)}
.btn-y:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(255,217,26,.32);filter:brightness(1.04)}
.btn-y:active{transform:translateY(1px)}
.btn-y .ic{width:18px;height:18px;font-size:18px}
.btn-y--lg{height:58px;font-size:17px;width:100%}
.btn-y--danger{background:var(--err);box-shadow:0 8px 22px rgba(255,107,91,.22);color:#1a0a07}
.btn-y.is-disabled,.btn-y:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.btn-y.is-disabled:hover{transform:none;filter:none;box-shadow:none}
.btn-y.is-loading{pointer-events:none;opacity:.7}
.btn-o{background:none;color:var(--yellow);border:2px solid var(--yellow)}
.btn-o:hover{background:var(--yellow);color:var(--yellow-ink)}

.lnk{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:14px;font-weight:600;padding:6px 2px;transition:color .15s}
.lnk .ic{width:19px;height:19px;font-size:19px;color:var(--muted);transition:color .15s}
.lnk:hover,.lnk:hover .ic{color:var(--yellow)}
.lnk.is-on .ic{color:var(--yellow);fill:var(--yellow)}
.ico-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--muted);transition:color .15s,background .15s}
.ico-btn .ic{width:20px;height:20px;font-size:20px}
.ico-btn:hover{color:var(--err);background:rgba(255,107,91,.1)}

/* цены */
.pz{display:inline-flex;align-items:baseline;gap:8px}
.pz b{font-weight:800}
.pz s{color:var(--muted);font-size:.85em}
.is-green{color:var(--ok)}

/* счётчик количества */
.qty{display:inline-flex;align-items:center;height:40px;background:#0b0b0d;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qty button{width:38px;height:100%;font-size:20px;font-weight:600;color:var(--text);transition:background .15s,color .15s}
.qty button:hover:not(:disabled){background:var(--yellow);color:var(--yellow-ink)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty input{width:42px;height:100%;text-align:center;background:none;border:0;color:var(--text);font:inherit;font-weight:700;font-size:15px;outline:0}
.qty input:focus{background:#1b1b1e}

/* счётчик на иконке корзины */
.hd-cart b.is-bump{animation:cm-bump .45s ease}
@keyframes cm-bump{40%{transform:scale(1.45)}}

/* ---------- слой окон ---------- */
.cm{position:fixed;inset:0;z-index:1100;font-family:'Montserrat',system-ui,sans-serif;color:var(--text)}
.cm[hidden]{display:none}
.cm--center{display:flex;align-items:center;justify-content:center;padding:16px}
.cm__backdrop{position:absolute;inset:0;background:rgba(3,3,4,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:cm-fade .22s ease both}
.cm.is-closing .cm__backdrop{animation:cm-fade .18s ease reverse both}
@keyframes cm-fade{from{opacity:0}}
.cm__x{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--muted);background:rgba(255,255,255,.05);transition:color .2s,background .2s,transform .25s}
.cm__x .ic{width:20px;height:20px;font-size:20px}
.cm__x:hover{color:var(--yellow);background:rgba(255,217,26,.1);transform:rotate(90deg)}

/* ---------- мини-корзина ---------- */
.cd{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(450px,100vw);
  background:var(--panel);border-left:1px solid var(--line);box-shadow:-30px 0 80px rgba(0,0,0,.55);outline:0;
  animation:cd-in .32s cubic-bezier(.2,.85,.25,1) both}
.cm.is-closing .cd{animation:cd-in .18s ease reverse both}
@keyframes cd-in{from{transform:translateX(100%)}}
.cd__head{position:relative;display:flex;align-items:center;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.cd__head h2{font-size:28px;font-weight:800;font-style:italic;letter-spacing:-1px}
.cd__head small{margin-left:8px;font-size:14px;font-style:normal;font-weight:600;color:var(--muted);letter-spacing:0}
.cd__head .cm__x{top:50%;right:18px;transform:translateY(-50%)}
.cd__head .cm__x:hover{transform:translateY(-50%) rotate(90deg)}

.cd__free{padding:12px 24px;background:rgba(255,217,26,.07);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.cd__free b{color:var(--yellow)}
.cd__free i{display:block;height:5px;margin-top:8px;border-radius:3px;background:var(--line);overflow:hidden}
.cd__free u{display:block;height:100%;border-radius:3px;background:var(--yellow);transition:width .4s}
.cd__free.is-done{color:var(--ok);background:rgba(91,224,138,.07)}
.cd__free.is-done span{display:flex;align-items:center;gap:8px;font-weight:700}
.cd__free .ic{width:18px;height:18px;font-size:18px}

.cd__body{flex:1;overflow-y:auto;padding:0 24px;overscroll-behavior:contain}
.dl{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);animation:cm-rise .3s ease both}
.dl.is-off{opacity:.6}
.dl__img{display:grid;place-items:center;width:80px;height:80px;background:#0b0b0d;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dl__img img{width:100%;height:100%;object-fit:contain;padding:6px}
.dl__name{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.35}
.dl__name:hover{color:var(--yellow)}
.dl__info .pz{font-size:15px}
.dl__off{display:block;color:var(--err);font-size:13px;font-weight:600}
.dl__row{display:flex;align-items:center;gap:10px;margin-top:10px}
.dl__sum{margin-left:auto;font-size:16px;font-weight:800}
@keyframes cm-rise{from{opacity:0;transform:translateY(8px)}}

.cd__foot{padding:18px 24px 22px;border-top:1px solid var(--line);background:#101012;display:flex;flex-direction:column;gap:10px}
.cd__foot[hidden]{display:none}
.cd__sum{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;font-size:14px;color:var(--muted)}
.cd__sum div{display:flex;justify-content:space-between;gap:12px}
.cd__sum dd{color:var(--text);font-weight:700}
.cd__sum .is-green{color:var(--ok)}
.cd__sum [hidden]{display:none}
.cd__total{margin-top:6px;padding-top:12px;border-top:1px dashed var(--line);font-size:16px;color:var(--text)!important}
.cd__total dd{font-size:24px;font-weight:800}
.cd__foot .btn-y,.cd__foot .btn-o{width:100%}

.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:46px 12px;text-align:center}
.empty img{margin-bottom:6px;animation:cm-float 5s ease-in-out infinite}
.empty b{font-size:22px;font-weight:800}
.empty p{max-width:30ch;color:var(--muted);font-size:14px;margin-bottom:8px}
@keyframes cm-float{50%{transform:translateY(-8px)}}

/* ---------- «Додано в кошик» ---------- */
.ad{position:relative;display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;width:100%;max-width:620px;padding:30px 30px 28px 22px;
  background:var(--panel);border:1px solid var(--line);border-radius:26px;box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 120px rgba(255,217,26,.07);outline:0;
  animation:cm-pop .36s cubic-bezier(.2,.9,.25,1.05) both}
.cm.is-closing .ad,.cm.is-closing .cf,.cm.is-closing .md{animation:cm-pop .16s ease reverse both}
@keyframes cm-pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.ad__mascot{width:132px;height:auto;animation:cm-float 5s ease-in-out infinite}
.ad h2{font-size:28px;font-weight:800;font-style:italic;letter-spacing:-1px;margin-bottom:14px;padding-right:34px}
.ad__item{display:flex;align-items:center;gap:14px;padding:12px;background:#0b0b0d;border:1px solid var(--line);border-radius:14px}
.ad__item img{width:60px;height:60px;object-fit:contain;flex-shrink:0}
.ad__item span{display:block;margin-bottom:3px;font-size:14px;font-weight:600;line-height:1.3}
.ad__notice{margin-top:10px;color:var(--yellow);font-size:13px;font-weight:600}
.ad__sum{display:flex;justify-content:space-between;gap:12px;margin:14px 2px 16px;font-size:14px;color:var(--muted)}
.ad__sum b{color:var(--text);font-weight:800}
.ad__btns{display:flex;gap:10px}
.ad__btns>*{flex:1;padding:0 14px}

.cf{width:100%;max-width:430px;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:22px;outline:0;box-shadow:0 40px 100px rgba(0,0,0,.65);
  animation:cm-pop .3s cubic-bezier(.2,.9,.25,1.05) both}
.cf h2{font-size:24px;font-weight:800;font-style:italic;letter-spacing:-.6px;margin-bottom:8px}
.cf p{color:var(--muted);font-size:15px;margin-bottom:22px}
.cf__btns{display:flex;gap:10px}
.cf__btns>*{flex:1;padding:0 12px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;z-index:1300;max-width:min(520px,calc(100vw - 32px));padding:14px 20px;background:#1b1b1e;color:var(--text);
  border:1px solid var(--ok);border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 16px 44px rgba(0,0,0,.6);
  opacity:0;transform:translate(-50%,14px);transition:opacity .25s,transform .25s}
.toast[hidden]{display:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-err{border-color:var(--err)}

/* ---------- страница кошика ---------- */
.cp{padding-top:24px;padding-bottom:64px}
.cp-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.cp-head h1{font-size:34px;font-weight:800;font-style:italic;letter-spacing:-1px}
.cp-head h1 small{margin-left:8px;font-size:15px;font-style:normal;font-weight:600;color:var(--muted);letter-spacing:0}
.cp-back{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--muted);transition:.2s}
.cp-back .ic{width:20px;height:20px;font-size:20px}
.cp-back:hover{color:var(--yellow);border-color:var(--yellow)}

.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;align-items:start}
.cp-grid[hidden],.cp-empty[hidden]{display:none}
.cp-main,.cp-side,.sc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.cp-bar{padding:10px 22px;border-bottom:1px solid var(--line)}
.cp-eta{display:flex;align-items:center;gap:10px;padding:13px 22px;background:rgba(255,217,26,.08);border-bottom:1px solid var(--line);font-size:14px}
.cp-eta .ic{width:20px;height:20px;font-size:20px;color:var(--yellow)}
.cp-eta b{color:var(--yellow)}
.cp-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:22px;padding:22px;border-bottom:1px solid var(--line);animation:cm-rise .3s ease both}
.cp-row:last-child{border-bottom:0}
.cp-row.is-off .cp-row__img{opacity:.5}
.cp-row__img{display:grid;place-items:center;width:112px;height:112px;background:#0b0b0d;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cp-row__img img{width:100%;height:100%;object-fit:contain;padding:8px}
.cp-row__name{display:block;font-size:16px;font-weight:600;line-height:1.35;margin-bottom:4px}
.cp-row__name:hover{color:var(--yellow)}
.cp-row__info small{display:block;color:var(--muted);font-size:12px;margin-bottom:10px}
.cp-row__acts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px}
.cp-row__buy{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:14px;min-width:150px}
.cp-row__price{font-size:24px;font-weight:800;text-align:right}
.cp-row__price small{display:block;margin:2px 0 0;font-size:12px;font-weight:500;color:var(--muted)}

.cp-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:18px;padding:22px}
.sum{display:flex;flex-direction:column;gap:10px;font-size:15px}
.sum div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum dt{color:var(--muted)}
.sum dd{font-weight:700;white-space:nowrap}
.sum__total{margin-top:6px;padding-top:14px;border-top:1px dashed var(--line)}
.sum__total dt{color:var(--text);font-weight:700}
.sum__total dd{font-size:30px;font-weight:800}
.sum__note{color:var(--muted);font-size:13px;line-height:1.5}
.sum__note b{color:var(--yellow)}

.cp-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 16px 64px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.cp-empty img{animation:cm-float 5s ease-in-out infinite}
.cp-empty h2{font-size:30px;font-weight:800;font-style:italic;letter-spacing:-1px}
.cp-empty p{max-width:44ch;color:var(--muted);margin-bottom:10px}
.cp-empty .btn-y{width:auto}

/* рекомендации */
.rec{margin-top:40px}
.rec h2{font-size:30px;font-weight:800;font-style:italic;letter-spacing:-1px;margin-bottom:16px}
.rec__row{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rec__card{flex:0 0 230px;scroll-snap-align:start;min-height:290px}
.card__price s{margin-left:8px;color:var(--muted);font-size:13px;font-weight:500}
.card .add.is-loading{opacity:.6;pointer-events:none}

@media (max-width:1100px){
  .cp-grid{grid-template-columns:1fr}
  .cp-side{position:static}
}
@media (max-width:720px){
  .cp-head h1{font-size:26px}
  .cp-row{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:16px}
  .cp-row__img{width:84px;height:84px}
  .cp-row__buy{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-width:0}
  .cp-row__price{font-size:20px}
  .ad{grid-template-columns:1fr;padding:24px 20px;gap:10px;text-align:center}
  .ad__mascot{width:96px;margin:0 auto}
  .ad h2{padding-right:0}
  .ad__item{text-align:left}
  .ad__btns{flex-direction:column-reverse}
  .rec__card{flex-basis:190px}
}
@media (prefers-reduced-motion:reduce){.cm *,.cm,.empty img,.cp-empty img,.hd-cart b{animation:none!important;transition:none!important}}

/* ---------- «Обране»: сердечки и списки ---------- */
.like{position:absolute;top:10px;left:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--muted);background:rgba(11,11,13,.7);border:1px solid var(--line);transition:color .15s,border-color .15s,transform .15s,background .15s}
.like .ic{width:19px;height:19px;font-size:19px}
.like:hover{color:var(--yellow);border-color:var(--yellow);transform:scale(1.08)}
.like.is-liked{color:var(--yellow);border-color:var(--yellow);background:rgba(255,217,26,.12)}
.like.is-liked .ic{fill:var(--yellow)}
.like--lg{position:static;width:54px;height:54px;border-radius:var(--radius)}
.like--lg .ic{width:24px;height:24px;font-size:24px}
.pr__buyrow{display:flex;gap:12px;align-items:center}

.md--wish{max-width:480px}
.wl-rows{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin-bottom:14px}
.wl{display:flex;align-items:center;gap:14px;padding:13px 16px;text-align:left;background:#0f0f11;border:1px solid var(--line);border-radius:13px;font-weight:600;transition:.15s}
.wl i{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;border-radius:7px;border:2px solid #4a4a50;color:transparent;transition:.15s}
.wl i svg{width:14px;height:14px}
.wl span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl small{color:var(--muted);font-weight:500}
.wl:hover{border-color:#3a3a40}
.wl.is-on{border-color:var(--yellow);background:rgba(255,217,26,.06)}
.wl.is-on i{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.wl-new{display:flex;gap:8px}
.wl-new input{flex:1;min-width:0;height:48px;padding:0 14px;background:#0b0b0d;color:var(--text);border:1px solid var(--line);border-radius:12px;font:inherit;font-size:15px}
.wl-new input:focus{outline:0;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,217,26,.14)}
.wl-new .btn-y{height:48px;padding:0 16px;font-size:14px;box-shadow:none}
.md--wish .fe{margin-top:8px}

/* профиль: списки */
.wt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wt a,.wt button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:22px;font-size:14px;font-weight:600;color:var(--muted);transition:.15s}
.wt a small{opacity:.7}
.wt a:hover,.wt a.is-on,.wt button:hover{border-color:var(--yellow);color:var(--yellow)}
.wt a.is-on{background:rgba(255,217,26,.08)}
.wt__act{display:flex;gap:18px;margin-top:4px}
.wg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.wg__item{position:relative;display:flex;flex-direction:column;padding:14px;background:#1b1b1e;border:1px solid var(--line);border-radius:var(--radius)}
.wg__item img.wg__img{width:100%;height:130px;object-fit:contain;margin:6px 0 10px}
.wg__item a.wg__name{flex:1;font-size:14px;font-weight:500;line-height:1.35}
.wg__item a.wg__name:hover{color:var(--yellow)}
.wg__foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.wg__foot b{font-size:17px}
.wg__rm{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(11,11,13,.7);color:var(--muted)}
.wg__rm:hover{color:var(--err)}
.wg__rm .ic{width:16px;height:16px;font-size:16px}
.wg__off{color:var(--err);font-size:12px;font-weight:600}

/* ---------- общие поля и модальные окна форм ---------- */
.fe{flex-basis:100%;color:var(--err);font-size:13px;font-weight:500;margin:0}
.fe:empty{display:none}
em.fe{font-style:normal;display:block;margin-top:6px}
.fe--big{padding:12px 16px;border:1px solid var(--err);border-radius:12px;background:rgba(255,107,91,.08)}
.fe[hidden]{display:none}
.fld{display:block}
.fld>span:first-child{display:block;margin-bottom:7px;font-size:13px;font-weight:700}
.fld small{margin-left:4px;color:var(--muted);font-weight:500}
.fld input,.fld textarea{display:block;width:100%;padding:0 16px;height:52px;background:#0b0b0d;color:var(--text);border:1px solid var(--line);border-radius:13px;font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}
.fld textarea{height:auto;padding:14px 16px;resize:vertical;min-height:90px}
.fld input::placeholder,.fld textarea::placeholder{color:#5d5d64}
.fld input:hover,.fld textarea:hover{border-color:#3a3a40}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,217,26,.14)}
.fld.has-err input,.fld.has-err textarea{border-color:var(--err);box-shadow:0 0 0 4px rgba(255,107,91,.12)}
.md{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow-y:auto;padding:32px;background:var(--panel);border:1px solid var(--line);border-radius:24px;outline:0;
.md--wide{max-width:640px}
.md h2{font-size:28px;font-weight:800;font-style:italic;letter-spacing:-1px;padding-right:40px}
.md .fld{margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border:1px solid var(--line);border-radius:20px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s}
.chip:hover,.chip.is-on{border-color:var(--yellow);color:var(--yellow)}
.md__sub{margin:6px 0 20px;color:var(--muted);font-size:14px}
.md__btns{display:flex;gap:10px;margin-top:20px}
.md__btns>*{flex:1}
.md--wish .md__sub{margin-bottom:16px}
.md--wish .md__btns{margin-top:14px}