/* The public store (AIO-57). The site's own tokens and components
   (.price-card, .form-card, .field, .btn, .form-status) do the work; this
   file adds only the store's own layout. */

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.store-card {
  display: flex;
  flex-direction: column;
}

.store-card .store-card-title {
  margin: 0 0 .6rem;
  color: var(--white);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25;
}

.store-card .store-card-text {
  margin: 0;
  color: #bfd0de;
}

.store-card .store-card-action {
  margin-top: auto;
  padding-top: 1.25rem;
}

.store-footnote {
  margin-top: 1.5rem;
  color: var(--ink-600);
}

.store-empty {
  max-width: 40rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--cloud-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.store-empty h2 {
  margin-top: 0;
}

.store-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.store-checkout .form-card h2 {
  margin-top: 0;
}

.store-summary {
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--white);
  background: var(--navy-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.store-summary h2 {
  margin: 0 0 1rem;
  color: var(--white);
  font-size: 1.15rem;
}

.store-summary dl {
  margin: 0;
}

.store-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.store-summary dt {
  color: #bfd0de;
}

.store-summary dd {
  margin: 0;
  font-weight: 600;
  text-align: end;
}

.store-summary .store-summary-total {
  border-bottom: 0;
  font-size: 1.15rem;
}

.store-summary .store-summary-total dd {
  color: var(--gold-500);
}

.store-period {
  color: #9eb8ce;
  font-weight: 400;
}

.store-notice {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  color: #6f4300;
  background: #fff8e6;
  border: 1px solid #f1d89a;
  border-radius: var(--radius-sm);
}

.store-hint {
  display: block;
  margin: .4rem 0 0;
  color: var(--ink-600);
  font-size: .9rem;
}

.store-summary .store-hint {
  color: #bfd0de;
}

.store-inline-link {
  color: var(--blue-600);
  font-weight: 600;
  text-decoration: underline;
}

.store-back {
  margin: 1.25rem 0 0;
}

.store-back a {
  color: var(--white);
  text-decoration: underline;
}

.store-error-list {
  margin: 0;
  padding-inline-start: 1.1rem;
}

@media (max-width: 860px) {
  .store-checkout {
    grid-template-columns: minmax(0, 1fr);
  }
}