/* Product card: purchasable add-on cards in the store and the onboarding
 * store step. Paper and ink like the rest of the stage window.
 * ---------------------------------------------------------------------- */

@layer modules {
  .product-card {
    background-color: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--border-radius-l);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  }

  .product-card:hover {
    box-shadow: none;
    transform: translate(2px, 2px);
  }

  .product-card--selected {
    background-color: var(--color-highlight);
    border-color: var(--color-accent);
  }

  .product-card__tag {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .product-card__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: var(--font-display-tracking);
    margin: 0;
  }

  .product-card__name a {
    color: inherit;
    text-decoration: none;
  }

  .product-card__name a:hover {
    text-decoration: underline;
  }

  .product-card__price {
    align-items: baseline;
    display: flex;
    gap: 0.375rem;
  }

  .product-card__amount {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: var(--font-display-tracking);
    line-height: 1;
  }

  .product-card__desc {
    color: var(--color-ink-dark);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
  }

  .product-card__cta {
    margin-block-start: auto;
    padding-block-start: var(--space-s);
  }
}