/* ── Cart placement banner, flow 2 (docs/plans/shopping-to-cellar-flow-2.md Phase 2, F3) ─────────────────────────────
 * The failure states and the Organise step of the placement result banner. The banner's base look is in recipes.css
 * (`.cart-placement-summary`, `-error`); these only add what the new states need, on tokens. */

.cart-summary-failure-body {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* "Checking what was placed…" while the cart reloads: a quiet banner, no buttons. */
.cart-placement-summary-checking {
  opacity: 0.85;
}

/* "N wines went outside their own zone. [Organise cellar]" */
.cart-placement-organise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--text);
}

/* ── Selection, flow 2 (Phase 3, F1/F7) ───────────────────────────────────────────────────────────────────────────────
 * "Select all N" on a status group's header: a tri-state checkbox (checked, mixed, empty) with a 44px target. */
.cart-group-header {
  flex-wrap: wrap;
}

.cart-group-select {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cart-group-select-cb {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* "Placing your wines..." while a confirm is in flight: the same banner the outcome will replace, quiet and without buttons. */
.cart-placement-summary-placing {
  opacity: 0.85;
}

/* ── Maybe later (flow 2, Phase 8, F16): the Wishlist as a collapsed state of the cart ─────────────────────────────────── */
.cart-maybe-later {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cart-maybe-summary {
  cursor: pointer;
  padding: 0.6rem var(--space-md);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.cart-maybe-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-sm) var(--space-sm);
}

.cart-maybe-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}

.cart-maybe-item[aria-busy="true"] {
  opacity: 0.6;
}

.cart-maybe-info {
  flex: 1 1 14rem;
  min-width: 0;
}

.cart-maybe-name {
  font-size: 0.9rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.cart-maybe-detail,
.cart-maybe-why,
.cart-maybe-loading {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cart-maybe-actions {
  display: flex;
  gap: var(--space-sm);
}

.cart-maybe-move {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  border: 1px solid var(--accent);
  font-weight: 600;
}

.cart-maybe-dismiss,
.cart-maybe-retry {
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
}

.cart-maybe-error,
.cart-maybe-loading {
  margin: 0;
  padding: 0 var(--space-md) var(--space-sm);
}

/* The Buy now / Maybe later choice of the one add form. */
.cart-add-mode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: 0;
}

.cart-add-mode-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cart-add-mode-opt {
  gap: 0.4rem;
  justify-content: flex-start;
  font-size: 0.9rem;
}

/* ── Compact rows on a desktop with a precise pointer (flow 2, Phase 7, F5) ───────────────────────────────────────────
 * The same line, the same controls in the same order: the actions sit BESIDE the text instead of under it, so a line is about 48px instead
 * of about 108px and the 12 lines of a real order fit on a screen. The whole name still shows (a long one wraps and that row grows: a clamp
 * would hide the vintage). The 44px touch rule of the mobile cart stays for a coarse pointer and below 900px, so a phone or a touch tablet
 * keeps the cards; a precise pointer gets 36px controls (WCAG 2.2 target size is 24px). Deleting this block restores the cards. */
@media (min-width: 900px) and (pointer: fine) {
  .cart-control {
    min-height: 36px;
    min-width: 36px;
  }

  button.cart-control {
    padding: 0.25rem 0.8rem;
  }

  .cart-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "check info actions";
    align-items: center;
    column-gap: var(--space-md);
    row-gap: 0;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
  }

  .cart-check-hit {
    min-width: 36px;
    min-height: 36px;
  }

  .cart-item-actions {
    flex-wrap: nowrap;
    align-self: center;
  }

  .cart-line-primary {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
  }
}

/* ── Reading shop pages (purchase-page ingestion, Cluster D): the offer, the per-line action, the run, the permission dialog ──────────
 * The line's button is a quiet secondary (the line's own primary stays the loudest thing on it); the status under it is a polite live region
 * that is empty (and so takes no room) until something happens. On tokens only; hiding is the `hidden` attribute, never an inline style. */
.cart-shop-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cart-shop-offer-text {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.cart-shop-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.cart-shop-offer-open,
.cart-shop-batch {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  border: 1px solid var(--accent);
  font-weight: 600;
}

.cart-shop-offer-dismiss,
.cart-shop-fill,
.cart-shop-stop,
.cart-shop-run-close {
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
}

.cart-shop-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
}

.cart-shop-fill[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.cart-shop-status,
.cart-shop-provenance {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* "Saved from <shop>": the same link colour as the line's own shop link. */
.cart-shop-provenance a {
  color: var(--accent);
  text-decoration: none;
}

.cart-shop-provenance a:hover {
  text-decoration: underline;
}

.cart-shop-status:empty {
  display: none;
}

.cart-shop-status-note {
  color: var(--text);
}

.cart-shop-run {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cart-shop-run-progress {
  margin: 0 0 var(--space-sm);
  font-size: 0.9rem;
  font-weight: 600;
}

.cart-shop-results {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  font-size: 0.85rem;
}

.cart-shop-result {
  padding: 0.25rem 0;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.cart-shop-result-name {
  font-weight: 600;
}

/* The permission dialog: one fieldset per shop, a 44px row per line. */
.cart-shop-group {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.cart-shop-group legend {
  padding: 0 4px;
  font-weight: 600;
}

.cart-shop-count,
.cart-shop-line-note,
.cart-shop-note,
.cart-shop-selected {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.cart-shop-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  overflow-wrap: anywhere;
}

.cart-shop-line input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
}

.cart-shop-line-capped {
  opacity: 0.6;
}

.cart-shop-refusal,
.cart-shop-error {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text);
}