/* component-cart-drawer.css */
.drawer{position:fixed;inset:0;z-index:70}
.drawer[hidden]{display:none}
.drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,100%);
  background:var(--c-bg);display:flex;flex-direction:column;
}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--c-line)}
.drawer__title{margin:0;font-size:1.05rem}
.drawer__close{border:0;background:none;padding:6px;color:inherit}
.drawer__close svg{width:20px;height:20px}
.drawer__body{flex:1;overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch}
.drawer__empty{color:var(--c-muted);text-align:center;padding-block:3rem}
.drawer__foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--c-line)}
.drawer__row{display:flex;justify-content:space-between;gap:1rem;font-size:1rem;margin-bottom:.3rem}
.drawer__note{font-size:.78rem;color:var(--c-muted);margin-bottom:.8rem}
.drawer__link{display:block;text-align:center;margin-top:.7rem;font-size:.86rem;text-decoration:underline}

/* line item */
.cart-row{
  display:grid;grid-template-columns:72px minmax(0,1fr) auto;
  gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--c-line);align-items:center;
}
.cart-row > *{min-width:0}
.cart-row img{border-radius:var(--radius-sm);background:var(--c-surface);width:72px;height:72px;object-fit:cover}
.cart-row__title{font-weight:600;font-size:.88rem;line-height:1.3}
.cart-row__variant{font-size:.78rem;color:var(--c-muted)}
.cart-row__price{font-weight:700;font-size:.9rem;white-space:nowrap}

.qty{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:999px;overflow:hidden;margin-top:.5rem}
.qty button{width:32px;height:34px;border:0;background:none;color:inherit}
.qty input{width:34px;height:34px;border:0;text-align:center;background:none;font-weight:600;font-size:.9rem}