:root {
  --cart-primary: #435246;
  --cart-primary-hover: #344137;
  --cart-secondary: #7D8C7F;
  --cart-accent: #C47C5D;
  --cart-accent-hover: #AD694C;
  --cart-accent-soft: #F4EBE6;
  --cart-bg: #FBF9F5;
  --cart-bg-surface: #FFFFFF;
  --cart-bg-subtle: #F5F1EB;
  --cart-bg-tint: #EEF1EC;
  --cart-text-primary: #242A25;
  --cart-text-secondary: #576058;
  --cart-text-muted: #8A948C;
  --cart-text-on-dark: #FFFFFF;
  --cart-text-muted-on-dark: #D8DDD9;
  --cart-border-light: #E8E2D8;
  --cart-border-subtle: #F0ECE5;
  --cart-border-focus: #7D8C7F;
  --cart-card-bg: #FFFFFF;
  --cart-card-bg-alt: #F7F4EE;
  --cart-badge-bg: #E9EFEA;
  --cart-badge-text: #3D4E41;
}

#cartPopup.custom-cart-modal .modal-dialog {
  max-width: 520px;
  margin: 1.75rem auto;
  max-height: 90vh;
  display: flex;
}

#cartPopup.custom-cart-modal .modal-content {
  background-color: var(--cart-bg-surface);
  border: 1px solid var(--cart-border-light);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(36, 42, 37, 0.08);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#cartPopup.custom-cart-modal .modal-header {
  background-color: var(--cart-card-bg-alt);
  border-bottom: 1px solid var(--cart-border-light);
  padding: 1rem 1.25rem;
}

#cartPopup.custom-cart-modal .modal-title {
  color: var(--cart-text-primary);
  font-weight: 600;
}

#cartPopup.custom-cart-modal .text-accent {
  color: var(--cart-accent) !important;
}

#cartPopup.custom-cart-modal .modal-body.custom-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: calc(90vh - 160px);
}

#cartPopup.custom-cart-modal .cart-item-row {
  background-color: var(--cart-bg-subtle);
  border: 1px solid var(--cart-border-subtle);
  transition: border-color 0.2s ease;
}

#cartPopup.custom-cart-modal .cart-item-row:hover {
  border-color: var(--cart-border-light);
}

#cartPopup.custom-cart-modal .cart-item-thumb {
  width: 64px;
  height: 64px;
  background-color: var(--cart-bg-tint);
  border: 1px solid var(--cart-border-subtle);
}

#cartPopup.custom-cart-modal .cart-item-title {
  color: var(--cart-text-primary);
  font-size: 0.95rem;
}

#cartPopup.custom-cart-modal .cart-item-price {
  color: var(--cart-text-secondary);
}

#cartPopup.custom-cart-modal .cart-item-subtotal {
  color: var(--cart-text-primary);
  font-size: 0.95rem;
}

#cartPopup.custom-cart-modal .cart-qty-group .form-control {
  border-color: var(--cart-border-light);
  color: var(--cart-text-primary);
  background-color: var(--cart-bg-surface);
}

#cartPopup.custom-cart-modal .cart-qty-group .form-control:focus {
  border-color: var(--cart-border-focus);
  box-shadow: none;
}

#cartPopup.custom-cart-modal .cart-qty-group .btn-outline-secondary {
  border-color: var(--cart-border-light);
  color: var(--cart-text-secondary);
  background-color: var(--cart-bg-surface);
}

#cartPopup.custom-cart-modal .cart-qty-group .btn-outline-secondary:hover {
  background-color: var(--cart-bg-tint);
  color: var(--cart-text-primary);
  border-color: var(--cart-border-focus);
}

#cartPopup.custom-cart-modal .btn-accent-custom {
  background-color: var(--cart-accent);
  color: var(--cart-text-on-dark);
  border: none;
  padding: 0.6rem 1.25rem;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

#cartPopup.custom-cart-modal .btn-accent-custom:hover {
  background-color: var(--cart-accent-hover);
  color: var(--cart-text-on-dark);
}

#cartPopup.custom-cart-modal .btn-outline-custom {
  border: 1px solid var(--cart-secondary);
  color: var(--cart-text-primary);
  background-color: transparent;
  padding: 0.6rem 1.25rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#cartPopup.custom-cart-modal .btn-outline-custom:hover {
  background-color: var(--cart-bg-tint);
  border-color: var(--cart-primary);
  color: var(--cart-primary);
}

@media (max-width: 576px) {
  #cartPopup.custom-cart-modal .modal-dialog {
    margin: 0.5rem;
    max-height: 92vh;
  }
  #cartPopup.custom-cart-modal .modal-body.custom-modal-body {
    max-height: calc(92vh - 170px);
    padding: 0.75rem;
  }
  #cartPopup.custom-cart-modal .cart-item-row {
    flex-wrap: wrap;
  }
}