/* Shared header layout for all shop themes; the existing navigation styling stays in the theme. */
@media screen {
    :root { --site-header-height: 64px; }
    #page-topbar { --header-link-color: #545a6d; --header-menu-link-color: #545a6d; }
    #page-topbar[data-css-layout="reconnect"] { --header-link-color: #fff; --header-menu-link-color: #495057; }

    #page-topbar .navbar-header { height: var(--site-header-height); padding: 0 24px; }
    #page-topbar .header-brand { display: flex; align-items: center; flex-shrink: 0; height: 64px; max-width: 220px; min-width: 0; }
    #page-topbar .header-brand img { height: 32px; width: auto; max-width: 100%; object-fit: contain; }
    #page-topbar .header-search { flex: 1 1 520px; min-width: 0; max-width: 520px; margin: 0 24px; }
    #page-topbar .header-search .form-control { height: 44px; padding-left: 16px; padding-right: 48px; background-color: #f9f9f9; border-color: #eaeaea; }
    #page-topbar .header-search .form-control:focus { background-color: #fff; border-color: #eaeaea; outline: 0; box-shadow: none; }
    #page-topbar .header-search-submit { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #495057; }
    #page-topbar .header-search .live-search-results { top: calc(100% + 8px); }

    #page-topbar .header-actions { height: 64px; gap: 4px; }
    #page-topbar .header-actions .header-item,
    #page-topbar .header-menu-toggle { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 8px; border-radius: .3rem; color: var(--header-link-color); }
    #page-topbar .header-menu-toggle { flex-shrink: 0; padding: 0; }
    #page-topbar .header-item:focus-visible,
    #page-topbar .header-search-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    #page-topbar .header-actions .header-item:hover,
    #page-topbar .header-actions .header-item:focus,
    #page-topbar .header-actions .header-item:active,
    #page-topbar .header-menu-toggle:hover,
    #page-topbar .header-menu-toggle:focus,
    #page-topbar .header-account-toggle[aria-expanded="true"] { color: var(--primary); background-color: transparent; }
    #page-topbar .header-cart { position: relative; }
    #page-topbar .header-cart i { color: inherit; }
    #page-topbar .header-cart .badge { top: 3px; right: 0; margin-left: 0; }
    #page-topbar .header-account-name { max-width: 180px; font-size: 15px; }

    /* Bootstrap's static positioning avoids combining Popper offsets with the theme's !important alignment. */
    #page-topbar .header-account { position: relative; }
    #page-topbar .header-account-menu { right: 0 !important; left: auto !important; width: 300px; max-width: calc(100vw - 24px); max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; }
    #page-topbar .header-account-menu .dropdown-item { padding: .5rem 1.5rem; color: var(--header-menu-link-color); white-space: normal; }
    #page-topbar .header-account-menu .dropdown-item:hover,
    #page-topbar .header-account-menu .dropdown-item:focus,
    #page-topbar .header-account-menu .dropdown-item:active,
    #page-topbar .header-account-menu .dropdown-item.active { color: var(--primary); }

    #page-topbar + .topnav { top: var(--site-header-height); margin-top: 0; }
    #page-topbar ~ .main-content .page-content { margin-top: var(--site-header-height); }
}

@media screen and (max-width: 991.98px) {
    /* 64px controls row + 36px search field + 8px bottom spacing. */
    :root { --site-header-height: 108px; }

    #page-topbar .navbar-header { flex-wrap: wrap; align-content: flex-start; padding: 0 12px 8px; }
    #page-topbar .header-brand { flex: 1 1 0; max-width: none; margin: 0 8px; }
    #page-topbar .header-brand img { height: 24px; }
    #page-topbar .header-search { flex: 0 0 calc(100% - 24px); max-width: none; margin: 0 12px; }
    #page-topbar .header-search .form-control { height: 36px; padding-top: .3rem; padding-bottom: .3rem; padding-right: 40px; }
    #page-topbar .header-search-submit { width: 36px; height: 36px; }
    #page-topbar .header-account-menu .dropdown-item { min-height: 44px; padding-top: .35rem; padding-bottom: .35rem; background-color: transparent; }
    #page-topbar + .topnav { max-height: min(360px, calc(100vh - var(--site-header-height))); max-height: min(360px, calc(100dvh - var(--site-header-height))); }
    #page-topbar + .topnav .nav-link,
    #page-topbar + .topnav .dropdown-item { min-height: 44px; }
    #page-topbar ~ .main-content .page-content { padding-top: 29px; }
}