/* cart-drawer.css — sliding cart drawer, empty + populated, qty stepper, line items. */

  .b3d-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--b3d-n-300); border-radius: 999px;
    background: white;
    overflow: hidden;
  }
  .b3d-qty button {
    width: 42px; height: 100%;
    border: 0; background: transparent;
    font-size: 18px; color: var(--b3d-ink);
  }
  .b3d-qty button:hover { background: var(--b3d-fleece-2); }
  .b3d-qty button:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
  .b3d-qty span {
    min-width: 32px; text-align: center;
    font-family: var(--b3d-font-mono); font-size: 14px; color: var(--b3d-ink);
  }
  .b3d-qty-sm button { width: 28px; font-size: 14px; }
  .b3d-qty-sm span { min-width: 22px; font-size: 12px; }

  /* ============ CART DRAWER ============ */
  .b3d-drawer-scrim {
    position: fixed; inset: 0; background: rgba(17,17,17,0.4);
    z-index: 100; opacity: 0; pointer-events: none;
    transition: opacity 220ms var(--b3d-ease);
  }
  .b3d-drawer-scrim.open { opacity: 1; pointer-events: auto; }
  .b3d-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 460px; max-width: 100vw;
    background: var(--b3d-fleece);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 280ms var(--b3d-ease);
    display: flex; flex-direction: column;
  }
  .b3d-drawer.open { transform: translateX(0); }
  .b3d-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--b3d-n-200);
  }
  .b3d-drawer-head h3 {
    font-family: var(--b3d-font-title); font-weight: 700; font-size: 22px;
    color: var(--b3d-ink); margin: 0;
    display: flex; align-items: center; gap: 10px;
    letter-spacing: -0.01em;
  }
  .b3d-drawer-count {
    font-family: var(--b3d-font-mono); font-size: 12px; font-weight: 500;
    background: var(--b3d-fleece-2); color: var(--b3d-n-700);
    border-radius: 999px; padding: 2px 10px;
  }
  .b3d-drawer-head button {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--b3d-fleece-2); border: 0;
    display: grid; place-items: center; font-size: 14px; color: var(--b3d-ink);
  }
  .b3d-drawer-head button:hover { background: var(--b3d-n-200); }
  .b3d-drawer-items { flex: 1; overflow-y: auto; padding: 8px 28px; }
  .b3d-line {
    display: grid; grid-template-columns: 72px 1fr auto;
    gap: 14px; align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--b3d-n-200);
  }
  .b3d-line > * { min-width: 0; }
  .b3d-line:last-child { border-bottom: 0; }
  .b3d-line-thumb {
    width: 72px; height: 72px;
    border-radius: 12px; overflow: hidden;
    background: var(--b3d-fleece-2);
  }
  .b3d-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .b3d-line-thumb img.b3d-img-fallback { object-fit: contain; padding: 8%; box-sizing: border-box; }
  .b3d-line-host {
    font-family: var(--b3d-font-mono); font-size: 10px;
    color: var(--b3d-n-500); margin-bottom: 3px;
  }
  .b3d-line-title {
    font-family: var(--b3d-font-title); font-weight: 600;
    font-size: 14px; color: var(--b3d-ink); line-height: 1.3;
    margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
  }
  .b3d-line-controls { display: flex; align-items: center; gap: 12px; }
  .b3d-line-remove {
    font-family: var(--b3d-font-ui); font-weight: 500;
    font-size: 12px; background: transparent; border: 0;
    color: var(--b3d-n-500); text-decoration: underline; text-underline-offset: 3px;
  }
  .b3d-line-remove:hover { color: var(--b3d-danger); }
  .b3d-line-price { font-family: var(--b3d-font-title); font-weight: 600; font-size: 16px; color: var(--b3d-ink); }
  .b3d-drawer-foot {
    border-top: 1px solid var(--b3d-n-200);
    padding: 24px 28px; background: white;
  }
  .b3d-totals { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
  .b3d-totals > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--b3d-n-600); }
  .b3d-total-row {
    margin-top: 6px; padding-top: 14px;
    border-top: 1px solid var(--b3d-n-200);
    font-family: var(--b3d-font-title); font-weight: 700; font-size: 18px; color: var(--b3d-ink) !important;
  }
  .b3d-total-row span { color: var(--b3d-ink); }
  .b3d-drawer-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 30px; text-align: center; gap: 16px;
  }
  .b3d-empty-mark {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--b3d-fleece-2);
    display: grid; place-items: center; font-size: 32px; color: var(--b3d-ink);
  }
  .b3d-drawer-empty h4 { font-family: var(--b3d-font-title); font-weight: 700; font-size: 22px; color: var(--b3d-ink); margin: 0; }
  .b3d-drawer-empty p { color: var(--b3d-n-600); margin: 0; font-size: 14.5px; max-width: 28ch; }