:root {
  --theme-primary: #ff0080;
  --theme-secondary: #ff0080;
  --theme-accent: #ffffff;
  --theme-gradient: linear-gradient(135deg, #ff0080 0%, #ff0080 100%);
  --theme-primary-rgb: 255, 0, 128;
  --theme-product-grid-bg: #ffbfdf;
  --page-bg-gradient: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
}

/* Theme-aware styles */
.header {
    background: var(--theme-gradient) !important;
}

/* Page background - shows behind any section that doesn't set its own
   background (e.g. Home's "Why Choose Us"). Was previously hardcoded purple
   directly in css/style.css with no admin control; now driven by the
   Page Background Color 1/2 pickers in Admin > Themes > Edit Theme. This
   rule's !important always wins over style.css's plain (non-!important)
   body rule regardless of stylesheet load order. */
body {
    background: var(--page-bg-gradient) !important;
    background-attachment: fixed !important;
}

.btn-primary {
    background: linear-gradient(145deg, var(--theme-primary), var(--theme-secondary)) !important;
    border: none !important;
}

.product-card {
    background: var(--theme-product-grid-bg) !important;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.1) !important;
}

.product-card:hover {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 8px 25px rgba(var(--theme-primary-rgb), 0.15) !important;
}