/* The Kroger cart review dialog (#kroger-cart-dialog) on the shared .app-dialog frame: one
   row per proposed grocery-to-product match, reached from the Groceries pane's own header
   button. */

/* The propose line (in the Groceries status line) and the apply pending line
   (#kroger-cart-progress-apply): the shared .chip-spinner beside its explanatory text, on one
   row. [hidden] must still win over this display:flex. */
.kroger-cart-progress {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.kroger-cart-progress[hidden] {
  display: none;
}

/* One proposed item: its checkbox and text, the matched product, an optional reason, and a
   Change disclosure when alternatives exist -- lines inside one document, so the hairline
   rhythm is a bottom border with none after the last. */
.kroger-cart-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--space-r3) 0;
  border-bottom: 1px solid var(--line);
}

.kroger-cart-row:last-child {
  border-bottom: none;
}

.kroger-cart-choice {
  display: flex;
  align-items: center;
  gap: var(--space-r2);
}

.kroger-cart-candidate {
  display: flex;
  align-items: center;
  gap: var(--space-r2);
}

.kroger-cart-candidate-image {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: var(--radius-control);
}

.kroger-cart-candidate-text {
  display: flex;
  flex-direction: column;
}

.kroger-cart-candidate-detail {
  color: var(--muted);
  font-size: var(--text-detail-meta);
}

.kroger-cart-reason {
  color: var(--muted);
  font-size: var(--text-detail-meta);
  margin: 0;
}

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

.kroger-cart-notice {
  color: var(--muted);
  margin: 0 0 var(--card-gap);
}

/* The disconnected state is the one state that asks for something, the same step up
   .music[data-state="disconnected"] .music-status takes. */
#kroger[data-state="disconnected"] .kroger-status {
  color: var(--ink);
}

.kroger-store-search {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--space-r2);
  margin: 0;
}

.kroger-store-search .app-field {
  flex: 1 1 6rem;
  min-width: 0;
  width: auto;
}

.kroger-store-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-r1);
}

/* The fulfillment choices use the shared segmented-control primitive. */
.kroger-modality-options {
  margin-top: var(--space-r2);
}