/* Header General */

.header-group .block,
.header-primary-menu-wrapper .block {
  margin: 0;
  width: auto;
}

.header-group .block .inner,
.header-primary-menu-wrapper .block .inner { margin:0; }


/* Hide logout link for anonymous users */
body.not-logged-in .logout-link { display: none; }
/* Mobile menu login / logout / my account links */
li.mobile-user-links { font-weight: 600; }
li.mobile-user-links.first {
  border-top: var(--border-card);
  padding-top: 10px;
  color: #fff;
  margin-top: 8px !important;
}
li.mobile-user-links span a { display: inline-block !important; }



/* Main header - branding etc. */
#header-group-wrapper {
  --btn-radius: var(--radius-inf);
  --btn-padding-vertical: 0.6875em;
  --btn-padding-horizontal: 0.6875em;

  --btn-color-bg: transparent;
  --btn-hover-color: var(--color-bg);
  --btn-hover-color-bg: var(--color-fg);
}

.user-icon-link span {
  white-space: nowrap;
  max-width: 10ch;
  text-overflow: ellipsis;
  overflow: hidden;
}

#header-group-wrapper a {
  text-decoration-color: transparent;
}

.header-group img { display: block; }

.header-group-inner  {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .8em;
  column-gap: 1.6em;
  padding: clamp(.6em, 3vw, 1.6em) 0;
  font-size: min(3.5vw, 100%);
}

#header-site-info {
  flex: 2;
}


#header-site-info-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: .25em;
  column-gap: .6em;
}

#site-name-slogan {
  text-wrap: balance;
  flex: 1;
  font-style: italic;
  font-size: .8125em;
  line-height: normal;
  min-width: 15ch;
}

#search-wrapper {
  display: flex;
  flex: 3;
  gap: .8em;
  position:relative;
  flex-wrap: wrap;
  align-items: center;
}

.cart-link {
  position: relative;
}
.cart-items {
  box-sizing: border-box;
  position: absolute;
  top: -.5em;
  right: -.25em;
  line-height: 1;
  min-width: 1.786em;
  padding: .2em .4em;
  background-color: var(--activeColor);
  color: #fff;
  border: .15em solid;
  box-shadow: -.1em .1em .4em #000;
  border-radius: 1em;
  text-decoration: none;
  font-size: 80%;
}

.cart-user {
  order: 99;
  display: flex;
  gap: 1em;
  text-align: center;
  align-items: center;

  /* Fix borders looking jagged. */
  --btn-box-shadow: 0 0 1px 0px var(--_btn-border-color) inset, 0 0 1px 0px var(--_btn-border-color);
}

.cart-user a {
  text-decoration: none;
  color: inherit;
}

.button-links.cart-user > a {
  gap: .5em;
}



/* Preface Top - Hero region. */
#preface-top                     { max-width: 100%; }
#preface-top-inner {
  display: flex;
  flex-direction: column;
  gap: 1em;
}



@media (max-width: 550px) {
  #site-name-slogan { display: none; }
  .user-icon-link span { display: none; }
  #header-group-wrapper { --btn-icon-size: 1em; }
}
@media (width > 680px) {
  body.not-logged-in #site-name-slogan { max-width: 18ch; }
}
@media (max-width: 750px) {
  .cart-user span.hi { display: none; }
  .user-icon-link span { max-width: 9ch; }
}
@media (width > 740px) {
  #site-name-slogan { max-width: 18ch; }
  #header-site-info { min-width: 375px; }
}

@media (width < 800px) {
  #header-primary-menu-wrapper { display: none; }
  #search-wrapper #mobile-menu-wrapper { display: block; }
}
@media (width >= 800px) {
  #search-wrapper #mobile-menu-wrapper { display: none; }
  #header-primary-menu-wrapper {
    display: block !important;
    --row-gutter: 0;
  }
}


@media (max-width: 1000px) {
  #search-wrapper { order: 9998; min-width: 80vw !important; }
  .header-group-inner { column-gap: 1em; }
}


/* Show phone number text when there is room and don't style like button */
a.phone-number-cart span { display: none; }
@media (890px < width <= 1000px) or (width > 1150px) {
  a.phone-number-cart {
    --_btn-border-width: 0;
    --_btn-hover-color: var(--color-light);
    --_btn-hover-color-bg: transparent;
    --_btn-box-shadow: 0;
  }
  a.phone-number-cart span {display: inline-block;}
}