.ql-btn{ border:1px solid #d0d7de; background:#fff; padding:.45rem .65rem; border-radius:.5rem; cursor:pointer; font:inherit; }
.ql-btn--primary{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.ql-btn--danger{ background:#ef4444; color:#fff; border-color:#ef4444; }
.ql-btn--ghost{ background:transparent; }
.ql-btn--square{ width:2rem; height:2rem; line-height:2rem; padding:0; }

.ql-panel{ position:fixed; right:16px; bottom:16px; width:380px; max-width:90vw; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); overflow:hidden; z-index:9999; }
.ql-panel__header{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; border-bottom:1px solid #e5e7eb; }
.ql-panel__actions{ display:flex; gap:.4rem; }
.ql-panel__body{ max-height:45vh; overflow:auto; padding:.6rem; }
.ql-panel__footer{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .8rem; border-top:1px solid #e5e7eb; }

.ql-summary{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

.ql-item{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; border-bottom:1px dashed #e5e7eb; }
.ql-item:last-child{ border-bottom:none; }
.ql-item__img{ width:48px; height:48px; object-fit:cover; border-radius:.5rem; background:#f3f4f6; }
.ql-item__info{ flex:1; }
.ql-item__title{ font-weight:600; }
.ql-item__meta{ color:#6b7280; font-size:.85em; }
.ql-item__qty{ display:flex; align-items:center; gap:.3rem; }
.ql-item__qty input{ width:60px; padding:.2rem .3rem; }

.product .ql-btn--add{ margin-top:.5rem; }

@media (max-width: 640px){
  .ql-panel{ left:8px; right:8px; bottom:8px; width:auto; }
}