.mini-cart {
  position: relative;
  display: inline-flex;
}

.mini-cart__toggle {
  /* Match header .icons a.btn-messages (bell/envelope) so the badge
     (.item-count, absolutely positioned top/right) lines up the same way. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: x-large;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
}

.mini-cart__toggle:hover {
  background: var(--overlay-06);
  color: var(--text);
}

.mini-cart__icon {
  /* Match the size of the other header icons (bell, envelope), which rely
     on the ambient font-size rather than an explicit override. */
  font-size: 1em;
}

.mini-cart__overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--black) 35%, transparent);
  z-index: 1000;
}

.mini-cart__panel {
  position: fixed;
  top: 16px;
  right: 16px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 15px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--overlay-12);
  border-radius: 12px;
  box-shadow: 0 12px 40px var(--overlay-18);
  z-index: 1001;
}

.mini-cart__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--overlay-08);
}
.mini-cart__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.mini-cart__title {
  font-weight: 700;
}

.mini-cart__close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 0;
}

.mini-cart__loading,
.mini-cart__empty {
  padding: 16px;
  color: var(--gray-dark);
}

.mini-cart__list {
  padding: 8px;
}

.mini-cart__item {
  display: grid;
  grid-template-columns: 48px 1fr 100px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-radius: 10px;
}

.mini-cart__item:hover {
  background: var(--overlay-03);
}

.mini-cart__img {
  width: 48px;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--overlay-08);
}

.mini-cart__name {
  font-weight: 600;
}

.mini-cart__sub {
  display: inline-flex;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.mini-cart__footer {
  padding: 8px 0;
  border-top: 1px solid var(--overlay-08);
}

.mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mini-cart__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.mini-cart__actions .btn-primary{
  background: var(--link);
  border-color: var(--link);
  color: var(--surface);
}

.mini-cart__media,
.mini-cart__link{
  color:inherit;
  text-decoration:none;
}

.mini-cart__link:hover{
  text-decoration:underline;
}

.mini-cart__remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:30px;
  padding:0;
  border:0;
  opacity:.7;
  cursor:pointer;
}

.mini-cart__remove:hover{
  opacity:1;
}