/* cart.css — keranjang (drawer + /cart) + qty-stepper + badge navbar.
   Hanya token design system; tidak ada warna/ukuran hardcode selain rem. */

/* ---- qty stepper (dipakai detail produk & keranjang) ---- */
.qty-stepper { display:flex; height:var(--qty-h,3rem); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--color-bg-surface); }
.qty-stepper button { width:calc(var(--qty-h,3rem) * .92); border:0; cursor:pointer; font-size:var(--font-size-350); background:transparent; color:var(--color-text-secondary); transition:var(--transition-base); }
.qty-stepper button:hover { background:var(--color-bg-sunken); color:var(--color-text-primary); }
.qty-stepper button:focus-visible { outline:2px solid var(--color-border-focus); outline-offset:-2px; }
.qty-stepper input { width:calc(var(--qty-h,3rem) * 1.15); border:0; text-align:center; background:transparent; color:inherit; font:inherit; font-weight:var(--font-weight-semibold); -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty-stepper input:focus-visible { outline:2px solid var(--color-border-focus); outline-offset:-2px; }

/* ---- badge di navbar ---- */
.navbar-cart { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.navbar-cart .icon { width:var(--size-icon-sm,1.25rem); height:var(--size-icon-sm,1.25rem); }
.navbar-cart .icon svg { width:100%; height:100%; }
.navbar-cart-badge { position:absolute; top:-.25rem; right:-.25rem; min-width:1.125rem; height:1.125rem; padding:0 .25rem; border-radius:999px; background:var(--color-brand,var(--color-text-primary)); color:var(--color-text-inverse,#fff); font-size:.6875rem; font-weight:var(--font-weight-semibold); line-height:1.125rem; text-align:center; pointer-events:none; }
.navbar-cart-badge[hidden] { display:none; }

/* ---- daftar item ---- */
.cart-title { margin-block:var(--size-300,1rem) var(--size-400,1.5rem); }
.cart-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cart-item { display:grid; grid-template-columns:5rem 1fr; gap:var(--size-300,1rem); padding-block:var(--size-300,1rem); border-bottom:1px solid var(--color-border-subtle,var(--color-border-strong)); }
.cart-item:first-child { padding-top:0; }
.cart-item-media { aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; background:var(--color-bg-sunken); display:grid; place-items:center; color:var(--color-text-secondary); }
.cart-item-media img { width:100%; height:100%; object-fit:cover; }
.cart-item-main { min-width:0; display:flex; flex-direction:column; gap:.25rem; }
.cart-item-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--size-200,.5rem); }
.cart-item-name { font-weight:var(--font-weight-semibold); color:var(--color-text-primary); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-item-name:hover { text-decoration:underline; }
.cart-item-remove { flex:none; border:0; background:transparent; color:var(--color-text-secondary); cursor:pointer; padding:.25rem; border-radius:var(--radius-sm); }
.cart-item-remove:hover { color:var(--color-danger,var(--color-text-primary)); background:var(--color-bg-sunken); }
.cart-item-remove:focus-visible { outline:2px solid var(--color-border-focus); }
.cart-item-variant, .cart-item-price { margin:0; font-size:var(--font-size-200,.875rem); color:var(--color-text-secondary); }
.cart-item-price s { margin-left:.375rem; opacity:.7; }
.cart-item-alert { margin:0; font-size:var(--font-size-200,.875rem); color:var(--color-danger,var(--color-text-primary)); font-weight:var(--font-weight-semibold); }
.cart-item-foot { display:flex; justify-content:space-between; align-items:center; gap:var(--size-300,1rem); margin-top:.375rem; }
.cart-item-total { margin:0; font-weight:var(--font-weight-semibold); font-variant-numeric:tabular-nums; }
.cart-item.is-busy { pointer-events:none; }   /* opacity:.55; tanpa opacity: dim-lalu-pulih terlihat sebagai kedip */

/* ---- ringkasan ---- */
.cart-summary { display:flex; flex-direction:column; gap:var(--size-200,.75rem); padding-top:var(--size-300,1rem); }
.cart-summary-row { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--font-size-300,1rem); }
.cart-summary-row strong { font-size:var(--font-size-400,1.25rem); font-variant-numeric:tabular-nums; }
.cart-summary-row small { color:var(--color-text-secondary); }
.cart-summary-note { margin:0; font-size:var(--font-size-200,.875rem); color:var(--color-text-secondary); }
.cart-summary-link { text-align:center; color:var(--color-text-secondary); text-decoration:none; font-size:var(--font-size-200,.875rem); }
.cart-summary-link:hover { color:var(--color-text-primary); text-decoration:underline; }
.cart-summary .btn { text-align:center; justify-content:center; }

/* ---- halaman /cart: 2 kolom di desktop, ringkasan sticky ---- */
.cart-panel--page:not([data-count="0"]) { display:grid; gap:var(--size-500,2rem); align-items:start; }
@media (min-width:60rem) {
	.cart-panel--page:not([data-count="0"]) { grid-template-columns:minmax(0,1fr) 22rem; }
	.cart-panel--page .cart-summary { position:sticky; top:calc(var(--shop-nav-h,5rem) + 1rem); padding:var(--size-400,1.5rem); border:1px solid var(--color-border-subtle,var(--color-border-strong)); border-radius:var(--radius-lg,var(--radius-md)); background:var(--color-bg-surface); }
}

/* ---- drawer: panel mengisi body, ringkasan menempel di bawah ---- */
.drawer-body[data-cart-panel] { padding:var(--size-300,1rem); display:flex; flex-direction:column; }
.cart-panel--drawer { display:flex; flex-direction:column; flex:1; min-height:0; }
.cart-panel--drawer .cart-list { flex:1; overflow:auto; }
.cart-panel--drawer .cart-summary { position:sticky; bottom:0; background:var(--color-bg-surface); border-top:1px solid var(--color-border-subtle,var(--color-border-strong)); margin-top:auto; padding-bottom:0; }
.cart-loading { display:grid; place-items:center; padding:var(--size-600,3rem); }