/*
 * cart.css — native cart page (UI-rework Phase 4, Task 1). Consumes tokens.css
 * only; zero literals outside the sanctioned @media breakpoints (each commented
 * with its --bp-* token name). Enqueued only on the `cart` page slug (functions.php).
 *
 * The page shell (page-cart.php) carries a single state attribute, data-cart-state,
 * that this file switches on: only one [data-cart-when] block shows at a time
 * (loading | empty | error | ready). shopify.js paints the line items + totals.
 *
 * The card / surface idiom matches the shop + cross-sell cards (surface panel,
 * hairline edge, --radius-none corners) so the cart reads as the same system.
 */

.cart-section {
  padding-block: var(--space-80);
}

.cart__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* ============================================================
 * Head — eyebrow + title (the sitewide section-head pattern).
 * ============================================================ */
.cart__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cart__title {
  letter-spacing: var(--tracking-tight);
}

/* ============================================================
 * State machine — one block visible per data-cart-state. Blocks are
 * hidden by default; the matching state reveals its own block.
 * ============================================================ */
/* Blocks are hidden by default (0,1,0). Each reveal rule below is (0,2,0) — two
   attribute selectors — so it outranks any single-class display on the block
   itself; the blocks therefore carry NO unconditional `display`, only their
   inner layout props, which stay inert until a reveal rule turns them on. */
[data-cart-when] {
  display: none;
}

[data-cart-state="loading"] [data-cart-when="loading"] {
  display: block;
}

[data-cart-state="error"] [data-cart-when="error"],
[data-cart-state="empty"] [data-cart-when="empty"] {
  display: flex;
}

[data-cart-state="ready"] [data-cart-when="ready"] {
  display: grid;
}

/* Loading + notices share a calm, centered treatment. */
.cart__status {
  color: var(--color-text-muted);
}

.cart__notice {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-40);
}

.cart__empty-title {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cart__empty-copy,
.cart__notice-copy {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ============================================================
 * Populated layout — line list + summary. Single column on mobile;
 * list beside a sticky summary rail at --bp-lg.
 * ============================================================ */
.cart__layout {
  gap: var(--space-40);
}

.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* — One line row — thumb spans the row; info, qty, total flow beside it.
   Mobile: thumb | (info over qty+total). Desktop: thumb | info | qty | total. — */
.cart-line {
  display: grid;
  grid-template-columns: var(--space-80) minmax(0, 1fr) auto;
  grid-template-areas:
    "media info  info"
    "media qty   total";
  gap: var(--space-16) var(--space-20);
  align-items: center;
  padding-block-end: var(--space-24);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.cart-line__media {
  grid-area: media;
  align-self: start;
}

.cart-line__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-none);
}

.cart-line__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-line__title {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cart-line__variant {
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}

.cart-line__unit {
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}

/* Remove — quiet text button; brand on hover/focus. */
.cart-line__remove {
  align-self: flex-start;
  margin-block-start: var(--space-4);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--space-4);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.cart-line__remove:hover,
.cart-line__remove:focus-visible {
  color: var(--color-brand);
}

/* — Quantity stepper — bordered pill group: [−] value [+]. — */
.cart-qty {
  grid-area: qty;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.cart-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-32);
  height: var(--space-32);
  background: none;
  border: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--type-body);
  line-height: var(--leading-none);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.cart-qty__btn:hover,
.cart-qty__btn:focus-visible {
  color: var(--color-brand);
}

.cart-qty__value {
  min-width: var(--space-24);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cart-line__total {
  grid-area: total;
  justify-self: end;
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* Busy lock while a line mutation is in flight (shopify.js sets data-cart-busy). */
[data-cart-busy="true"] .cart-lines {
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================
 * Summary — surface panel; subtotal, note, checkout CTA.
 * ============================================================ */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
}

.cart-summary__title {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

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

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

.cart-summary__value {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cart-summary__note {
  font-size: var(--type-caption);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.cart-summary__checkout {
  margin-block-start: var(--space-8);
  width: 100%;
}

.cart-summary__continue {
  align-self: center;
  font-size: var(--type-caption);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
  transition: color var(--duration-fast);
}

.cart-summary__continue:hover,
.cart-summary__continue:focus-visible {
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .cart-line__remove,
  .cart-qty__btn,
  .cart-summary__continue {
    transition: none;
  }
}

/* Desktop: line becomes a single 4-column row; layout splits into list + rail. */
@media (min-width: 768px) /* --bp-md */ {
  .cart-line {
    grid-template-columns: var(--space-96) minmax(0, 1fr) auto auto;
    grid-template-areas: "media info qty total";
    gap: var(--space-24);
  }
}

@media (min-width: 1024px) /* --bp-lg */ {
  .cart__layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }

  /* Summary tracks the viewport as the list scrolls. */
  .cart-summary {
    position: sticky;
    top: var(--space-96);
  }
}