.vdfc-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vdfc-bg, #1a1a1a);
  color: var(--vdfc-icon, #f6f1ea);
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid var(--vdfc-border, rgba(255, 255, 255, 0.85));
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 0 0 4px var(--vdfc-glow, rgba(255, 255, 255, 0.06));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vdfc-cart:hover,
.vdfc-cart:focus {
  color: var(--vdfc-icon, #f6f1ea);
  border-color: var(--vdfc-border, rgba(255, 255, 255, 0.85));
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 0 0 4px var(--vdfc-glow, rgba(255, 255, 255, 0.1));
}

.vdfc-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vdfc-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vdfc-badge, #d79a5c);
  border: 1.5px solid var(--vdfc-bg, #1a1a1a);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Floating placement: fixed to the viewport, position set inline
   via settings (bottom-right / bottom-left / top-right / top-left). */
.vdfc-cart--floating {
  position: fixed;
  z-index: 9999;
  bottom: 24px;
  right: 24px;
}

/* Inline placement (shortcode use): behaves like a normal element
   wherever it's dropped, no fixed positioning. */
.vdfc-cart--inline {
  position: static;
}

@media (max-width: 480px) {
  .vdfc-cart--floating {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-width: 2.5px;
  }

  .vdfc-cart--floating .vdfc-cart__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
  }

  /* Label hidden on mobile by default to keep the floating button
     compact and clearly circular — controllable from the dashboard
     via the "Show label on mobile" setting, which toggles the
     .vdfc-show-label-mobile class on the body. */
  .vdfc-cart--floating .vdfc-cart__label {
    display: none;
  }

  body.vdfc-show-label-mobile .vdfc-cart--floating {
    width: auto;
    height: auto;
    padding: 12px 16px;
    border-radius: 999px;
  }

  body.vdfc-show-label-mobile .vdfc-cart--floating .vdfc-cart__label {
    display: inline;
  }

  body.vdfc-show-label-mobile .vdfc-cart--floating .vdfc-cart__count {
    position: static;
    top: auto;
    right: auto;
  }
}