/* ============================================================================
   BK Cart — calm. Line items + sticky summary. Product-page voice throughout.
   ========================================================================== */

.bk-cart {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--bk-section-pad);
}
.bk-cart__header { margin-bottom: var(--bk-space-12); }
.bk-cart__title { margin: var(--bk-space-2) 0 0; }

.bk-cart__layout { display: grid; gap: var(--bk-space-16); }

/* ---- Line items ----------------------------------------------------------- */
.bk-cart__items { list-style: none; margin: 0; padding: 0; }
.bk-cart__item {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: var(--bk-space-4) var(--bk-space-6);
  padding: var(--bk-space-6) 0;
  border-top: 1px solid var(--bk-hairline);
  align-items: start;
}
.bk-cart__item:last-child { border-bottom: 1px solid var(--bk-hairline); }

.bk-cart__media { display: block; }
.bk-cart__media img { display: block; width: 100%; height: auto; border-radius: var(--bk-radius-soft); }
.bk-cart__media-ph { display: block; aspect-ratio: 3/4; background: var(--bk-bg-stone); border-radius: var(--bk-radius-soft); }

.bk-cart__detail { display: flex; flex-direction: column; gap: 0.35rem; }
.bk-cart__eyebrow { color: var(--bk-ink-soft); }
.bk-cart__name {
  font-family: var(--bk-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bk-ink);
  text-decoration: none;
}
.bk-cart__name:hover { color: var(--bk-brass-deep); }
.bk-cart__variant { color: var(--bk-ink-soft); margin: 0; }
.bk-cart__pill {
  align-self: flex-start;
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-on-olive);
  background: var(--bk-olive-muted);
  padding: 0.25rem 0.6rem;
  border-radius: var(--bk-radius-pill);
  margin-top: 0.25rem;
}
.bk-cart__remove {
  align-self: flex-start;
  margin-top: var(--bk-space-2);
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-caption);
  color: var(--bk-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--bk-hairline);
}
.bk-cart__remove:hover { color: var(--bk-oxblood); border-color: var(--bk-oxblood); }

.bk-cart__qty { display: flex; flex-direction: column; gap: 0.4rem; }
.bk-cart__qty .bk-eyebrow { color: var(--bk-ink-soft); }
.bk-cart__qty-input {
  width: 3.5rem;
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-body);
  color: var(--bk-ink);
  text-align: center;
  padding: 0.5rem;
  background: var(--bk-bg-cream);
  border: 1px solid var(--bk-hairline);
  border-radius: var(--bk-radius-soft);
}
.bk-cart__price { white-space: nowrap; }

/* On the 3-col grid, qty + price share the third area — restructure for clarity */
.bk-cart__item { grid-template-areas: "media detail price"; }
.bk-cart__media { grid-area: media; }
.bk-cart__detail { grid-area: detail; }
.bk-cart__price { grid-area: price; justify-self: end; }
.bk-cart__qty { grid-column: 2; justify-self: start; margin-top: var(--bk-space-2); }

/* ---- Summary -------------------------------------------------------------- */
.bk-cart__summary { display: flex; flex-direction: column; gap: var(--bk-space-5); }
.bk-cart__note { display: flex; flex-direction: column; gap: 0.5rem; }
.bk-cart__note .bk-eyebrow { color: var(--bk-ink-soft); }
.bk-cart__note textarea {
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-body);
  color: var(--bk-ink);
  padding: 0.75rem;
  background: var(--bk-bg-cream);
  border: 1px solid var(--bk-hairline);
  border-radius: var(--bk-radius-soft);
  resize: vertical;
}
.bk-cart__subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: var(--bk-space-4);
  border-top: 1px solid var(--bk-hairline);
}
.bk-cart__subtotal .bk-eyebrow { color: var(--bk-ink-soft); }
.bk-cart__subtotal-val { font-size: 1.375rem; }
.bk-cart__ship-note { font-family: var(--bk-font-body); font-size: var(--bk-fs-caption); color: var(--bk-ink-soft); margin: 0; }

.bk-cart__actions { display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-cart__cta {
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-body);
  font-weight: 500;
  letter-spacing: var(--bk-tracking-button);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.bk-cart__cta--primary {
  padding: 1.05rem 2rem;
  background: var(--bk-olive);
  color: var(--bk-on-olive);
  border: 1px solid var(--bk-brass);
  border-radius: var(--bk-radius-soft);
  transition: background-color var(--bk-dur-fast) var(--bk-ease);
}
.bk-cart__cta--primary:hover { background: var(--bk-olive-deep); }
.bk-cart__cta--ghost {
  padding: 0.75rem 2rem;
  background: none;
  color: var(--bk-ink);
  border: 1px solid var(--bk-hairline);
  border-radius: var(--bk-radius-soft);
  transition: border-color var(--bk-dur-fast) var(--bk-ease);
}
.bk-cart__cta--ghost:hover { border-color: var(--bk-olive); }
.bk-cart__cta:focus-visible { outline: none; box-shadow: var(--bk-focus-ring); border-radius: var(--bk-radius-soft); }

.bk-cart__concierge {
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-caption);
  color: var(--bk-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--bk-brass), var(--bk-brass));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--bk-dur-fast) var(--bk-ease);
  align-self: flex-start;
}
.bk-cart__concierge:hover { background-size: 100% 1px; }

.bk-cart__trust {
  list-style: none; margin: 0; padding: var(--bk-space-4) 0 0;
  display: flex; flex-direction: column; gap: var(--bk-space-2);
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-eyebrow);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bk-ink-soft);
}

/* ---- Empty ---------------------------------------------------------------- */
.bk-cart__empty {
  padding: var(--bk-space-16) 0 var(--bk-space-24);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--bk-space-5);
}
.bk-cart__empty .bk-cart__cta--primary { padding: 1.05rem 2.5rem; }

/* ============================================================================
   DESKTOP — items + sticky summary
   ========================================================================== */
@media screen and (min-width: 990px) {
  .bk-cart__layout { grid-template-columns: 1.6fr 1fr; gap: var(--bk-space-24); align-items: start; }
  .bk-cart__summary { position: sticky; top: 2rem; }
}

/* ============================================================================
   MOBILE — item reflow
   ========================================================================== */
@media screen and (max-width: 749px) {
  .bk-cart__item {
    grid-template-columns: 5.5rem 1fr;
    grid-template-areas:
      "media detail"
      "media price";
    row-gap: var(--bk-space-2);
  }
  .bk-cart__price { grid-area: price; justify-self: start; grid-column: 2; }
  .bk-cart__qty { grid-column: 2; }
}