/* Product controls need their own dark palette; the light button fills otherwise
   remain almost white against the dark card surface. */
body.dark .product-card {
  background: #211e30;
  border-color: #39344b;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

body.dark .product-card:hover {
  border-color: #584d80;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
}

body.dark .product-info {
  background: #211e30;
}

body.dark .product-footer {
  border-top-color: #39344b;
}

body.dark .promo-btn {
  border: 1px solid #4a4169;
  background: #302a49;
  color: #c8bcff;
}

body.dark .promo-btn:hover {
  border-color: #806bea;
  background: #3a315d;
  color: #fff;
}

body.dark .ship-btn {
  border: 1px solid #806bea;
  background: linear-gradient(135deg, #735ee8, #5941cf);
  color: #fff;
  box-shadow: 0 8px 20px rgba(83, 61, 194, .24);
}

body.dark .ship-btn:hover {
  background: linear-gradient(135deg, #826ff0, #674fd9);
  box-shadow: 0 10px 24px rgba(91, 68, 207, .38);
}

body.dark .heart,
body.dark .badge {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(25, 21, 39, .82);
  color: #f7f4ff;
  backdrop-filter: blur(8px);
}

body.dark .heart:hover,
body.dark .heart.active {
  background: #382a42;
  color: #ff7898;
}

body.dark .profit-pill {
  border: 1px solid rgba(73, 203, 153, .22);
  background: rgba(38, 148, 107, .15);
  color: #78ddb7;
}

body.dark .add-btn,
body.dark .quick-add {
  background: #302a49;
  color: #c8bcff;
}

body.dark .product-actions button:focus-visible,
body.dark .heart:focus-visible {
  outline: 2px solid #a895ff;
  outline-offset: 2px;
}

body.dark .rating small,
body.dark .product-footer .price small {
  color: #aaa4bb;
}