/* Cart bag and panel.
 *
 * The bag lives inside the nav pill, between the pages and the locale toggle.
 * It does not exist while the cart is empty — an always-present empty bag is
 * chrome; a bag that arrives the moment you add something is an event.
 */

.cart-bag {
  position: relative;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  color: var(--c-ink);
  transition: opacity var(--d-fast) var(--ease-out);
}

.cart-bag[data-visible='true'] {
  display: flex;
}

/* The arrival: scales up past its final size and settles. This is the only
   overshoot in the system, reserved for the one moment that deserves it. */
.cart-bag[data-enter='true'] {
  animation: cart-bag-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cart-bag-in {
  0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(3deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

.cart-bag:hover { opacity: 0.5; }

.cart-bag svg {
  width: 21px;
  height: 21px;
}

/* --- Badge ---------------------------------------------------------------- */

.cart-bag__badge {
  position: absolute;
  top: -1px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Pops on every change, so adding a second print is also felt. */
.cart-bag__badge[data-pop='true'] {
  animation: cart-badge-pop 380ms var(--ease-out);
}

@keyframes cart-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.nav-pill[data-tone='dark'] .cart-bag { color: var(--c-on-dark); }

.nav-pill[data-tone='dark'] .cart-bag__badge {
  background: rgb(var(--c-paper-rgb));
  color: var(--c-ink);
}

/* --- Panel ---------------------------------------------------------------- */

.cart-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + 4.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  z-index: var(--z-modal);

  width: min(420px, calc(100vw - 2rem));
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: rgb(var(--c-paper-rgb));
  box-shadow: 0 18px 60px rgb(22 44 37 / 0.22), 0 0 0 1px rgb(22 44 37 / 0.06);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-glass),
    visibility var(--d-base);
}

.cart-panel[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.cart-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.cart-panel__title {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
}

.cart-panel__count {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

.cart-panel__empty {
  margin: 0;
  padding-block: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* --- Lines ---------------------------------------------------------------- */

.cart-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-border);
}

.cart-line__thumb {
  width: 48px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: rgb(22 44 37 / 0.04);
}

.cart-line__title {
  font-size: var(--t-sm);
  font-weight: 500;
}

.cart-line__meta {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.cart-line__price {
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cart-line__right {
  display: grid;
  justify-items: end;
  gap: var(--s-2);
}

/* --- Foot ----------------------------------------------------------------- */

.cart-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cart-panel__checkout {
  /* One of the four main CTAs — 40px, shared via --cta-h. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--cta-h);
  margin-top: var(--s-4);
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--t-base);
  font-weight: 500;
  text-align: center;
  transition: background var(--d-fast) var(--ease-out);
}

.cart-panel__checkout:hover { background: var(--c-ink-hover); }

.cart-panel__continue {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  text-align: center;
}

.cart-panel__continue:hover { color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  .cart-bag[data-enter='true'],
  .cart-bag__badge[data-pop='true'] {
    animation: none;
  }
}