/* Kirame — Storefront: cart page (was inline in store/pages/cart.php) */

[hidden] { display: none !important; }

.cart-items { display: flex; flex-direction: column; gap: var(--sp-3); }

.cart-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
}

.cart-item-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--md-sys-color-surface-variant);
}

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; margin-bottom: var(--sp-1); }
.cart-item-meta {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--font-size-sm);
  color: var(--md-sys-color-on-surface-variant);
}
.cart-item-line { font-weight: 700; white-space: nowrap; }

.cart-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
}

.cart-total { font-size: var(--font-size-lg); }
.cart-total strong { color: var(--md-sys-color-primary); }

#pay-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  margin-top: var(--sp-6);
  padding: var(--sp-7);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
}
#pay-waiting .pay-waiting-text { font-weight: 600; font-size: var(--font-size-lg); }

.pay-hint {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--font-size-sm);
  max-width: 380px;
}

#pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  margin-top: var(--sp-6);
  padding: var(--sp-7);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
}

.pay-result { font-size: var(--font-size-lg); font-weight: 700; }
.pay-ok { color: var(--color-success); }
.pay-no { color: var(--md-sys-color-error); }