/* =========================================================================
   Cart, checkout, order receipt and saved parts.
   Every value here is declared in DESIGN.md. Nothing is invented at use site.

   Motion note: this is the highest-frequency surface on the store, so it gets
   the least motion. Quantity steppers get none at all, per the frequency rule
   in DESIGN.md section 6. Nothing here runs longer than --d-ui (240ms).
   ========================================================================= */

@layer components {

/* =========================================================================
   1. CART
   ========================================================================= */

.cart-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
@media (min-width: 1024px) { .cart-head { padding-top: var(--s-7); padding-bottom: var(--s-6); } }

.cart-title { font-size: var(--fs-h1); }
.cart-count-line { font-size: var(--fs-sm); }
.cart-count-line span { margin-left: var(--s-3); }

.cart-wrap { padding-bottom: var(--s-9); }

/* ------------------------------------------------------- error and empty */

.cart-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--r);
  background: var(--bg-elev);
  max-width: 62ch;
}
.cart-alert svg { color: var(--danger); flex: none; margin-top: 3px; }
.cart-alert-title { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.cart-alert p { color: var(--text-dim); font-size: var(--fs-sm); }

.cart-alert-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }

.cart-empty { max-width: 58ch; padding: var(--s-8) var(--s-6); }
.cart-empty h2 { font-size: var(--fs-h2); }
.cart-empty-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.cart-empty-saved { font-size: var(--fs-sm); color: var(--text-dim); }

/* ---------------------------------------------------------------- layout */

.cart-layout {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-9);
  align-items: start;
}
@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 372px; gap: var(--s-8); }
}

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

/* ----------------------------------------------------------------- lines */

.cart-lines { display: flex; flex-direction: column; list-style: none; padding: 0; }

/* One hairline per row, on the bottom edge only. A boxed row for every line is
   banned in DESIGN.md section 10. */
.cart-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "media main"
    "total total";
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.cart-line:first-child { padding-top: 0; }

@media (min-width: 640px) {
  .cart-line {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-areas: "media main total";
    gap: var(--s-5);
    align-items: start;
  }
}

.cart-line-media { grid-area: media; width: 100%; }

.cart-line-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.cart-line-name {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--d-micro) var(--ease);
}
.cart-line-name:hover { color: var(--accent-text); }

.cart-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--fs-micro);
  color: var(--text-dim);
}

.cart-line-stock { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-micro); }

.cart-line-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

/* Quantity. No transition on any of this: it is the most repeated interaction
   on the site and motion here reads as lag. */
.qty-form { display: flex; align-items: center; gap: var(--s-2); }
.qty-apply { min-height: 34px; padding: 6px 14px; }
.qty-apply:hover { transform: none; }

.cart-line-actions { display: flex; align-items: center; gap: var(--s-4); }

.cart-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  padding: 4px 0;
  transition: color var(--d-micro) var(--ease);
}
.cart-line-btn:hover { color: var(--text); }
.cart-line-btn:active { transform: translateY(1px); }
.cart-line-btn-danger:hover { color: var(--danger); }

.cart-line-total {
  grid-area: total;
  font-size: var(--fs-body-l);
  justify-self: start;
}
@media (min-width: 640px) { .cart-line-total { justify-self: end; text-align: end; } }

.cart-continue { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* --------------------------------------------------------------- summary */

.cart-aside { min-width: 0; }
@media (min-width: 1024px) {
  .cart-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.cart-sum {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--inset-hi);
}
.cart-sum-title { font-size: var(--fs-h3); }
.cart-sum-note { font-size: var(--fs-micro); line-height: 1.5; }

/* Free shipping meter. The sentence carries the message; the bar is a glance. */
.ship-meter { display: flex; flex-direction: column; gap: var(--s-2); }

.ship-meter-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.ship-meter-note svg { flex: none; margin-top: 3px; color: var(--text-faint); }
.ship-meter-note strong { color: var(--text); font-weight: 500; }
.ship-meter-note.is-met { color: var(--text); }
.ship-meter-note.is-met svg { color: var(--success); }

.ship-meter-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-2);
  overflow: hidden;
}
.ship-meter-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* Coupon */
.coupon-row { display: flex; gap: var(--s-2); }
.coupon-row .input { min-height: 44px; font-family: var(--font-mono); text-transform: uppercase; }
.coupon-row .btn { flex: none; min-height: 44px; }

.coupon-active {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  border-radius: var(--r);
}
.coupon-code { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.04em; }
.coupon-detail { font-size: var(--fs-micro); }

/* Money rows, shared by the cart, the checkout summary and the receipt. */
.sum-rows { display: flex; flex-direction: column; gap: var(--s-3); }

.sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
}
.sum-row dt { color: var(--text-dim); }
.sum-row dt span { font-size: var(--fs-micro); margin-left: 6px; }
.sum-row dd { color: var(--text); }
.sum-row-credit dd { color: var(--success); }

.sum-row-total {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-body-l);
}
.sum-row-total dt { color: var(--text); font-weight: 500; }

.cart-trust { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; padding: 0; }
.cart-trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.cart-trust svg { flex: none; margin-top: 2px; }

/* Busy state, for when a line update is in flight. */
.cart-lines[data-busy="true"],
.cart-sum[data-busy="true"] {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--d-ui) var(--ease);
}

/* =========================================================================
   2. CHECKOUT
   ========================================================================= */

.co-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
@media (min-width: 1024px) { .co-head { padding-top: var(--s-7); } }

.co-title { font-size: var(--fs-h1); }
.co-lead { max-width: 52ch; }

.co-layout {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-9);
  align-items: start;
}
/* Two columns from 900px up, strict single column below it. */
@media (min-width: 900px) {
  .co-layout { grid-template-columns: minmax(0, 1fr) 348px; gap: var(--s-8); }
}
@media (min-width: 1280px) {
  .co-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

.co-form-col { min-width: 0; }

.co-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--r);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
}
.co-alert svg { color: var(--danger); flex: none; margin-top: 3px; }

.co-form { display: flex; flex-direction: column; gap: var(--s-7); }

.co-group { display: flex; flex-direction: column; gap: var(--s-5); }
.co-group + .co-group { border-top: 1px solid var(--line); padding-top: var(--s-7); }

.co-group-head { display: flex; flex-direction: column; gap: var(--s-1); }
.co-group-title { font-size: var(--fs-h3); }
.co-group-note { font-size: var(--fs-sm); color: var(--text-dim); max-width: 56ch; }

.co-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .co-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .co-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .co-row-3 { grid-template-columns: 1.4fr 1.2fr 0.8fr; } }

.co-opt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  margin-left: 6px;
}

/* --------------------------------------------------------------- payment
   One live method, so this is a statement of process rather than a choice.
   The numbered track is the same device the About page uses for ordering. */

.co-method {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.co-method[data-invalid] { border-color: var(--danger); }

.co-method-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-body-l);
  font-weight: 600;
}
.co-method-name svg { color: var(--accent-text); flex: none; }

.co-method-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  counter-reset: none;
}
.co-method-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.55;
  position: relative;
}
/* A hairline joins the steps so the sequence reads as one process. */
.co-method-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 24px;
  bottom: calc(var(--s-4) * -1);
  width: 1px;
  background: var(--line);
}

.co-method-n {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.co-pay-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-faint);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}
.co-pay-card svg { flex: none; margin-top: 2px; }

/* app.css scopes .hint and .err to a .field ancestor. This one sits outside one,
   so it is given the same treatment here rather than being wrapped in a
   field that means nothing. */
.co-method .err {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.co-method .err svg { flex: none; }

.co-terms { padding-top: var(--s-2); }
.co-terms .check a { color: var(--text); }

.co-submit { display: flex; flex-direction: column; gap: var(--s-3); }
.co-submit-note {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-faint);
  max-width: 60ch;
}

/* ------------------------------------------------------ checkout summary */

.co-summary-col { min-width: 0; }
@media (min-width: 900px) {
  .co-summary-col { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.co-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--inset-hi);
}
.co-summary[data-busy="true"] { opacity: 0.45; pointer-events: none; transition: opacity var(--d-ui) var(--ease); }

.co-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.co-summary-title { font-size: var(--fs-h3); }
.co-summary-edit { font-size: var(--fs-sm); }

.co-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  max-height: 42dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }

.co-item-media { width: 56px; flex: none; overflow: visible; }

/* The quantity rides the thumbnail rather than taking its own column. */
.co-item-qty {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 10px;
  line-height: 1;
  z-index: 3;
}

.co-item-name {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.co-item-total { font-size: var(--fs-sm); }

/* =========================================================================
   3. ORDER RECEIPT
   ========================================================================= */

.or-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}
/* The measure lives on the children. Capping .or-head itself would fight the
   auto margins on .wrap and centre the whole block. */

.or-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.or-title { font-size: var(--fs-h1); max-width: 20ch; }
.or-title .mono { font-family: var(--font-mono); font-stretch: normal; letter-spacing: -0.01em; }
.or-lead { max-width: 58ch; }
.or-lead strong { color: var(--text); font-weight: 500; }

.or-keep {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-elev);
  max-width: 62ch;
}
.or-keep svg { color: var(--accent-text); flex: none; margin-top: 3px; }
.or-keep p { font-size: var(--fs-sm); color: var(--text-dim); }

/* The transfer-safety note. It sits under the payment steps and uses --warn
   semantically, because it is a caution and not decoration. */
.or-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.55;
}
.or-warn svg { color: var(--warn); flex: none; margin-top: 2px; }

.or-layout {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-9);
  align-items: start;
}
@media (min-width: 1024px) {
  .or-layout { grid-template-columns: minmax(0, 1fr) 372px; gap: var(--s-8); }
}

.or-main { display: flex; flex-direction: column; gap: var(--s-7); min-width: 0; }

.or-block { display: flex; flex-direction: column; gap: var(--s-4); }
.or-block-title {
  font-size: var(--fs-h3);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.or-block-title span { font-family: var(--font-mono); font-size: var(--fs-micro); font-stretch: normal; }

/* ------------------------------------------------------- status timeline */

.or-track { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }

.or-step {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
  position: relative;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}
/* One continuous rail behind the markers, drawn between them rather than as a
   border on every row. */
.or-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  bottom: -50%;
  width: 1px;
  background: var(--line);
}
.or-step.is-done::before { background: var(--success); }

.or-step-dot {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--bg);
}
.or-step.is-done .or-step-dot { background: var(--success); border-color: var(--success); }
.or-step.is-now .or-step-dot { border-color: var(--accent); background: var(--accent); }

.or-step.is-done { color: var(--text-dim); }
.or-step.is-now { color: var(--text); }
.or-step-label { font-weight: 500; }

.or-step-now {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.or-track-note { font-size: var(--fs-micro); }

/* ---------------------------------------------------------- next actions */

.or-next {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  max-width: 68ch;
}
.or-next p { font-size: var(--fs-sm); color: var(--text-dim); }
.or-next-method {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-body);
  font-weight: 500;
}
.or-next-method svg { color: var(--accent-text); flex: none; }
.or-next .or-next-method { color: var(--text); }

/* ----------------------------------------------------------- order items */

.or-items { display: flex; flex-direction: column; list-style: none; padding: 0; }

.or-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.or-item-media { width: 64px; flex: none; }
.or-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.or-item-name { font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.or-item-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-micro); color: var(--text-dim); }
.or-item-total { font-size: var(--fs-sm); }

/* --------------------------------------------------------------- receipt */

.or-aside { min-width: 0; }
@media (min-width: 1024px) {
  .or-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.or-receipt {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--inset-hi);
}

.or-facts { display: flex; flex-direction: column; gap: var(--s-3); }
.or-fact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); }
.or-fact dt { color: var(--text-faint); font-size: var(--fs-micro); }
.or-fact dd { text-align: end; }

.or-address, .or-notes { display: flex; flex-direction: column; gap: var(--s-2); }
.or-address-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  font-stretch: normal;
}
.or-address-body { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-dim); }
.or-address-body .mono { color: var(--text); }
.or-address-phone { font-size: var(--fs-micro); }
.or-notes p { font-size: var(--fs-sm); }

.or-actions { display: flex; flex-direction: column; gap: var(--s-2); }

/* =========================================================================
   4. SAVED PARTS
   ========================================================================= */

.wl-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
@media (min-width: 1024px) { .wl-head { padding-top: var(--s-7); } }

.wl-title { font-size: var(--fs-h1); }
.wl-lead { max-width: 56ch; }
.wl-count { font-size: var(--fs-sm); }

.wl-body { padding-bottom: var(--s-9); }

.wl-empty { max-width: 58ch; padding: var(--s-8) var(--s-6); }
.wl-empty h2 { font-size: var(--fs-h2); }

.wl-grid { list-style: none; padding: 0; }
.wl-item { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

.wl-tools { display: flex; flex-direction: column; gap: var(--s-2); }
.wl-remove { align-self: flex-start; }

.wl-foot { font-size: var(--fs-micro); margin-top: var(--s-6); max-width: 58ch; }

}