.cart-table { width: 100%; border-collapse: collapse; }
  .cart-table thead tr { border-bottom: 1px solid color-mix(in oklab, var(--color-text) 15%, transparent); }
  .cart-table th { text-align: left; font-weight: 600; }
  /* Horizontal padding gives the columns breathing room so Τιμή/Σύνολο and the
     update control no longer collide; first/last cells stay flush to the edges. */
  .cart-table th, .cart-table td { padding: 0.75rem 0.5rem; vertical-align: top; }
  .cart-table th:first-child, .cart-table td:first-child { padding-inline-start: 0; }
  .cart-table th:last-child, .cart-table td:last-child { padding-inline-end: 0; }
  .cart-table tbody tr { border-bottom: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent); }
  .cart-table .num { text-align: right; white-space: nowrap; }
  .cart-table .qty { text-align: center; }
  .cart-line-total { font-weight: 600; }
  .cart-item-name { font-weight: 600; }
  .cart-item-meta { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem; }
  .cart-item-note { font-size: 0.875rem; font-style: italic; color: var(--color-text-muted); }
  .cart-qty-form { display: flex; gap: 0.4rem; align-items: center; justify-content: center; }
  /* Equal-width, centred action buttons (Continue shopping / Empty cart). */
  .cart-actions { margin-top: 1.5rem; display: flex; gap: 1rem; }
  .cart-actions > a, .cart-actions > form { flex: 1; }
  .cart-actions > form > button { width: 100%; }
  .cart-qty-input { width: 3.25rem; padding: 0.25rem 0.4rem; border-radius: var(--radius);
    border: 1px solid color-mix(in oklab, var(--color-text) 20%, transparent); }
  /* Compact icon buttons (update ↻ / remove ✕) take far less width than a text
     button, freeing space for the price columns on narrow screens. */
  .cart-icon-btn { display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid color-mix(in oklab, var(--color-text) 20%, transparent);
    border-radius: var(--radius); padding: 0.3rem; cursor: pointer; color: var(--color-text); line-height: 0; }
  .cart-icon-btn:hover { background: color-mix(in oklab, var(--color-text) 8%, transparent); }
  .cart-remove-btn { border: none; color: var(--color-danger); font-size: 1.05rem; line-height: 1; padding: 0.3rem 0.35rem; }

  @media (max-width: 700px) {
    .cart-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .cart-table { font-size: 0.9rem; }
    .cart-table th, .cart-table td { padding: 0.55rem 0.3rem; }
    .cart-qty-input { width: 2.75rem; }
    .cart-item-meta, .cart-item-note { font-size: 0.8rem; }
  }

  /* --- Add / remove animations --- */
  /* Just-added row: a warm accent glow that fades, + the name eases in. */
  @keyframes cart-row-glow {
    from { background-color: color-mix(in oklab, var(--color-accent) 22%, transparent); }
    to   { background-color: transparent; }
  }
  @keyframes cart-name-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cart-row--added > td { animation: cart-row-glow 1.7s ease-out; }
  .cart-row--added .cart-item-name { animation: cart-name-in 0.5s ease-out both; }
  /* Removing row: fade + slide away before the page reloads. */
  .cart-row { transition: opacity 0.28s ease, transform 0.28s ease; }
  .cart-row--removing { opacity: 0; transform: translateX(1.5rem); }
  /* Header basket badge gives a quick pop when something was just added. */
  @keyframes cart-badge-pop {
    0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); }
  }
  .nav-basket-badge--pop { animation: cart-badge-pop 0.5s ease-out; }
  @media (prefers-reduced-motion: reduce) {
    .cart-row--added > td, .cart-row--added .cart-item-name,
    .cart-row, .nav-basket-badge--pop { animation: none; transition: none; }
  }