/* ============================================================
   CHECKOUT — три шага внутри корзины, без перехода на сторонние сайты
   ============================================================ */

.cart-panel{
  position:absolute;inset:0;
  background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .42s var(--ease-out),opacity .3s;
  opacity:0;pointer-events:none;
  z-index:2;
}
.cart-panel[aria-hidden="false"]{transform:translateX(0);opacity:1;pointer-events:auto}

.cp-head{
  display:flex;align-items:center;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.cp-head h3{font-family:var(--serif);font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.cp-head .sub{font-size:.76rem;color:var(--muted-2);margin-top:2px}
.cp-back{
  width:36px;height:36px;flex-shrink:0;
  display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;
  color:var(--ink);background:transparent;
  transition:background .2s,border-color .2s;
}
.cp-back:hover{background:var(--paper-3);border-color:var(--line)}
.cp-back svg{width:16px;height:16px}

.cp-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 22px 8px;
  display:flex;flex-direction:column;gap:16px;
}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.field .opt{
  text-transform:none;letter-spacing:0;font-weight:500;
  color:var(--muted-2);font-size:.72rem;
}
.field input,.field textarea{
  width:100%;
  padding:12px 14px;
  font:inherit;font-size:.95rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:56px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#B9B0A6}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--shu);
  box-shadow:0 0 0 3px rgba(184,74,54,.10);
}
.field input.bad,.field textarea.bad{
  border-color:#C0392B;
  box-shadow:0 0 0 3px rgba(192,57,43,.10);
}
.hint{font-size:.75rem;color:var(--muted-2);line-height:1.4}
.err{font-size:.76rem;color:#C0392B;min-height:0}
.err:empty{display:none}

/* ---------- summary ---------- */
.cp-summary{
  border-top:1px solid var(--line);
  padding-top:14px;margin-top:2px;
}
.sum-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.sum-list li{
  display:flex;justify-content:space-between;gap:14px;
  font-size:.85rem;color:var(--ink-soft);
}
.sum-list li em{font-style:normal;color:var(--muted-2)}
.sum-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.sum-total b{
  font-family:var(--serif);font-size:1.32rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sum-total small{font-size:.68rem;font-weight:500;color:var(--muted-2)}

/* ---------- footer ---------- */
.cp-foot{
  flex-shrink:0;
  padding:16px 22px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--paper);
}

/* ---------- confirmation ---------- */
.done{align-items:center;text-align:center;padding-top:34px;gap:14px}
.done-mark{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(75,160,110,.35);
  color:#3E7A56;background:rgba(75,160,110,.08);
  margin-bottom:4px;
}
.done-mark svg{width:30px;height:30px}
.done h3{font-family:var(--serif);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.done-lead{font-size:.88rem;color:var(--muted);line-height:1.6;max-width:34ch}
.done-card{
  width:100%;text-align:left;
  margin-top:8px;padding:16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;
}
.done-id{
  font-size:.68rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--shu);
  margin-bottom:12px;
}
.done-meta{
  display:flex;flex-direction:column;gap:9px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink-soft);
}
.done-meta div{display:flex;gap:10px}
.done-meta div span{
  flex:0 0 84px;
  font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
  padding-top:2px;
}
.done-actions{
  width:100%;display:flex;flex-direction:column;gap:10px;
  margin-top:auto;padding-top:16px;
}

@media (max-width:400px){
  .cp-head,.cp-body,.cp-foot{padding-left:16px;padding-right:16px}
}

/* hidden attribute must win over .btn display rules */
[hidden]{display:none !important}
.done-via{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 2px}