/* ==========================================================================
   M חשמל — Cart Drawer (Stage 65, v1.9.18). Tokens + np-btn / np-qty / np-badge from the Design System only.
   RTL-first: the sheet sits on the inline-start side (right in Hebrew); logical properties throughout.
   ========================================================================== */

.np-cart-drawer { --np-cd-thumb: 96px; --np-cd-pad: var(--np-space-5); }
.np-cart-drawer[hidden] { display: none; }
.np-cart-drawer { position: fixed; inset: 0; z-index: var(--np-z-modal); }
@media (min-width: 601px) { .admin-bar .np-cart-drawer { top: var(--wp-admin--admin-bar--height, 32px); } }
@media (max-width: 600px) { .admin-bar .np-cart-drawer { z-index: 100000; } } /* phones: the scrolling WP admin bar (logged-in staff only) must not cover the drawer header */

.np-cart-drawer__overlay {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .5); opacity: 0;
  transition: opacity var(--np-motion-slow) var(--np-ease);
}
.np-cart-drawer__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
  width: min(440px, 92vw); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--np-color-bg-surface); color: var(--np-color-text); font-family: var(--np-font-family);
  box-shadow: var(--np-shadow-md); outline: none;
  transform: translateX(100%); transition: transform var(--np-motion-slow) cubic-bezier(.22, .61, .36, 1);
}
[dir="ltr"] .np-cart-drawer__panel { transform: translateX(-100%); }
.np-cart-drawer.is-open .np-cart-drawer__overlay { opacity: 1; }
.np-cart-drawer.is-open .np-cart-drawer__panel { transform: none; }

/* Page behind: no scroll while open (body overflow propagates to the viewport, like the mobile nav / filters);
   the JS pads the body by the removed scrollbar width on the scrollbar's side, so nothing shifts sideways. */
body.np-cart-open { overflow: hidden; }
.np-cart-drawer, .np-cart-drawer *, .np-cart-drawer *::before, .np-cart-drawer *::after { box-sizing: border-box; }

/* ---------- Header ---------- */
.np-cart-drawer__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--np-space-3);
  min-height: 64px; padding-block: var(--np-space-2); padding-inline: var(--np-cd-pad) var(--np-space-3);
  border-bottom: 1px solid var(--np-color-border);
}
.np-cart-drawer__title {
  margin: 0; font-family: var(--np-font-family); font-size: var(--np-font-h4-size); font-weight: 700; line-height: 1.3;
  color: var(--np-color-neutral-900);
}
.np-cart-drawer__title-count { font-weight: 600; color: var(--np-color-text-secondary); font-variant-numeric: tabular-nums; }
.np-btn.np-btn--icon.np-cart-drawer__close { --_border: transparent; --_fg: var(--np-color-neutral-800); flex: none; }

/* ---------- Body (the only scrolling region) ---------- */
.np-cart-drawer__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.np-cart-drawer__list { list-style: none; margin: 0; padding: 0 var(--np-cd-pad); }

/* ---------- Item ---------- */
.np-cart-item {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--np-cd-thumb) minmax(0, 1fr); column-gap: var(--np-space-4); row-gap: var(--np-space-3);
  align-items: start; padding-block: var(--np-space-4); border-bottom: 1px solid var(--np-color-border);
}
.np-cart-item:last-child { border-bottom: 0; }
.np-cart-item__media {
  display: block; width: var(--np-cd-thumb); aspect-ratio: 1 / 1; padding: var(--np-space-2); box-sizing: border-box;
  background: var(--np-color-bg-surface); border: 1px solid var(--np-color-border); border-radius: var(--np-radius-md); overflow: hidden;
}
.np-cart-item__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }

.np-cart-item__info { display: flex; flex-direction: column; gap: var(--np-space-1); min-width: 0; }
.np-cart-item__top { display: flex; align-items: center; justify-content: space-between; gap: var(--np-space-2); min-height: 24px; }
.np-cart-item__brand {
  min-width: 0; font-size: var(--np-font-caption-size); font-weight: 600; line-height: 1.2; color: var(--np-color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-cart-item__brand.has-logo img { display: block; inline-size: auto; block-size: auto; max-inline-size: 72px; max-block-size: 18px; object-fit: contain; }

/* Remove: low emphasis, separate from the stepper; 44px hit area without growing the row. */
.np-cart-item__remove, button.np-cart-item__remove {
  flex: none; display: inline-flex; align-items: center; gap: var(--np-space-1);
  min-height: var(--np-touch); margin-block: -10px; margin-inline-end: calc(-1 * var(--np-space-2)); padding: 0 var(--np-space-2);
  background: transparent; border: 0; border-radius: var(--np-radius-sm); box-shadow: none;
  font-family: var(--np-font-family); font-size: var(--np-font-body-small-size); font-weight: 600; line-height: 1;
  color: var(--np-color-text-muted); cursor: pointer;
  transition: color var(--np-motion-fast) var(--np-ease), background-color var(--np-motion-fast) var(--np-ease);
}
button.np-cart-item__remove:hover, button.np-cart-item__remove:focus-visible { background: var(--np-color-error-soft); color: var(--np-color-error); }
button.np-cart-item__remove:focus { background: transparent; color: var(--np-color-text-muted); }
button.np-cart-item__remove:focus-visible { outline: var(--np-focus-ring); outline-offset: -2px; background: var(--np-color-error-soft); color: var(--np-color-error); }
button.np-cart-item__remove[aria-disabled="true"] { cursor: default; opacity: .5; background: transparent; color: var(--np-color-text-muted); }
.np-cart-item__remove-icon { display: inline-flex; }

.np-cart-item__title {
  margin: 0; font-family: var(--np-font-family); font-size: var(--np-font-body-size); font-weight: 600; line-height: 1.4; color: var(--np-color-neutral-900);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: pretty;
}
.np-cart-item__title a { color: inherit; text-decoration: none; }
.np-cart-item__title a:hover { color: var(--np-color-brand-primary); }
.np-cart-item__meta { margin: 0; font-size: var(--np-font-caption-size); line-height: var(--np-font-caption-lh); color: var(--np-color-text-muted); }

.np-cart-item__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--np-space-2) var(--np-space-3);
  margin-top: var(--np-space-2);
}
.np-cart-item .np-qty { height: calc(var(--np-touch) + 2px); flex: none; } /* 44px buttons inside the 1px border */
.np-cart-item .np-qty__btn, .np-cart-item button.np-qty__btn { width: var(--np-touch); min-height: 0; }
.np-cart-item .np-qty__input, .np-cart-item input.np-qty__input:not([type="button"]):not([type="submit"]) { width: 44px; font-variant-numeric: tabular-nums; }
.np-cart-item button.np-qty__btn[aria-disabled="true"] { color: var(--np-color-neutral-300); background: transparent; cursor: not-allowed; }
.np-cart-item__qty-static { margin: 0; font-size: var(--np-font-body-small-size); color: var(--np-color-text-secondary); }

.np-cart-item__price {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-inline-start: auto; text-align: end;
  font-variant-numeric: tabular-nums; min-width: 0;
}
.np-cart-item__price p { margin: 0; }
.np-cart-item__price-now {
  font-size: var(--np-font-price-regular-size); font-weight: var(--np-font-price-regular-weight); line-height: var(--np-font-price-regular-lh);
  color: var(--np-color-price); white-space: nowrap;
}
.np-cart-item__price-was { display: flex; align-items: center; gap: var(--np-space-2); font-size: var(--np-font-body-small-size); color: var(--np-color-old-price); white-space: nowrap; }
.np-cart-item__price-was del { color: inherit; }
.np-cart-item__line { font-size: var(--np-font-caption-size); line-height: var(--np-font-caption-lh); color: var(--np-color-text-muted); white-space: nowrap; }
.np-cart-item.is-dirty .np-cart-item__line { opacity: .45; }

/* Item-level pending: dim + thin indeterminate bar, layout unchanged (no spinner). */
.np-cart-item.is-pending .np-cart-item__media, .np-cart-item.is-pending .np-cart-item__info { opacity: .55; transition: opacity var(--np-motion-fast) var(--np-ease); }
.np-cart-item.is-pending::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--np-color-brand-primary), transparent); background-size: 50% 100%; background-repeat: no-repeat;
  animation: np-cart-progress 1s ease-in-out infinite;
}
@keyframes np-cart-progress { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Just added: one soft highlight, then back to normal. */
.np-cart-item.is-added::before {
  content: ""; position: absolute; inset-block: 0; inset-inline: calc(-1 * var(--np-cd-pad)); z-index: -1;
  background: var(--np-color-brand-primary-soft); opacity: 0; animation: np-cart-added 1.8s ease-out;
}
@keyframes np-cart-added { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }

.np-cart-item__error {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--np-space-2); margin: 0;
  padding: var(--np-space-2) var(--np-space-3); border-radius: var(--np-radius-sm);
  /* Stage 66: same tone as the np-notice error (restrained tint + tinted border, dark text, red icon only) */
  background: color-mix(in srgb, var(--np-color-error-soft) 55%, var(--np-color-bg-surface)); color: var(--np-color-text);
  border: 1px solid color-mix(in srgb, var(--np-color-error) 24%, var(--np-color-bg-surface));
  font-size: var(--np-font-body-small-size); line-height: var(--np-font-body-small-lh);
}
.np-cart-item__error > span:first-child { display: inline-flex; padding-top: 1px; color: var(--np-color-error); }

/* ---------- Footer (sticky) ---------- */
.np-cart-drawer__foot {
  flex: none; display: flex; flex-direction: column; gap: var(--np-space-3);
  padding: var(--np-space-4) var(--np-cd-pad) calc(var(--np-space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--np-color-bg-surface); border-top: 1px solid var(--np-color-border);
  transition: box-shadow var(--np-motion-normal) var(--np-ease);
}
.np-cart-drawer__foot[hidden] { display: none; }
.np-cart-drawer__foot.is-raised { box-shadow: 0 -8px 20px rgba(15, 23, 42, .08); }
.np-cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: var(--np-space-3); margin: 0; }
.np-cart-drawer__subtotal-label { font-size: var(--np-font-body-size); font-weight: 600; color: var(--np-color-neutral-900); }
.np-cart-drawer__subtotal-value {
  font-size: var(--np-font-price-large-size); font-weight: var(--np-font-price-large-weight); line-height: var(--np-font-price-large-lh);
  color: var(--np-color-price); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.np-cart-drawer__shipping {
  display: flex; align-items: center; gap: var(--np-space-2); margin: calc(-1 * var(--np-space-1)) 0 0;
  font-size: var(--np-font-body-small-size); line-height: var(--np-font-body-small-lh); color: var(--np-color-text-secondary);
}
.np-cart-drawer__shipping .np-icon { flex: none; color: var(--np-color-text-muted); }
.np-cart-drawer__actions { display: flex; flex-direction: column; gap: var(--np-space-2); margin-top: var(--np-space-1); }

/* ---------- Empty ---------- */
.np-cart-drawer__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--np-space-3);
  min-height: 100%; box-sizing: border-box; padding: var(--np-space-7) var(--np-cd-pad) calc(var(--np-space-7) + env(safe-area-inset-bottom, 0px)); text-align: center;
}
.np-cart-drawer__empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--np-space-1);
  border-radius: var(--np-radius-pill); background: var(--np-color-bg-subtle); color: var(--np-color-text-secondary);
}
.np-cart-drawer__empty-title { margin: 0; font-family: var(--np-font-family); font-size: var(--np-font-h4-size); font-weight: 700; line-height: 1.3; color: var(--np-color-neutral-900); }
.np-cart-drawer__empty-text { margin: 0; max-width: 30ch; font-size: var(--np-font-body-size); line-height: var(--np-font-body-lh); color: var(--np-color-text-secondary); }
.np-cart-drawer__empty-cta { margin-top: var(--np-space-2); min-width: 200px; }

/* ---------- Loading / error ---------- */
.np-cart-drawer__skeleton { padding: 0 var(--np-cd-pad); }
.np-cart-skel { display: grid; grid-template-columns: var(--np-cd-thumb) minmax(0, 1fr); gap: var(--np-space-4); padding-block: var(--np-space-4); border-bottom: 1px solid var(--np-color-border); }
.np-cart-skel__media, .np-cart-skel__line {
  display: block; border-radius: var(--np-radius-sm);
  background: linear-gradient(90deg, var(--np-color-neutral-100) 25%, var(--np-color-neutral-50) 50%, var(--np-color-neutral-100) 75%);
  background-size: 200% 100%; animation: np-cart-shimmer 1.4s ease-in-out infinite;
}
.np-cart-skel__media { width: var(--np-cd-thumb); aspect-ratio: 1 / 1; border-radius: var(--np-radius-md); }
.np-cart-skel__lines { display: flex; flex-direction: column; gap: var(--np-space-2); padding-top: var(--np-space-1); }
.np-cart-skel__line { height: 12px; width: 90%; }
.np-cart-skel__line--short { width: 60%; }
.np-cart-skel__line--price { width: 35%; margin-top: var(--np-space-4); margin-inline-start: auto; height: 16px; }
@keyframes np-cart-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.np-cart-drawer__error { display: flex; flex-direction: column; gap: var(--np-space-3); margin: var(--np-space-5) var(--np-cd-pad); padding: var(--np-space-4); border-radius: var(--np-radius-md); background: color-mix(in srgb, var(--np-color-error-soft) 55%, var(--np-color-bg-surface)); border: 1px solid color-mix(in srgb, var(--np-color-error) 24%, var(--np-color-bg-surface)); }
.np-cart-drawer__error-text { display: flex; align-items: flex-start; gap: var(--np-space-2); margin: 0; color: var(--np-color-text); font-size: var(--np-font-body-size); }
.np-cart-drawer__error-icon { display: inline-flex; padding-top: 2px; color: var(--np-color-error); }
.np-cart-drawer__error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--np-space-2); }

/* ---------- Phones: full-width sheet ---------- */
@media (max-width: 480px) {
  .np-cart-drawer { --np-cd-thumb: 84px; --np-cd-pad: var(--np-space-4); }
  .np-cart-drawer__panel { width: 100%; box-shadow: none; }
  .np-cart-drawer__head { min-height: 60px; }
  .np-cart-item { column-gap: var(--np-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .np-cart-item.is-pending::after, .np-cart-skel__media, .np-cart-skel__line { animation: none; }
}