:root {
  --theme-primary: #000000;
  --theme-secondary: #000000;
  --theme-accent: #6c757d;
  --theme-gradient: linear-gradient(135deg, #000000 0%, #000000 100%);
  --theme-primary-rgb: 0, 0, 0;
  --theme-product-grid-bg: #c0c0c0;
  --page-bg-gradient: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
}

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

.brand-title-section {
    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;
}