/* Header bar: colors, font, and logo height come from the theme. */
.hpu-menu {
    color: var(--uc-color-header-text);
    background-color: var(--uc-color-header-bg);
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-base);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: left;
}

    /* The logo link sizes itself to the logo, so any logo height set in
   Theme Settings fits inside the header. This overrides the older
   Bootstrap's fixed 50px .navbar-brand height, which is what let
   taller logos spill out. */
    .hpu-menu .navbar-brand {
        display: flex;
        align-items: center;
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
        line-height: 1;
    }

        /* Scoped to the logo only; a plain ".hpu-menu img" also resized
       the product photos in the cart dropdown. */
        .hpu-menu .navbar-brand img {
            display: block;
            height: var(--uc-logo-height);
            width: auto;
            max-width: 240px;
            object-fit: contain;
            object-position: left center;
        }

.hpu-grid-expand {
    width: 30px;
    height: 30px;
}

/* Section headings on the order pages. */
.hpu-groupname {
    color: var(--uc-color-section-text);
    background-color: var(--uc-color-section-bg);
    font-family: var(--uc-font-heading);
    font-size: calc(var(--uc-font-size-base) * 18 / 14);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: center;
}