/* Veton Charger Configurator — header cart icon + count badge.
 *
 * Default state is display:none so the cart slot doesn't sit between the
 * language switcher and the "Customise my charger" button (and doesn't
 * inherit the menu's flex gap). On the first cart item we mount the <li>
 * with .is-mounted (collapsed via grid 0fr), then in the next frame add
 * .has-items so the column expands 0fr → 1fr and the icon slides in. */
.vcc-cart-item {
  display: none;
}
.vcc-cart-item.is-mounted {
  display: inline-grid;
  grid-template-columns: 0fr;
  overflow: hidden;
  opacity: 0;
  min-width: 0;
  transition: grid-template-columns 380ms ease, opacity 280ms ease 80ms;
}
.vcc-cart-item.is-mounted.has-items {
  grid-template-columns: 1fr;
  opacity: 1;
}
.vcc-cart-item > .vcc-cart-link { min-width: 0; }

.vcc-cart-item .vcc-cart-link {
  display: inline-flex;
  align-items: center;
}
.vcc-cart-item .vcc-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.vcc-cart-item .icon-cart {
  position: relative;
  top: 2px;
  font-size: 1.35rem;
  line-height: 1;
  display: inline-block;
  color: #fff;
}
.vcc-cart-item .vcc-cart-link:hover .icon-cart,
.vcc-cart-item .vcc-cart-link:focus .icon-cart { color: #C49E60; }
.vcc-cart-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #e02b27;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}
.vcc-cart-badge[hidden] { display: none; }

/* Mobile counterpart: separate anchor injected right before #burger-container
 * so the cart icon stays visible on phone widths where .main-menu is hidden.
 * Hidden until the cart has at least one item — same gating as the desktop
 * .vcc-cart-item.has-items flag. */
.vcc-cart-mobile {
  display: none;
  align-items: center;
  margin-right: 18px;
  text-decoration: none;
  color: #fff;
}
@media (max-width: 991.98px) {
  .vcc-cart-mobile.has-items { display: inline-flex; }
}
.vcc-cart-mobile .vcc-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.vcc-cart-mobile .icon-cart {
  position: relative;
  top: 2px;
  font-size: 1.45rem;
  line-height: 1;
  display: inline-block;
  color: #fff;
}
.vcc-cart-mobile:hover .icon-cart,
.vcc-cart-mobile:focus .icon-cart { color: #C49E60; }
/* Reuse .vcc-cart-badge styling for the inner badge — already absolute, no
 * extra rules needed. */