/* ==========================================================================
   PAGE-HEADER CSS - Page Title Styling với Retail Design System
   ========================================================================== */

/* Page Title */
.page-header .page-title {
  color: var(--On-background-Brand-Default, #231f20);
  text-align: center;
  /* Title/Serif/Small */
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Title-Page-Size-Small, 40px);
  font-style: normal;
  font-weight: var(--Title-Page-Font-Weight, 700);
  line-height: 120%; /* 48px */
  margin-top: var(--Space-6, 24px);
}

/* Mobile Responsive */
@media (max-width: 575px) {
  .page-header .page-title {
    font-size: var(--Title-Page-Size-Small, 24px);
    line-height: 120%;
  }
}

/* Tablet Responsive */
@media (min-width: 576px) and (max-width: 991px) {
  .page-header .page-title {
    font-size: var(--Title-Page-Size-Medium, 32px);
    line-height: 120%;
  }
}

/* Desktop Responsive */
@media (min-width: 992px) {
  .page-header .page-title {
    font-size: var(--Title-Page-Size-Small, 40px);
    line-height: 120%;
  }
}