@layer modules {
  /* ── Pricing page ─────────────────────────────────── */
  .pricing-page {
    max-width: 36rem;
    margin-inline: auto;
  }

  .pricing-header {
    margin-bottom: var(--space-lg);
  }

  .pricing-header__subtitle {
    font-size: var(--text-small);
    color: var(--color-ink-secondary);
    margin-top: var(--space-xs);
  }

  /* ── Fallback price block ─────────────────────────── */
  .pricing-fallback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.65rem 0.75rem;
    background: var(--color-canvas-alt);
    border: 1.5px dashed var(--color-ink-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
  }

  .pricing-fallback__label {
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-ink-secondary);
  }

  .pricing-fallback__label small {
    display: block;
    font-weight: 400;
    font-size: var(--text-xs);
    margin-top: 0.15em;
  }

  .pricing-fallback--album {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, oklch(96% 0.04 160) 0%, oklch(98% 0.02 155) 100%);
    margin-top: calc(var(--space-lg) * -0.5);
  }

  /* ── Category pricing rows ────────────────────────── */
  /* Mirrors .sticker-item from cards.css */
  .pricing-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .pricing-row {
    --row-accent: var(--color-ink-badge);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    position: relative;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) ease,
                border-color var(--duration-fast) ease;

    &:focus-within {
      border-color: var(--row-accent);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--row-accent) 12%, transparent);
    }

    @media (any-hover: hover) {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px oklch(0% 0 0 / 0.08);
        border-color: color-mix(in oklch, var(--row-accent) 40%, var(--color-ink-border));
      }
    }

    &:active { transform: translateY(0); }
  }

  .pricing-row--player { --row-accent: var(--color-category-player); }
  .pricing-row--shield { --row-accent: var(--color-info); }
  .pricing-row--stadium { --row-accent: var(--color-primary); }
  .pricing-row--profile { --row-accent: var(--color-category-profile); }
  .pricing-row--star_player { --row-accent: var(--color-star); }
  .pricing-row--shiny { --row-accent: var(--color-accent); }

  /* Category icon — matches .sticker-number from cards.css */
  .pricing-row__icon {
    width: var(--size-sticker-number);
    height: var(--size-sticker-number);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-normal);
    line-height: 1;
    flex-shrink: 0;
    background: var(--row-accent);
  }

  .pricing-row__info {
    flex: 1;
    min-width: 0;
  }

  /* Category name — matches .sticker-name */
  .pricing-row__category {
    font-weight: 700;
    font-size: var(--text-small);
    line-height: var(--leading-tight);
  }

  /* Current price — matches .sticker-price */
  .pricing-row__price {
    font-weight: 800;
    font-size: var(--text-small);
    color: var(--color-ink);
    letter-spacing: -0.01em;
  }

  .pricing-row__price--accent {
    color: var(--color-accent-text);
  }

  .pricing-row__price--default {
    font-weight: 400;
    color: var(--color-ink-secondary);
  }

  /* Price input group */
  .pricing-row__input {
    display: flex;
    align-items: center;
    gap: 0.3ch;
    flex-shrink: 0;
  }

  .pricing-row__prefix {
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-ink-secondary);
    user-select: none;
  }

  .pricing-row__field {
    width: 5.5rem;
    padding: 0.35em 0.5em;
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 700;
    text-align: right;
    background: var(--color-canvas);
    transition: border-color var(--duration-fast) ease;
    min-height: 2.25rem;

    &:focus {
      outline: none;
      border-color: var(--row-accent);
    }

    &::placeholder {
      color: var(--color-ink-badge);
      font-weight: 400;
    }
  }

  /* Shiny row — gold treatment matching .sticker-item--shiny */
  .pricing-row--shiny {
    background: linear-gradient(135deg, #FDF6E3 0%, var(--color-accent-light) 50%, #FDF6E3 100%);
    border: 2px solid var(--color-accent-border);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        105deg,
        transparent 35%,
        oklch(90% 0.1 85 / 0.3) 42%,
        oklch(95% 0.06 60 / 0.15) 48%,
        oklch(90% 0.08 120 / 0.1) 52%,
        transparent 60%
      );
      background-size: 300% 100%;
      animation: shimmer-sweep 5s ease-in-out infinite;
      pointer-events: none;
    }

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-accent);
        box-shadow: 0 4px 16px oklch(70% 0.12 85 / 0.2);
      }
    }
  }

  /* Submit area */
  .pricing-submit {
    margin-top: var(--space-lg);
  }

  /* ── Responsive ───────────────────────────────────── */
  @media (min-width: 640px) {
    .pricing-row {
      padding: 0.75rem var(--space-md);
    }

    .pricing-fallback {
      padding: 0.75rem var(--space-md);
    }
  }
}