/* Keep the Tailwind header isolated from the Bootstrap theme's utility overrides. */
.public-header {
    position: relative;
    z-index: 50;
    background: #fff;
    box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .28);
}

.public-header__nav {
    max-width: 1280px;
    padding: 12px 32px !important;
}

.public-header__brand {
    color: #e4007c;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.public-header__brand:hover { color: #f0134d; }
.public-header__brand img { width: 44px; height: 44px; object-fit: contain; }
.public-header__brand-subtitle { font-size: 12px; }

.public-header__link,
.public-header__mobile-link,
.public-header__capability {
    color: #111827;
    font-weight: 600;
    text-decoration: none;
}

.public-header__link { font-size: 14px; line-height: 24px; }
.public-header__link:hover { color: #377dff; }
.public-header button:not(.btn) { border: 0; background: transparent; }
.public-header__nav-label { display: inline-flex; align-items: center; }
.public-header__nav-icon { flex: 0 0 auto; width: 1.1em; margin-right: 8px; text-align: center; }
.public-header button:focus-visible,
.public-header a:focus-visible { outline: 2px solid #377dff; outline-offset: 4px; }
.public-header__desktop { display: flex; align-items: center; }
.public-header__links { gap: 48px; }
.public-header__links .public-header__nav-icon { width: auto; }
.public-header__dropdown-chevron { width: 11px; height: 7px; }
.public-header__account { gap: 10px; }
.public-header__mobile-toggle { display: none; }
.public-header__icon-button { padding: 10px; }

.public-header__popover {
    width: min(448px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 20px rgb(17 24 39 / 10%), 0 0 0 1px rgb(17 24 39 / 5%);
    --anchor-gap: 12px;
}

.public-header__popover-items { padding: 16px !important; }
.public-header__capability { gap: 24px; padding: 16px !important; font-size: 14px; line-height: 24px; }
.public-header__capability:hover { color: #111827; background: #f9fafb; }
.public-header__capability-icon { width: 44px; height: 44px; }
.public-header__capability-icon img { width: 28px; height: 28px; object-fit: contain; }
.public-header__popover-footer { background: #f9fafb; }
.public-header__popover-footer a { padding: 12px !important; }
.public-header__dialog { padding: 0; border: 0; background: transparent; }
.public-header__panel { padding: 24px !important; }
.public-header__mobile-content { margin-top: 24px !important; }
.public-header__mobile-group,
.public-header__mobile-account { padding: 24px 0 !important; }
.public-header__mobile-link { padding: 8px 12px !important; font-size: 16px; line-height: 28px; }
.public-header__mobile-link:hover { color: #111827; background: #f9fafb; }
.public-header__mobile-sublink { padding-left: 24px !important; font-size: 14px; }
.public-header__mobile-account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid rgb(17 24 39 / 10%); }
.public-header__mobile-account > .public-header__mobile-link { flex-basis: 100%; }

@media (max-width: 1023.98px) {
    .public-header__nav { padding: 12px 24px !important; }
    .public-header__desktop { display: none; }
    .public-header__mobile-toggle { display: flex; }
}
