.ds-page-header {
  --page-header-border-default: var(--bh-border-default);
  --page-header-content-brand: var(--bh-content-brand-default);
  --page-header-content-default: var(--bh-content-default);
  --page-header-content-heading: var(--bh-content-default);
  --page-header-content-muted: var(--bh-content-muted);
  --page-header-content-subtle: var(--bh-content-subtle);
  --page-header-interactive-secondary: var(--bh-interactive-secondary-default);
  --page-header-interactive-secondary-hover: var(--bh-bg-raised);
  --page-header-control-radius: var(--bh-control-default);
  --page-header-space-xs: var(--bh-space-xs-4);
  --page-header-space-md: var(--bh-space-md-8);
  --page-header-space-lg: var(--bh-space-lg-10);
  --page-header-space-xl: var(--bh-space-xl-12);
  --page-header-space-2xl: var(--bh-space-2xl-14);
  --page-header-space-3xl: var(--bh-space-3xl-16);
  --page-header-space-4xl: var(--bh-space-4xl-20);
  --page-header-space-7xl: var(--bh-space-7xl-40);
  --page-header-action-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));

  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--page-header-space-3xl);
  padding-block: var(--page-header-space-4xl);
  color: var(--page-header-content-default);
  font-family: var(--bh-font-family);
  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
}

.ds-page-header *,
.ds-page-header *::before,
.ds-page-header *::after {
  box-sizing: border-box;
}

.ds-page-header h1,
.ds-page-header p,
.ds-page-header ol {
  margin: 0;
}

.ds-page-header button,
.ds-page-header a {
  font: inherit;
}

.ds-page-header a {
  color: inherit;
  text-decoration: none;
}

.ds-page-header__breadcrumbs {
  color: var(--page-header-content-subtle);
  font-size: var(--bh-text-body-md-medium-font-size);
  font-weight: var(--bh-text-body-md-medium-font-weight);
  line-height: var(--bh-text-body-md-medium-line-height);
}

.ds-page-header__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: var(--page-header-space-xs);
  padding: 0;
  list-style: none;
}

.ds-page-header__breadcrumbs li,
.ds-page-header__breadcrumbs a,
.ds-page-header__breadcrumbs span:not(.ds-page-header__breadcrumb-separator) {
  display: inline-flex;
  align-items: center;
  gap: var(--page-header-space-xs);
  min-width: 0;
}

.ds-page-header__breadcrumbs a:hover {
  color: var(--page-header-content-default);
}

.ds-page-header__breadcrumbs .is-current {
  color: var(--page-header-content-default);
}

.ds-page-header__breadcrumb-label {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-page-header__breadcrumb-icon {
  width: var(--page-header-space-4xl);
  height: var(--page-header-space-4xl);
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.ds-page-header__breadcrumb-separator {
  width: var(--page-header-space-3xl);
  height: var(--page-header-space-3xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--page-header-content-subtle);
  line-height: var(--bh-text-body-2xs-regular-line-height);
}

.ds-page-header__section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--page-header-space-xs);
}

.ds-page-header__topline {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--page-header-space-7xl);
}

.ds-page-header__copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--page-header-space-xs);
}

.ds-page-header__heading-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--page-header-space-lg);
}

.ds-page-header__heading-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--page-header-space-md);
}

.ds-page-header__icon {
  width: var(--bh-space-5xl-24);
  height: var(--bh-space-5xl-24);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--page-header-content-subtle);
}

.ds-page-header__home-icon {
  width: var(--bh-space-5xl-24);
  height: var(--bh-space-5xl-24);
  display: block;
}

.ds-page-header h1 {
  min-width: 0;
  color: var(--page-header-content-heading);
  font-size: var(--bh-text-heading-md-semibold-font-size);
  font-weight: var(--bh-text-heading-md-semibold-font-weight);
  line-height: var(--bh-text-heading-md-semibold-line-height);
  overflow-wrap: anywhere;
}

.ds-page-header__meta {
  flex: 0 0 auto;
  padding-top: var(--bh-space-xxs-2);
  color: var(--page-header-content-muted);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-text-body-2xs-regular-font-weight);
  line-height: var(--bh-text-body-2xs-regular-line-height);
  white-space: nowrap;
}

.ds-page-header__description {
  width: 100%;
  color: var(--page-header-content-subtle);
  font-size: var(--bh-text-body-md-regular-font-size);
  font-weight: var(--bh-text-body-md-regular-font-weight);
  line-height: var(--bh-text-body-md-regular-line-height);
}

.ds-page-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--page-header-space-md);
}

.ds-page-header__action {
  min-width: 0;
  height: var(--page-header-action-height);
  border: var(--bh-space-xxxs-1) solid var(--page-header-border-default);
  border-radius: var(--page-header-control-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-header-space-xl);
  background: var(--page-header-interactive-secondary);
  box-shadow: var(--shadow-button-secondary);
  color: var(--page-header-content-default);
  cursor: pointer;
  font-size: var(--bh-text-body-md-medium-font-size);
  font-weight: var(--bh-text-body-md-medium-font-weight);
  line-height: var(--bh-text-body-md-medium-line-height);
  white-space: nowrap;
}

.ds-page-header__action:hover {
  background: var(--page-header-interactive-secondary-hover);
}

.ds-page-header__action:disabled {
  cursor: not-allowed;
  opacity: var(--bh-opacity-muted);
}

.ds-page-header__action:focus-visible,
.ds-page-header__breadcrumbs a:focus-visible {
  outline: var(--bh-space-xxs-2) solid var(--page-header-content-brand);
  outline-offset: var(--bh-space-xxs-2);
}

.ds-page-header__tabs {
  width: 100%;
}

.ds-page-header[dir="rtl"] {
  font-family: var(--bh-font-family);
}

.ds-page-header[dir="rtl"] .ds-page-header__topline,
.ds-page-header[dir="rtl"] .ds-page-header__heading-row,
.ds-page-header[dir="rtl"] .ds-page-header__heading-main,
.ds-page-header[dir="rtl"] .ds-page-header__actions,
.ds-page-header[dir="rtl"] .ds-page-header__breadcrumbs ol {
  direction: rtl;
}

/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
@media (max-width: 820px) {
  .ds-page-header__topline {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--page-header-space-2xl);
  }

  .ds-page-header__actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .ds-page-header {
    gap: var(--page-header-space-2xl);
    padding-block: var(--page-header-space-3xl);
  }

  .ds-page-header__breadcrumbs ol {
    flex-wrap: wrap;
  }

  .ds-page-header__heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--page-header-space-xs);
  }

  .ds-page-header__heading-main {
    align-items: flex-start;
  }

  .ds-page-header__actions {
    gap: var(--page-header-space-xs);
  }
}
