/**
 * Shop page banner: title + subtitle. Mobile-first; used for SEO and consistent look.
 */
export function ShopPageBanner({
  title,
  subtitle,
}: {
  title: string;
  subtitle?: string;
}) {
  return (
    <header className="w-full py-6 md:py-8">
      <h1 className="font-[family-name:var(--font-fraunces)] text-2xl font-bold text-[var(--foreground)] md:text-3xl lg:text-4xl">
        {title}
      </h1>
      {subtitle && (
        <p className="mt-2 text-[var(--muted)] text-base md:text-lg">
          {subtitle}
        </p>
      )}
    </header>
  );
}
