/* Step 8: shop and marketplace migration to the shared WellO language. */
body[data-page="shop"] {
  background: var(--pg-bg);
  color: var(--pg-ink);
}

body[data-page="shop"] .shop-header {
  border-bottom: 1px solid var(--pg-line);
}

body[data-page="shop"] .hero {
  background: linear-gradient(140deg, var(--pg-primary-strong), #2c7765);
  box-shadow: var(--pg-shadow-card);
}

body[data-page="shop"] .plan-card,
body[data-page="shop"] .coach-card,
body[data-page="shop"] .detail-card {
  border-color: var(--pg-line);
  border-radius: var(--pg-radius-card);
  box-shadow: var(--pg-shadow-card);
}

body[data-page="shop"] .plan-card.featured {
  border-color: #b9df70;
  background: #fbfff2;
}

body[data-page="shop"] .plan-badge,
body[data-page="shop"] .tag {
  color: var(--pg-primary);
  background: var(--pg-accent-soft);
}

body[data-page="shop"] .search,
body[data-page="shop"] .plan-card,
body[data-page="shop"] .coach-card,
body[data-page="shop"] .detail-card {
  background: var(--pg-surface);
}

body[data-page="shop"] .search,
body[data-page="shop"] :is(input, dialog) {
  border-color: var(--pg-line);
}

body[data-page="shop"] .message {
  color: var(--pg-danger);
}

body[data-page="shop"] .buy-button {
  min-height: 44px;
  border-radius: var(--pg-radius-control);
  background: var(--pg-accent);
  color: var(--pg-ink);
}

body[data-page="shop"] .rating {
  color: var(--pg-warning);
}

body[data-page="shop"] .verified {
  color: var(--pg-success);
}

body[data-page="shop"] dialog {
  box-shadow: var(--pg-shadow-auth);
}