/* ==========================================
   SHOPPING HEADER POLISH V1
   ========================================== */


/*
 * Minder lege ruimte onder de grote
 * paginatitel.
 */
.shopping-v1-page
> .page-header {
  margin-bottom: 12px !important;
}


/*
 * Status + uitloggen als één rustige balk.
 */
.shopping-v1-toolbar {
  width: 100%;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin:
    0
    0
    20px !important;

  padding:
    11px
    13px
    11px
    16px;

  border-radius: 17px;

  background:
    rgba(255, 255, 255, .58);

  box-shadow:
    0 4px 14px
    rgba(70, 50, 35, .035);
}


/*
 * Status krijgt iets meer karakter,
 * maar blijft ondergeschikt aan de
 * paginatitel.
 */
.shopping-v1-summary {
  display: flex;
  align-items: center;

  gap: 7px;

  margin: 0 !important;

  color: var(--muted);

  font-size: 14px;
  font-weight: 800;

  line-height: 1.3;
}


.shopping-v1-summary::before {
  content: "🛒";

  font-size: 16px;
}


/*
 * Uitloggen compact houden.
 */
.shopping-v1-logout {
  flex: 0 0 auto;

  min-height: 42px !important;

  margin: 0 !important;

  padding:
    0
    14px !important;

  border-radius:
    13px !important;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 650px) {

  .shopping-v1-page
  > .page-header {
    margin-bottom:
      10px !important;
  }


  .shopping-v1-toolbar {
    gap: 10px;

    margin-bottom:
      16px !important;

    padding:
      9px
      9px
      9px
      13px;
  }


  .shopping-v1-summary {
    font-size:
      13px;
  }


  .shopping-v1-logout {
    min-height:
      40px !important;

    padding:
      0
      12px !important;
  }
}

/* ==========================================
   SHOPPING HEADER CART ICON POLISH
   ========================================== */

.shopping-v1-summary::before {
  opacity: .62;

  filter:
    grayscale(.25)
    saturate(.65);

  transform:
    translateY(-1px);
}