/* CartBridge plan tables. Follows the theme's colors, so light and dark mode come from the theme. */
.cb-plantable {
  --cb-accent: var(--brand-primary, #0e7490);
  --cb-text: var(--text-primary, #0f172a);
  --cb-muted: var(--text-secondary, #475569);
  --cb-card: var(--bg-card, #ffffff);
  --cb-surface: var(--bg-surface-hover, var(--bg-surface, #f1f5f9));
  --cb-border: var(--border-color, #e2e8f0);
  --cb-ok: var(--brand-success, #10b981);
  --cb-bad: var(--brand-danger, #ef4444);
  /* Darkened so white button text keeps at least 4.5:1 contrast on the brand color. */
  --cb-button: color-mix(in srgb, var(--cb-accent) 78%, #000);
  --cb-radius: 14px;
  margin: 0 0 2rem;
  color: var(--cb-text);
}
.cb-plantable *, .cb-plantable *::before, .cb-plantable *::after { box-sizing: border-box; }
.cb-plantable__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cb-plantable__problem { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border-radius: 10px; border: 1px dashed var(--cb-border); color: var(--cb-muted); font-size: 0.9rem; }
.cb-plantable__table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--cb-border); border-radius: var(--cb-radius); background: var(--cb-card); overflow: hidden; font-size: 0.95rem; }
.cb-plantable__caption { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.cb-plantable__table th, .cb-plantable__table td { padding: 0.8rem 1rem; text-align: left; vertical-align: middle; border: 0; border-top: 1px solid var(--cb-border); background: transparent; color: inherit; }
.cb-plantable__table thead th { border-top: 0; background: var(--cb-surface); color: var(--cb-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.cb-plantable__table tbody tr:hover > * { background: color-mix(in srgb, var(--cb-accent) 5%, transparent); }
.cb-plantable__plan { font-weight: 700; }
.cb-plantable__name { display: block; }
.cb-plantable__stock { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--cb-muted); }
.cb-plantable__stock::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.cb-plantable__stock.is-in { color: color-mix(in srgb, var(--cb-ok) 80%, var(--cb-text)); }
.cb-plantable__price strong { font-size: 1.05rem; color: var(--cb-text); }
.cb-plantable__cycle { color: var(--cb-muted); font-size: 0.85rem; }
.cb-plantable__note { display: block; margin-top: 0.1rem; color: var(--cb-muted); font-size: 0.78rem; }
.cb-plantable__action { text-align: right !important; width: 1%; white-space: nowrap; }
.cb-plantable .cb-plantable__order { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.5rem 1.15rem; border-radius: 10px; border: 2px solid var(--cb-button); background: var(--cb-button); color: #fff !important; font-weight: 700; text-decoration: none !important; line-height: 1.2; }
.cb-plantable .cb-plantable__order:hover, .cb-plantable .cb-plantable__order:focus-visible { filter: brightness(1.12); color: #fff !important; }
.cb-plantable .cb-plantable__order:focus-visible { outline: 3px solid color-mix(in srgb, var(--cb-accent) 45%, transparent); outline-offset: 2px; }
.cb-plantable__badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--cb-bad) 14%, transparent); color: color-mix(in srgb, var(--cb-bad) 75%, var(--cb-text)); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.cb-plantable__badge.is-muted { background: var(--cb-surface); color: var(--cb-muted); }
.cb-plantable__row.is-out > *:not(.cb-plantable__action), .cb-plantable__row.is-unavailable > *:not(.cb-plantable__action) { color: var(--cb-muted); }
.cb-plantable__row.is-out .cb-plantable__price strong, .cb-plantable__row.is-unavailable .cb-plantable__price strong { color: var(--cb-muted); }

/* Phones: each plan becomes a card, so nothing scrolls sideways. */
@media (max-width: 680px) {
  .cb-plantable__table, .cb-plantable__table tbody, .cb-plantable__table tr, .cb-plantable__table th, .cb-plantable__table td { display: block; width: 100%; }
  .cb-plantable__table { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .cb-plantable__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cb-plantable__table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0 0 0.75rem; padding: 1rem; border: 1px solid var(--cb-border); border-radius: var(--cb-radius); background: var(--cb-card); }
  .cb-plantable__table tbody tr:hover > * { background: transparent; }
  .cb-plantable__table th, .cb-plantable__table td { padding: 0; border: 0; }
  .cb-plantable__table td[data-label]::before { content: attr(data-label); display: block; color: var(--cb-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .cb-plantable__plan { grid-column: 1 / -1; font-size: 1.05rem; }
  .cb-plantable__price { grid-column: 1 / -1; padding-top: 0.5rem !important; border-top: 1px solid var(--cb-border) !important; }
  .cb-plantable__action { grid-column: 1 / -1; width: 100%; text-align: left !important; white-space: normal; }
  .cb-plantable .cb-plantable__order { width: 100%; }
}

/* Site CSS paints links with -webkit-text-fill-color, often with !important, which
   beats color and left the label teal on the teal button. The id inside :not()
   gives these rules id weight so they win over those link rules in either order. */
.cb-plantable a.cb-plantable__order:not(#cartbridge-a11y),
.cb-plantable a.cb-plantable__order:not(#cartbridge-a11y):is(:link, :visited, :hover, :focus, :focus-visible, :active),
.cb-plantable a.cb-plantable__order:not(#cartbridge-a11y) * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
}
.cb-plantable :is(.cb-plantable__badge, .cb-plantable__stock, .cb-plantable__name, .cb-plantable__cycle, .cb-plantable__note):not(#cartbridge-a11y) { -webkit-text-fill-color: currentColor !important; }