.p-header__shop {
  gap: 1rem;
  margin-left: auto;
}

.p-header__shop-button-account {
  display: none;
}

.p-header__shop-cart {
  height: var(--v-form-field__height);
  background-color: var(--v-color__2);
  border-radius: var(--v-border-radius__lg);

  text-decoration: none;
  transition: var(--v-transition__default);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 0.2rem;
}

.p-header__shop-cart-total {
  display: none;
}

.p-header__shop-cart-icon,
.p-header__shop-cart-icon-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: var(--v-transition__default);
}

.p-header__shop-cart-icon {
  width: calc( var(--v-form-field__height) - 0.4rem );
  background-color: var(--v-color__4);
  color: var(--v-color__2);
  position: relative;
}

.p-header__shop-cart:hover .p-header__shop-cart-icon {
  background-color: var(--v-color__4--alt1);
}

.p-header__shop-cart-icon-amount {
  position: absolute;
  z-index: 10;
  top: -0.1rem;
  left: -0.3rem;
  color: var(--v-color__1);
  line-height: 1;
  font-size: 60%;

  width: 1rem;
  background-color: var(--v-color__2);
}

@media (min-width: 500px) {
  .p-header__shop-cart {
    padding: 0 0.2rem 0 1rem;
    min-width: 9rem;
  }

  .p-header__shop-cart-total {
    display: block;
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .p-header__shop-cart-total-value {
    font-size: 150%;
    font-weight: var(--v-font-weight__default--bold);
  }
}

@media (min-width: 1000px) {
  .p-header__shop-button-account {
    display: inline-flex;
  }

  .p-header__shop-button-account-icon {
    display: none;
  }
}