/* =====================================================================
   LARINA — plan tabs + cards
   Shared by /pricing/ and the "See plans" panel inside /try/.
   Categories are tinted with the same signal colours the app uses
   (WashHue in lib/theme/larina_tokens.dart), so a merchant sees the
   same colour for "Publish Product" here and inside the product.
   ===================================================================== */

.plan-tabs {
  display: flex; gap: 9px; overflow-x: auto;
  padding-bottom: 6px; margin-bottom: 20px;
  scrollbar-width: none;
}
.plan-tabs::-webkit-scrollbar { display: none; }

.plan-tab {
  flex: none; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid #E7DCD6;
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700;
  color: var(--ink-soft);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  min-height: 42px;
}
.plan-tab:hover { border-color: var(--gold); color: var(--ink); }
.plan-tab.is-on {
  background: var(--sig); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sig) 34%, transparent);
}

.plan-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plan-grid { grid-template-columns: 1fr; } }

.plan-card {
  background: var(--surface); border: var(--hair-soft);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: var(--lift-1);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.plan-card:hover { box-shadow: var(--lift-2); border-color: var(--gold); }
.plan-card h3 { font-size: 1.08rem; margin: 0; }

.plan-price { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.plan-price b {
  font-size: 1.62rem; color: var(--ink);
  font-family: var(--font-display); font-weight: 600;
}
.plan-price span { font-size: 0.82rem; color: var(--ink-mute); }

.plan-coins {
  margin: 0; font-size: 0.755rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent);
}
.plan-desc {
  margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-soft);
  flex: 1; white-space: pre-line;
}
.plan-card .btn { margin-top: 14px; width: 100%; }

.plan-status { font-size: 0.88rem; color: var(--ink-mute); padding: 16px 0; }