/**
 * Cart drawer — slide-in panel, items list, qty controls, footer with subtotal,
 * AJAX add-to-cart loading/done states, body scroll lock.
 *
 * Loaded on every WC page so the drawer remains functional everywhere the
 * header cart trigger renders.
 */

.ts-cart-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; visibility: hidden; }
.ts-cart-drawer.is-open { pointer-events: auto; visibility: visible; }
.ts-cart-drawer-overlay { position: absolute; inset: 0; background: rgba(28,26,24,0.45); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.ts-cart-drawer.is-open .ts-cart-drawer-overlay { opacity: 1; }

.ts-cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  box-shadow: -16px 0 40px rgba(28,26,24,0.18);
}
.ts-cart-drawer.is-open .ts-cart-drawer-panel { transform: translateX(0); }

.ts-cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ts-cart-drawer-title {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ts-cart-drawer-title i { font-size: 20px; color: var(--ink); }
.ts-cart-drawer-title .ts-cart-count {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  background: var(--charcoal);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.04em;
}
.ts-cart-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--stone);
  padding: 6px;
  line-height: 1;
  transition: color 0.2s;
}
.ts-cart-drawer-close:hover { color: var(--ink); }

.ts-cart-drawer-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ts-cart-drawer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--stone);
  text-align: center;
}
.ts-cart-drawer-empty i { font-size: 48px; color: var(--dust); }
.ts-cart-drawer-empty p { font-size: 14px; }

.ts-cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}
.ts-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: stretch;
}
.ts-cart-item:last-child { border-bottom: none; }
.ts-cart-item-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ivory);
  flex-shrink: 0;
}
.ts-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-cart-item-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ts-cart-item-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-cart-item-name:hover { color: var(--terra); }
.ts-cart-item-meta { font-size: 11px; color: var(--stone); }
.ts-cart-item-meta p { margin: 0; }
.ts-cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ts-cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}
.ts-qty-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.ts-qty-btn:hover { background: var(--ivory); }
.ts-qty-btn:disabled { color: var(--dust); cursor: not-allowed; }
.ts-qty-value { font-size: 12px; font-weight: 600; min-width: 22px; text-align: center; color: var(--ink); }
.ts-cart-item-price { font-size: 13px; font-weight: 600; color: var(--charcoal); white-space: pre-wrap; }
.ts-cart-item-remove {
  background: none;
  border: none;
  color: var(--stone);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  align-self: flex-start;
  transition: color 0.15s;
  line-height: 1;
}
.ts-cart-item-remove:hover { color: var(--terra); }

.ts-cart-drawer-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--cream);
  padding: 18px 24px 22px;
}
.ts-cart-subtotal-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.ts-cart-subtotal-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--stone); }
.ts-cart-subtotal-amount { font-size: 22px; font-weight: 600; color: var(--charcoal); }
.ts-cart-subtotal-note { font-size: 11px; color: var(--stone); margin: 4px 0 14px; }
.ts-cart-drawer-actions { display: flex; flex-direction: column; gap: 8px; }
.ts-cart-drawer-actions .btn-add-cart { width: 100%; }

/* AJAX-button loading + done states (matches WC's classes).
 *
 * WooCommerce's own spinner is `a.button.loading::after` drawn with the
 * WooCommerce icon font — our card buttons carry `ajax_add_to_cart
 * add_to_cart_button` but not `button`, so that rule never applies to them.
 * This is a theme-owned spinner instead: no icon font, and it inherits the
 * button's own colour so it reads on the dark, light and outline variants
 * alike.
 *
 * The label is hidden with -webkit-text-fill-color rather than `color:
 * transparent` on purpose — it blanks the text (and any icon glyph) while
 * leaving `currentColor` intact for the spinner's border. */
.ajax_add_to_cart.loading {
  position: relative;
  opacity: 0.75;
  pointer-events: none;
  -webkit-text-fill-color: transparent;
}
.ajax_add_to_cart.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  -webkit-text-fill-color: currentColor;
  animation: ts-add-to-cart-spin 0.6s linear infinite;
}
@keyframes ts-add-to-cart-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ajax_add_to_cart.loading::after { animation-duration: 2.4s; }
}

.ajax_add_to_cart.added { background: var(--sage) !important; color: #fff !important; }

/* Lock body scroll while drawer is open. */
body.ts-cart-open { overflow: hidden; }

@media (max-width: 480px) {
  .ts-cart-drawer-panel { max-width: 100%; }
  .ts-cart-item { grid-template-columns: 60px 1fr auto; }
  .ts-cart-item-thumb { width: 60px; height: 60px; }
}