/* ======================================================
   JJ Paper — Cart Drawer
   ====================================================== */

#cart {
  position:fixed; top:0; right:-440px; width:420px; max-width:100vw;
  height:100vh; background:#fff; z-index:2000;
  box-shadow:-8px 0 40px rgba(0,0,0,.15);
  transition:right .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
#cart.op { right:0 }

.c-ov { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1999;
        display:none; backdrop-filter:blur(2px) }
.c-ov.sh { display:block }

/* Header */
.c-hd { background:var(--gd); color:#fff; padding:20px 24px;
        display:flex; align-items:center; justify-content:space-between }
.c-hd h3  { font-size:17px; font-weight:700 }
.c-cls    { background:rgba(255,255,255,.15); color:#fff; width:32px; height:32px;
            border-radius:50%; font-size:18px; display:flex; align-items:center;
            justify-content:center; transition:var(--tr) }
.c-cls:hover { background:rgba(255,255,255,.3) }

/* Body */
.c-body   { flex:1; overflow-y:auto; padding:18px }
.c-empty  { text-align:center; padding:60px 20px; color:#bbb }
.c-empty-ico { font-size:52px; margin-bottom:14px }
.c-empty p   { font-size:14px; font-weight:500 }

/* Cart item */
.c-item  { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f2f2f2; align-items:flex-start }
.ci-ico  { width:52px; height:52px; border-radius:8px; background:var(--gl);
           display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;
           overflow:hidden }
.ci-ico img    { width:100%; height:100%; object-fit:cover }
.ci-info       { flex:1; min-width:0 }
.ci-name       { font-size:12px; font-weight:700; color:var(--bk); margin-bottom:3px; line-height:1.4 }
.ci-brand      { font-size:10px; font-weight:700; color:var(--gm); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px }
.co-item-brand { font-size:11px; font-weight:700; color:var(--gm); text-transform:uppercase }
.ci-price      { font-size:13px; color:var(--gd); font-weight:700 }
.ci-price-bs   { font-size:10px; color:var(--gr); font-weight:500 }
.ci-ctrl       { display:flex; align-items:center; gap:8px; margin-top:6px }
.ci-del        { color:#ddd; font-size:16px; padding:4px; transition:var(--tr); margin-left:auto }
.ci-del:hover  { color:var(--danger) }
.ci-subtotal   { font-size:13px; font-weight:800; color:var(--gd); min-width:54px; text-align:right }

/* Footer */
.c-ft { padding:18px 24px; border-top:2px solid #f2f2f2; flex-shrink:0 }
.c-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px }
.c-total-l   { font-size:14px; color:#555; font-weight:500 }
.c-total-v   { font-size:24px; font-weight:800; color:var(--gd) }
.c-total-bs  { font-size:12px; color:var(--gr); margin-bottom:14px; text-align:right; font-weight:500 }
.c-note      { background:var(--gx); border-radius:var(--rs); padding:10px; margin-bottom:14px }
.c-note label   { font-size:10px; font-weight:700; color:var(--gd); display:block; margin-bottom:4px }
.c-note textarea{ width:100%; border:none; background:transparent; font-size:12px;
                  resize:none; height:52px; outline:none; color:#555 }
.btn-clc       { width:100%; color:#bbb; font-size:12px; padding:8px; margin-top:6px; transition:var(--tr) }
.btn-clc:hover { color:var(--danger) }
.c-checkout    { width:100%; margin-bottom:8px; justify-content:center }