/* ============================================================
   Plug and Save Solar – Brand Override Stylesheet
   Loads AFTER style.css and overrides the amber (Socket Solar)
   accent with sky-blue to give the PASS site a distinct look.
   ============================================================ */

/* ── Brand Colours ────────────────────────────────────────── */
:root {
  --accent:   #0ea5e9;   /* sky blue – electric / power-saving */
  --accent-2: #22c55e;   /* green – savings / eco */
}

/* ── Hero gradient (was amber, now sky-blue) ──────────────── */
.hero {
  background: radial-gradient(ellipse 80% 50% at 50% -10%,
              rgba(14,165,233,0.13), transparent 70%);
}
.hero-badge {
  background:   rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.30);
}

/* ── News section gradient ────────────────────────────────── */
.news-section {
  background: radial-gradient(ellipse 60% 40% at 50% 100%,
              rgba(14,165,233,0.06), transparent 70%) !important;
}

/* ── Filter chips ─────────────────────────────────────────── */
.chip {
  background:   rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.30);
  color: var(--accent);
}
.chip:hover { background: rgba(14,165,233,0.20); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary:hover { background: #0284c7; }
.btn-amazon:hover  { background: #0284c7; }

/* ── Product card hover ───────────────────────────────────── */
.product-card:hover { border-color: rgba(14,165,233,0.40); }

/* ── News card hover ──────────────────────────────────────── */
.news-card:hover    { border-color: rgba(14,165,233,0.30); }

/* ── News thumbnail placeholder ──────────────────────────── */
.news-thumb-placeholder {
  background: linear-gradient(135deg,
              rgba(14,165,233,0.10),
              rgba(34,197,94,0.10));
}

/* ── Affiliate notice ─────────────────────────────────────── */
.affiliate-notice {
  background:   rgba(14,165,233,0.06);
  border-color: rgba(14,165,233,0.15);
}

/* ── Sort / view active state ─────────────────────────────── */
.view-btn.active {
  background:   var(--accent);
  border-color: var(--accent);
}