/* SB Audio FX — cart drawer + header cart button. Depends on tokens.css */

/* header cart button */
.sb-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-border-strong); background: transparent; color: var(--sb-ink-primary); cursor: pointer; }
.sb-cart-btn:hover { background: var(--sb-layer-hover); }
.sb-cart-btn svg { width: 20px; height: 20px; }
.sb-cart-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sb-brand-grad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--sb-surface-0); }
.sb-cart-count.is-empty { display: none; }

/* drawer */
.sb-cart { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.sb-cart.is-open { visibility: visible; }
.sb-cart__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity var(--sb-dur-med) var(--sb-ease); }
.sb-cart.is-open .sb-cart__backdrop { opacity: 1; }
.sb-cart__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  display: flex; flex-direction: column; background: var(--sb-surface-1); border-left: 1px solid var(--sb-border-strong);
  transform: translateX(100%); transition: transform var(--sb-dur-med) var(--sb-ease-out); box-shadow: var(--sb-shadow-lg);
}
.sb-cart.is-open .sb-cart__panel { transform: none; }
.sb-cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sb-space-5) var(--sb-space-6); border-bottom: 1px solid var(--sb-border); }
.sb-cart__head h2 { margin: 0; font-size: var(--sb-text-xl); }
.sb-cart__x { border: 0; background: transparent; color: var(--sb-ink-muted); font-size: 28px; line-height: 1; cursor: pointer; }
.sb-cart__x:hover { color: var(--sb-ink-primary); }
.sb-cart__items { flex: 1; overflow-y: auto; padding: var(--sb-space-4) var(--sb-space-6); }
.sb-cart__empty { color: var(--sb-ink-muted); text-align: center; margin-top: var(--sb-space-12); }
.sb-cart__item { display: flex; align-items: center; gap: var(--sb-space-4); padding: var(--sb-space-4) 0; border-bottom: 1px solid var(--sb-border); }
.sb-cart__item img { border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-border); flex: none; }
.sb-cart__item-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-cart__item-meta span:first-child { color: var(--sb-ink-primary); font-weight: 600; }
.sb-cart__item-meta span:last-child { color: var(--sb-ink-muted); font-size: var(--sb-text-sm); }
.sb-cart__rm { border: 0; background: transparent; color: var(--sb-ink-muted); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.sb-cart__rm:hover { color: var(--sb-danger); }
.sb-cart__foot { padding: var(--sb-space-5) var(--sb-space-6) calc(var(--sb-space-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--sb-border); }
.sb-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sb-space-4); color: var(--sb-ink-secondary); }
.sb-cart__total strong { font-size: var(--sb-text-2xl); color: var(--sb-ink-primary); }
.sb-cart__note { text-align: center; color: var(--sb-ink-muted); font-size: var(--sb-text-xs); margin: var(--sb-space-3) 0 0; }
.sb-cart__error { margin: 0 0 var(--sb-space-4); padding: var(--sb-space-3) var(--sb-space-4); border-radius: var(--sb-radius-md); background: rgba(220, 60, 60, .12); border: 1px solid rgba(220, 60, 60, .4); color: #ffb4b4; font-size: var(--sb-text-sm); text-align: center; }
.sb-cart__error[hidden] { display: none; }

/* bundle upsell */
.sb-cart__upsell { padding: 0 var(--sb-space-6); }
.sb-cart__upsell[hidden] { display: none; }
.sb-cart__upsell-body {
  display: flex; align-items: center; gap: var(--sb-space-3); flex-wrap: wrap;
  padding: var(--sb-space-4); border: 1px solid var(--sb-brand); border-radius: var(--sb-radius-md);
  background: var(--sb-brand-grad-soft);
}
.sb-cart__upsell-ico { font-size: 18px; flex: none; }
.sb-cart__upsell-body p { flex: 1; min-width: 140px; margin: 0; font-size: var(--sb-text-sm); color: var(--sb-ink-primary); }
.sb-cart__upsell-body strong { color: #fff; }
.sb-cart__upsell-btn { flex: none; }

/* add-to-cart added state */
[data-add-cart].is-added { background: var(--sb-success-soft); border-color: rgba(52,211,153,.4); color: #9ff0d0; }