/* ==========================================================================
   CART — cart page, cart lines, totals, add to cart
   --------------------------------------------------------------------------
   Composition only, on Phase 2 tokens and Phase 2 components. No new tokens,
   no arbitrary values, no new breakpoints. A cart has to feel like the same
   shop as the catalog it came from.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT
   -------------------------------------------------------------------------- */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--space-8);
    align-items: start;
  }
}

.cart-main {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. LINES
   -------------------------------------------------------------------------- */

.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--color-border);
}

/*
 * On a phone a cart line is a small grid, not a table row squeezed sideways:
 * the picture and the name share the first row, and the controls and the line
 * total sit beneath them where there is width for both.
 */
.cart-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas:
    "media body"
    "controls total";
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  align-items: start;
}

@media (min-width: 768px) {
  .cart-line {
    grid-template-columns: 6rem minmax(0, 1fr) auto auto;
    grid-template-areas: "media body controls total";
    align-items: center;
    gap: var(--space-5);
  }
}

.cart-line__media  { grid-area: media; }
.cart-line__body   { grid-area: body; min-width: 0; }
.cart-line__controls { grid-area: controls; }
.cart-line__total  { grid-area: total; }

.cart-line__media .media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The placeholder caption is sized for a product card, not for a 96px
   thumbnail, where it wraps across the glyph. The texture and the glyph still
   read as an image slot without it. */
.cart-line__media .media-placeholder-label {
  display: none;
}

.cart-line__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}

.cart-line__unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.cart-line__unit-price {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.cart-line__price-was {
  color: var(--color-text-subtle);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

.cart-line__issue {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--amber-700);
}

.cart-line__issue .icon {
  flex: 0 0 auto;
  margin-top: 0.15em;
}

/* A line that cannot be sold is visibly set apart, and stays where it is so
   the shopper can deal with it rather than wondering what disappeared. */
.cart-line--unavailable .cart-line__name,
.cart-line--unavailable .cart-line__media {
  opacity: 0.6;
}

.cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cart-qty__input {
  width: 4.5rem;
  text-align: center;
}

.cart-line__total {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-text-strong);
  text-align: right;
  white-space: nowrap;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.cart-actions__clear {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   3. SUMMARY
   -------------------------------------------------------------------------- */

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

@media (min-width: 1024px) {
  .cart-summary {
    position: sticky;
    top: var(--space-6);
  }
}

.cart-totals {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cart-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.cart-totals__row dt {
  color: var(--color-text-muted);
}

.cart-totals__row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-totals__row--discount dd {
  color: var(--color-success);
}

.cart-totals__row--total {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.cart-totals__row--total dt {
  color: var(--color-text-strong);
}

.cart-summary__note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Checkout is Phase 7. This is a statement, not a disabled button. */
.cart-summary__checkout {
  width: 100%;
  justify-content: center;
}

.cart-pending {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.cart-pending__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.cart-pending__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   4. ADD TO CART
   -------------------------------------------------------------------------- */

.add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.add-to-cart__qty {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.add-to-cart__qty .input {
  width: 5.5rem;
  text-align: center;
}

.add-to-cart__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.add-to-cart__submit {
  flex: 1 1 12rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   5. HEADER MINI-CART
   -------------------------------------------------------------------------- */

/* The subtotal joins the existing header control rather than opening a second
   navigation surface. It is hidden while the cart is empty, and on narrow
   screens where the header shows icons only. */
.header-action__value--total {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.header-action__badge.is-empty {
  display: none;
}