/* Locked Up — cart.
   Extends the existing system rather than introducing a second one: mono for
   anything numeric, hairline borders, acid only where a decision is being made.

   BUY CTAs ARE PILLS. site.css's "Add-to-cart: prettified" block made every buy
   CTA a rounded pill with a soft lift and accent glow, and deliberately left
   navigation buttons (Browse Releases, Tell Me, format tiles) sharp. This file
   was written before that landed and made the cart the only place still
   shipping a hard square slab. The values below are lifted from that block, not
   re-derived, so the two cannot drift.

   The cart page needs its own top spacing: .wrap sets padding-inline only, so
   an h1 placed directly inside it sits flush under the header and clips. */

/* ---- the amount control ------------------------------------------------
   The signature. The price IS the input: same mono face, same size as .price,
   so there is no visual seam between "what it costs" and "what you will pay".
   A field styled as a field would read as a form; this reads as the price
   being editable, which is exactly what pay-more means. */
.amt { display: inline-flex; align-items: baseline; gap: 1px;
       border-bottom: 2px solid var(--border-strong); padding-bottom: 2px; }
.amt:focus-within { border-bottom-color: var(--accent); }
.amt-cur { font-family: var(--font-mono); font-size: var(--step-heading);
           line-height: var(--lh-heading); font-weight: 600; color: var(--text-muted); }
.amt-in { font-family: var(--font-mono); font-size: var(--step-heading);
          line-height: var(--lh-heading); font-weight: 600; color: var(--text-primary);
          background: none; border: 0; padding: 0; width: 4.5ch;
          border-radius: 0; -moz-appearance: textfield; }
.amt-in::-webkit-outer-spin-button,
.amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amt-in:focus { outline: none; }
.amt-in:invalid { color: var(--accent); }

/* "or more" is the whole pricing model in two words. It sits under the number
   at label size so it explains without competing. */
.amt-min { font-family: var(--font-mono); font-size: var(--step-micro);
           line-height: var(--lh-micro); letter-spacing: var(--track-label);
           color: var(--text-muted); display: block; margin-top: var(--s-2); }

.buy { display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 768px) {
  .buy { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
}

/* ---- cart page ---------------------------------------------------------- */
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-4);
             align-items: center; padding-block: var(--s-4);
             border-bottom: var(--hairline) solid var(--border-default); }
.cart-line img { width: 56px; height: 56px; object-fit: cover; display: block; }
.cart-line h3 { font-size: var(--step-body); line-height: var(--lh-body); margin: 0; }
.cart-line .cat { margin: 0; }
.cart-right { display: flex; align-items: center; gap: var(--s-4); }
.cart-x { font-family: var(--font-mono); font-size: var(--step-micro);
          letter-spacing: var(--track-label); color: var(--text-muted);
          background: none; border: 0; cursor: pointer; padding: var(--s-2); }
.cart-x:hover { color: var(--accent); }

.cart-total { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--s-4); padding-block: var(--s-5);
              border-bottom: var(--hairline) solid var(--border-strong); }
.cart-total .price { font-size: var(--step-display); line-height: 1; }

/* ---- the swap prompt ----------------------------------------------------
   Acid-bordered because it is the one place on the page offering the buyer
   money back. Deliberately NOT a modal: it informs, it does not interrupt,
   and it never changes the cart on its own. */
.swap { border: var(--hairline) solid var(--accent); padding: var(--s-5);
        display: flex; flex-direction: column; gap: var(--s-3); margin-block: var(--s-5); }
.swap p { margin: 0; }
.swap .save { color: var(--accent); font-weight: 600; }
@media (min-width: 768px) {
  .swap { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Buy CTAs on the cart, matching site.css exactly. CHECKOUT and the release
   swap are buy actions; BROWSE THE BACK CATALOGUE is navigation and stays
   sharp, per the same rule. */
#lu-cart [data-body] .btn-a,
.swap .btn-a { border-radius: 999px; padding-inline: var(--s-8);
               transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
#lu-cart [data-body] .btn-a:hover,
.swap .btn-a:hover { transform: translateY(-1px);
               box-shadow: 0 6px 22px -8px var(--accent), 0 2px 6px -4px rgba(0,0,0,0.4); }
#lu-cart [data-body] .btn-a:active,
.swap .btn-a:active { transform: translateY(0); box-shadow: none; }
#lu-cart .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
#lu-cart .btn[disabled]:hover { transform: none; box-shadow: none; }

/* .wrap carries padding-inline only, so a heading placed straight into it sits
   flush under the header and the cap-heights clip. */
#lu-cart { padding-block: var(--s-8) var(--s-16); }
#lu-cart > h1 { margin: 0 0 var(--s-6); }

.cart-empty { padding-block: var(--s-12); text-align: center; }
.cart-empty p { color: var(--text-muted); margin-bottom: var(--s-5); }

/* Live region for add/remove feedback. Visible, not just announced: a silent
   button is indistinguishable from a broken one. */
.cart-say { font-family: var(--font-mono); font-size: var(--step-micro);
            letter-spacing: var(--track-label); color: var(--accent);
            min-height: var(--lh-micro); display: block; margin-top: var(--s-2); }

/* Header count. Hidden at zero rather than showing (0) — an empty cart does
   not need announcing on every page. */
.cart-count[hidden] { display: none; }
.cart-count { font-family: var(--font-mono); font-size: var(--step-micro);
              letter-spacing: var(--track-label); color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .cart-line { transition: opacity 120ms ease; }
  .cart-line.is-going { opacity: 0.35; }
}