/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ---------- Sleek Purple/Black Overrides ---------- */

/* subtle radial glow behind the whole page for depth instead of flat black */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(157, 78, 221, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(157, 78, 221, 0.08), transparent);
  background-attachment: fixed;
}

/* thin glowing divider under the navbar instead of a flat border */
nav {
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
  box-shadow: 0 1px 30px -5px rgba(157, 78, 221, 0.35);
}

/* product / group cards: soften edges, add lift + glow on hover */
a.bg-card\/75 {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

a.bg-card\/75:hover {
  transform: translateY(-4px);
  border-color: rgba(157, 78, 221, 0.4) !important;
  box-shadow: 0 20px 40px -15px rgba(157, 78, 221, 0.35);
}

/* round the card image container + badges to match */
a.bg-card\/75 .relative.overflow-hidden {
  border-radius: 8px 8px 0 0;
}

/* primary accent buttons: subtle gradient + glow instead of flat fill */
.bg-accent-500 {
  background-image: linear-gradient(135deg, rgba(157, 78, 221, 1), rgba(120, 40, 200, 1));
}

.hover\:bg-accent-500:hover {
  background-image: linear-gradient(135deg, rgba(157, 78, 221, 1), rgba(120, 40, 200, 1));
  box-shadow: 0 8px 24px -8px rgba(157, 78, 221, 0.55);
}

/* accent-bordered buttons (e.g. "View Details") get a soft glow on hover */
.border-accent-500 {
  transition: box-shadow 200ms ease, transform 150ms ease;
}

.border-accent-500:hover {
  box-shadow: 0 0 20px -2px rgba(157, 78, 221, 0.5);
}

/* heading accent spans (e.g. hero title emphasis): gradient text instead of flat purple */
h1 .text-accent-500,
h2 .text-accent-500,
h3 .text-accent-500 {
  background-image: linear-gradient(135deg, #c084fc, #9d4edd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* thin purple-accented scrollbar for a more "designed" feel */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #050208;
}

::-webkit-scrollbar-thumb {
  background: rgba(157, 78, 221, 0.5);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 78, 221, 0.8);
}

/* selection highlight */
::selection {
  background: rgba(157, 78, 221, 0.4);
  color: #ffffff;
}