:root {
  --cart-primary: #0F172A;
  --cart-primary-hover: #1E293B;
  --cart-secondary: #2563EB;
  --cart-secondary-hover: #1D4ED8;
  --cart-accent: #059669;
  --cart-accent-subtle: #ECFDF5;
  --cart-bg-surface: #FFFFFF;
  --cart-bg-subtle: #F1F5F9;
  --cart-border-subtle: #E2E8F0;
  --cart-border-medium: #CBD5E1;
}

#shopBasketModal .modal-dialog {
  max-height: 90vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

#shopBasketModal .modal-content {
  max-height: 90vh;
  background-color: var(--cart-bg-surface);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

#shopBasketModal .modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background-color: var(--cart-bg-subtle);
}

.bg-primary {
  background-color: var(--cart-primary) !important;
}

.btn-primary {
  background-color: var(--cart-primary) !important;
  border-color: var(--cart-primary) !important;
}
.btn-primary:hover {
  background-color: var(--cart-primary-hover) !important;
  border-color: var(--cart-primary-hover) !important;
}

.btn-secondary {
  background-color: var(--cart-secondary) !important;
  border-color: var(--cart-secondary) !important;
}
.btn-secondary:hover {
  background-color: var(--cart-secondary-hover) !important;
  border-color: var(--cart-secondary-hover) !important;
}

.btn-accent {
  background-color: var(--cart-accent) !important;
  border-color: var(--cart-accent) !important;
}
.btn-accent:hover {
  background-color: #047857 !important;
  border-color: #047857 !important;
}

.bg-subtle {
  background-color: var(--cart-bg-subtle) !important;
}

.accent-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--cart-accent-subtle);
}

.quantity-control {
  background: #FFFFFF;
  border-color: var(--cart-border-subtle) !important;
}

.quantity-control button {
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none !important;
}

@media (max-width: 576px) {
  #shopBasketModal .modal-dialog {
    max-height: 96vh;
    margin: 2vh auto;
  }
  #shopBasketModal .modal-content {
    max-height: 96vh;
  }
  .cart-item-img {
    width: 50px;
    height: 50px;
  }
}