/* ============================================================
   H7V ARCADE — CART (nav button, inline card picker, drawer, toast)
   Loaded after gate.css. Tokens from style.css.
   Layers: scrim z120 · drawer z130 · toast z150 (all below gate z200).
   Motion = transform/opacity only (perf rule: no animated height/box-shadow).
   ============================================================ */

/* ---------- NAV CART BUTTON (replaces the old Telegram pill, keeps .nav-cta) ---------- */
.nav-cart{ background:var(--yellow); color:var(--ink-on); position:relative; }
.nav-cart svg{ flex:0 0 auto; }
.cart-badge{
  position:absolute; top:-.55em; right:-.5em;
  min-width:1.55em; height:1.55em; padding:0 .35em;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-weight:800; font-size:.72rem; line-height:1;
  color:#fff; background:var(--it-red);
  border:2px solid var(--ol); border-radius:999px;
  box-shadow:2px 2px 0 var(--ol);
  transition:transform .2s ease, opacity .2s ease;
}
.cart-badge.is-empty{ opacity:0; transform:scale(.4); }
.nav-cart.cart-bump .cart-badge{ animation:cartbump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes cartbump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.55) rotate(-8deg); } 100%{ transform:scale(1); } }
@media (max-width:400px){ .nav-cart-label{ display:none; } .nav-cart{ padding:.5em .8em; } }

/* ---------- INLINE PICKER (flow child of .card, inserted before the CTA) ---------- */
.card.is-picking{ cursor:default; }
.card.is-picking:hover,.card.is-picking:active{ transform:none; }
.card.is-picking .card-add{ display:none; }
.card-picker{
  position:relative; z-index:8;
  display:flex; flex-direction:column; gap:.7rem;
  margin:0 .8rem .9rem; padding:.85rem;
  background:var(--panel2);
  border:3px solid var(--ol); border-radius:12px;
  box-shadow:var(--sticker-sh-sm);
  animation:fadein .22s ease;
  cursor:default;
}
.picker-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-family:var(--f-display); font-size:1.15rem; letter-spacing:.6px; color:var(--yellow);
  -webkit-text-stroke:.4px var(--ol);
}
.picker-x,.cart-x,.ci-del{
  display:grid; place-items:center; flex:0 0 auto;
  width:2rem; height:2rem;
  font-family:var(--f-mono); font-weight:800; font-size:.9rem; color:var(--ink);
  background:var(--panel); border:2.5px solid var(--ol); border-radius:8px;
  box-shadow:2px 2px 0 var(--ol);
  transition:transform .12s ease, background .2s ease;
}
.picker-x:hover,.cart-x:hover,.ci-del:hover{ background:var(--it-red); transform:translate(-1px,-1px); }
.picker-x:active,.cart-x:active,.ci-del:active{ transform:translate(1px,1px) scale(.94); }

.picker-grades{ display:flex; flex-wrap:wrap; gap:.4rem; }
.picker-grade{
  font-family:var(--f-mono); font-weight:700; font-size:.72rem;
  color:var(--ink-dim); background:var(--panel);
  border:2.5px solid var(--ol); border-radius:8px; padding:.35em .6em;
  box-shadow:2px 2px 0 var(--ol);
  transition:transform .12s ease, background .2s ease, color .2s ease;
}
.picker-grade.is-on{ color:var(--ink-on); background:var(--cyan); transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ol); }

.picker-tiers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr)); gap:.45rem; }
.picker-tier{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  font-family:var(--f-mono); color:var(--ink);
  background:var(--panel); border:3px solid var(--ol); border-radius:10px;
  padding:.5em .4em; box-shadow:var(--sticker-sh-sm);
  transition:transform .12s ease, background .2s ease, color .2s ease;
}
.picker-tier .pt-q{ font-weight:800; font-size:.82rem; }
.picker-tier .pt-p{ font-weight:600; font-size:.72rem; color:var(--ink-dim); }
.picker-tier:hover{ transform:translate(-1px,-1px); }
.picker-tier.is-on{ background:var(--yellow); color:var(--ink-on); transform:rotate(-1.5deg); }
.picker-tier.is-on .pt-p{ color:var(--ink-on); }

.picker-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.picker-sum{ font-family:var(--f-display); font-size:1.5rem; letter-spacing:.5px; color:var(--yellow); -webkit-text-stroke:.5px var(--ol); }

.cart-step{
  display:inline-flex; align-items:center;
  border:2.5px solid var(--ol); border-radius:10px; overflow:hidden;
  background:var(--panel); box-shadow:2px 2px 0 var(--ol);
}
.cs-btn{
  width:2.2rem; height:2.1rem;
  font-family:var(--f-mono); font-weight:800; font-size:1.1rem; color:var(--ink);
  transition:background .15s ease;
}
.cs-btn:hover{ background:var(--cyan); color:var(--ink-on); }
.cs-btn:active{ background:var(--cyan-2); }
.cs-count{ min-width:2rem; text-align:center; font-family:var(--f-mono); font-weight:800; font-size:.95rem; }

.picker-confirm{
  font-family:var(--f-mono); font-weight:800; font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-on); background:linear-gradient(180deg, var(--it-green), #1fa847);
  border:3px solid var(--ol); border-radius:10px;
  padding:.85em 1rem; box-shadow:var(--sticker-sh-sm);
  transition:transform .12s ease, filter .15s ease;
}
.picker-confirm:hover{ transform:translate(-1px,-1px); filter:brightness(1.08); }
.picker-confirm:active{ transform:translate(2px,2px); }

/* ---------- SCRIM + DRAWER ---------- */
body.cart-lock{ overflow:hidden; }
.cart-scrim{
  position:fixed; inset:0; z-index:120;
  background:rgba(4,4,10,.62);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.cart-scrim.is-open{ opacity:1; visibility:visible; transition:opacity .28s ease; }

.cart-drawer{
  position:fixed; z-index:130; top:0; right:0; bottom:0;
  width:min(430px,100vw);
  display:flex; flex-direction:column;
  background:var(--bg2);
  border-left:4px solid var(--ol);
  box-shadow:-10px 0 0 var(--ol);
  transform:translateX(105%); visibility:hidden;
  transition:transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s;
}
.cart-drawer.is-open{ transform:none; visibility:visible; transition:transform .34s cubic-bezier(.2,.8,.2,1); }

.cart-head{
  display:flex; align-items:center; gap:.6rem;
  padding:1rem 1.1rem;
  border-bottom:3px solid var(--ol);
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), var(--panel);
}
.cart-head-ico{
  display:grid; place-items:center; width:2.3rem; height:2.3rem; flex:0 0 auto;
  color:var(--ink-on); background:var(--yellow);
  border:2.5px solid var(--ol); border-radius:9px; box-shadow:2px 2px 0 var(--ol);
  transform:rotate(-4deg);
}
.cart-title{
  flex:1 1 auto;
  font-family:var(--f-display); font-weight:400; font-size:1.6rem; letter-spacing:1px; line-height:1;
  -webkit-text-stroke:.6px var(--ol);
}
.cart-title em{ font-style:normal; color:var(--cyan); }

.cart-items{
  flex:1 1 auto; min-height:0;            /* flex child must shrink to scroll */
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:1rem 1.1rem;
  display:flex; flex-direction:column; gap:.75rem;
}
.cart-item{
  position:relative;
  display:grid; grid-template-columns:1fr auto; gap:.6rem;
  padding:.8rem 2.6rem .8rem .85rem;
  background:var(--panel);
  border:3px solid var(--ol); border-radius:12px;
  box-shadow:var(--sticker-sh-sm);
  animation:fadein .2s ease;
}
.ci-main{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.ci-no{ font-family:var(--f-mono); font-weight:700; font-size:.68rem; color:var(--cyan); letter-spacing:.06em; }
.ci-name{ font-family:var(--f-display); font-size:1.25rem; letter-spacing:.5px; line-height:1.05; overflow-wrap:anywhere; }
.ci-meta{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-dim); overflow-wrap:anywhere; }
.ci-side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:.45rem; }
.ci-sub{ font-family:var(--f-mono); font-weight:800; font-size:.9rem; color:var(--yellow); white-space:nowrap; }
.ci-del{ position:absolute; top:.5rem; right:.5rem; width:1.8rem; height:1.8rem; font-size:.8rem; }

.cart-empty{
  margin:auto 0; padding:2rem .5rem;
  display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
}
.cart-empty-big{ font-family:var(--f-display); font-size:2rem; letter-spacing:1px; color:var(--ink-dim); -webkit-text-stroke:.5px var(--ol); }
.cart-empty-sub{ font-size:.9rem; color:var(--ink-mute); max-width:26ch; }
.cart-browse{
  margin-top:.4rem;
  font-family:var(--f-mono); font-weight:800; font-size:.8rem; letter-spacing:.06em;
  color:var(--ink-on); background:linear-gradient(180deg, var(--cyan), var(--cyan-2));
  border:3px solid var(--ol); border-radius:10px; padding:.8em 1.2em;
  box-shadow:var(--sticker-sh-sm);
}

.cart-foot{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:.6rem;
  padding:1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  border-top:3px solid var(--ol);
  background:var(--panel);
}
.cart-foot[hidden]{ display:none; }
.cart-total{ display:flex; align-items:baseline; gap:.6rem; }
.ct-l{ font-family:var(--f-mono); font-weight:800; font-size:.8rem; letter-spacing:.1em; color:var(--ink-dim); }
.ct-g{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-mute); }
.ct-eur{
  margin-left:auto;
  font-family:var(--f-display); font-weight:400; font-size:2.3rem; line-height:1; letter-spacing:1px;
  color:var(--yellow); -webkit-text-stroke:.8px var(--ol);
  text-shadow:3px 3px 0 var(--ol);
}
.cart-via{ font-family:var(--f-mono); font-size:.74rem; color:var(--ink-dim); }
.cart-via b{ color:var(--cyan); }
.cart-checkout{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-display); font-size:1.45rem; letter-spacing:1px;
  color:#fff; background:var(--tg);
  border:3.5px solid var(--ol); border-radius:12px;
  padding:.6em 1rem; box-shadow:var(--sticker-sh);
  -webkit-text-stroke:.5px var(--ol);
  transition:transform .14s ease, filter .15s ease;
}
.cart-checkout .cc-arr{ display:inline-block; transition:transform .2s ease; }
.cart-checkout:hover{ transform:translate(-2px,-2px); filter:brightness(1.08); }
.cart-checkout:hover .cc-arr{ transform:translateX(5px); }
.cart-checkout:active{ transform:translate(2px,2px); }
.cart-hint{ font-size:.78rem; color:var(--ink-mute); text-align:center; }
.cart-clear{
  align-self:center;
  font-family:var(--f-mono); font-weight:700; font-size:.7rem; letter-spacing:.08em;
  color:var(--ink-mute); padding:.4em .6em; border-radius:6px;
  text-decoration:underline; text-underline-offset:3px;
}
.cart-clear:hover{ color:var(--it-red); }

/* ---------- TOAST ---------- */
.cart-toast{
  position:fixed; z-index:150; left:50%; bottom:calc(1.4rem + env(safe-area-inset-bottom));
  max-width:calc(100vw - 2rem);
  font-family:var(--f-display); font-size:1.15rem; letter-spacing:.6px; text-align:center;
  color:var(--ink-on); background:var(--yellow);
  border:3px solid var(--ol); border-radius:10px; padding:.35em .9em;
  box-shadow:var(--sticker-sh-sm);
  -webkit-text-stroke:.3px var(--ol);
  opacity:0; transform:translateX(-50%) rotate(-2deg) scale(.5); pointer-events:none;
}
.cart-toast.show{ animation:carttoast 2.6s ease forwards; }
@keyframes carttoast{
  0%{ opacity:0; transform:translateX(-50%) rotate(-2deg) scale(.5); }
  10%{ opacity:1; transform:translateX(-50%) rotate(-2deg) scale(1.1); }
  18%{ transform:translateX(-50%) rotate(-2deg) scale(1); }
  85%{ opacity:1; transform:translateX(-50%) rotate(-2deg) scale(1); }
  100%{ opacity:0; transform:translateX(-50%) rotate(-2deg) scale(.9); }
}

/* ---------- PHONE: bottom sheet ---------- */
@media (max-width:719px){
  .cart-drawer{
    top:auto; left:0; width:100%; max-height:88svh;
    border-left:0; border-top:4px solid var(--ol); border-radius:18px 18px 0 0;
    box-shadow:0 -8px 0 var(--ol);
    transform:translateY(105%);
  }
  .cart-head{ border-radius:14px 14px 0 0; }
  .card-picker{ margin:0 .65rem .8rem; padding:.75rem; }
  .ct-eur{ font-size:2rem; }
}
@media (pointer:coarse){
  .cs-btn{ width:2.6rem; height:2.6rem; }
  .picker-tier{ min-height:48px; }
  .picker-grade{ min-height:44px; }
  .picker-confirm,.cart-checkout{ min-height:52px; }
  .picker-x,.cart-x{ width:2.6rem; height:2.6rem; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .cart-drawer,.cart-scrim{ transition:none; }
  .card-picker,.cart-item{ animation:none; }
  .nav-cart.cart-bump .cart-badge{ animation:none; }
  .cart-toast.show{ animation:none; opacity:1; transform:translateX(-50%) rotate(-2deg); }
  .cart-checkout:hover .cc-arr{ transform:none; }
}