/* =====================================================================
 * Solar Connect — plug-in solar marketplace
 * Shared by plug-in-marketplace.html (catalog) and plug-in-kit.html (detail).
 *
 * The grid, cards, product detail layout, modal and quantity stepper all
 * reuse .ev-catalog / .ev-card / .product-detail / .sc-modal-* /
 * .qty-stepper from styles.css, so this page reads as the same product as
 * the EV charger catalog. Only what is specific to plug-in solar is here.
 * ===================================================================== */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- Compliance banner ------------------------------------------------
   The single most important element on these pages, and deliberately the
   first thing under the nav, above the hero copy. SB 868 is signed but
   does not take effect until 2027-01-01, and the gap between those two
   facts is exactly what a shopper arriving from a "plug-in solar is legal
   in California now" headline has wrong. */
.pm-flag { background:#fffaed; border-bottom:1px solid #f6e3b8; padding:14px 20px; }
.pm-flag__in { max-width:1120px; margin:0 auto; display:flex; align-items:flex-start;
               gap:12px; font-size:.88rem; line-height:1.5; color:#78350f; }
.pm-flag__mark { flex:0 0 auto; width:22px; height:22px; border-radius:50%;
                 background:var(--accent); color:#fff; font-weight:800; font-size:.78rem;
                 display:grid; place-items:center; margin-top:1px; }
.pm-flag__in strong { color:#111; }

/* ---- Hero -------------------------------------------------------------
   Warm cream gradient, same language as plug-in-solar.html and the
   SCE/SDG&E landing pages. A dark hero read as a different product. */
.pm-top { background:linear-gradient(135deg,#fffaed 0%,#fff 55%,#fef3d6 100%);
          border-bottom:4px solid var(--accent); padding:52px 20px 48px; }
.pm-top-in { max-width:880px; margin:0 auto; text-align:center; }
.pm-title { color:#111; font-size:clamp(1.95rem,4vw,2.7rem); font-weight:800;
            letter-spacing:-.025em; line-height:1.07; margin:0 0 18px; }
.pm-lede { font-size:1.06rem; line-height:1.65; color:var(--gray-600);
           max-width:660px; margin:0 auto; }
.pm-lede strong { color:#111; }
.pm-hero-cta { display:flex; align-items:center; justify-content:center; gap:16px;
               flex-wrap:wrap; margin:26px 0 0; }
.pm-hero-note { font-size:.84rem; color:var(--gray-600); }

.pm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
            gap:12px; margin-top:32px; text-align:left; }
.pm-stat { background:#fff; border:1px solid #f6e3b8; border-radius:var(--radius); padding:16px 18px; }
.pm-stat-n { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#111;
             line-height:1.1; font-variant-numeric:tabular-nums; }
.pm-stat-l { font-size:.77rem; color:var(--gray-600); margin-top:4px; line-height:1.4; }

/* ---- Catalog ---------------------------------------------------------- */
.pm-catalog { padding:56px 0 64px; }
.pm-catalog__header { max-width:720px; margin:0 auto 34px; text-align:center; }
.pm-catalog__h { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:#111;
                 letter-spacing:-.02em; margin:0 0 12px; }
.pm-catalog__sub { font-size:1rem; line-height:1.65; color:var(--gray-600); margin:0; }
.pm-catalog__count { font-size:.8rem; font-weight:700; color:var(--gray-600);
                     text-transform:uppercase; letter-spacing:.06em; margin-top:14px; }

/* Certification line. SB 868 requires certification as a plug-in
   photovoltaic system, so this is a legal attribute and not a feature
   bullet — it gets its own row rather than sitting in the spec list. */
.pm-card__cert { display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700;
                 color:#15803d; margin:0 0 10px; }
.pm-card__cert-mark { display:grid; place-items:center; width:15px; height:15px; flex:0 0 auto;
                      border-radius:50%; background:#15803d; color:#fff; font-size:.6rem; }
.pm-card__cert--pending { color:var(--gray-600); font-weight:600; font-style:italic; }
.pm-card__cert--pending .pm-card__cert-mark { display:none; }
.pm-card__cap { margin-top:12px; padding-top:10px; border-top:1px dashed var(--gray-200);
                font-size:.78rem; color:var(--gray-600); }

/* ---- Empty catalog ----------------------------------------------------
   The catalog ships with no rows on purpose (see the comment at the top of
   schema_plug_in_marketplace.sql), so this is the launch state, not an
   error. It has to carry its weight. */
.pm-grid--empty { display:block !important; }
.pm-empty { max-width:620px; margin:0 auto; text-align:center; background:#fffaed;
            border:1px solid #f6e3b8; border-radius:var(--radius); padding:40px 32px; }
.pm-empty__h { font-size:1.2rem; font-weight:800; color:#111; margin:0 0 12px; }
.pm-empty__p { font-size:.94rem; line-height:1.65; color:var(--gray-600); margin:0 0 22px; }

/* ---- Explainer strip -------------------------------------------------- */
.pm-how { background:var(--gray-50); padding:56px 0; border-top:1px solid var(--gray-200); }
.pm-how__h { text-align:center; font-size:clamp(1.4rem,3vw,1.85rem); font-weight:800;
             color:#111; letter-spacing:-.02em; margin:0 0 34px; }
.pm-how__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.pm-how__card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
                padding:24px; }
.pm-how__n { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
             font-weight:800; font-size:.85rem; display:grid; place-items:center; margin-bottom:14px; }
.pm-how__t { font-size:1rem; font-weight:800; color:#111; margin:0 0 8px; }
.pm-how__p { font-size:.88rem; line-height:1.6; color:var(--gray-600); margin:0; }
.pm-how__foot { text-align:center; margin-top:34px; font-size:.92rem; color:var(--gray-600); }

/* ---- Detail page ------------------------------------------------------ */
.pm-detail__cert { display:flex; align-items:center; gap:7px; font-size:.84rem; font-weight:700;
                   color:#15803d; margin:0 0 14px; }
.pm-detail__cap { font-size:.88rem; line-height:1.6; color:#78350f; background:#fffaed;
                  border:1px solid #f6e3b8; border-radius:var(--radius); padding:12px 14px;
                  margin:18px 0 22px; }
.pm-detail__note { font-size:.82rem; line-height:1.55; color:var(--gray-600); margin:14px 0 0;
                   max-width:48ch; }

/* ---- Modal extras ----------------------------------------------------- */
.pm-modal-note { background:#fffaed; border:1px solid #f6e3b8; border-radius:var(--radius);
                 padding:12px 14px; font-size:.82rem; line-height:1.55; color:#78350f;
                 margin:0 0 18px; }
.pm-modal-note strong { color:#111; }
.pm-cap-warn { background:#fef2f2; border:1px solid #fecaca; border-radius:var(--radius);
               padding:10px 12px; font-size:.8rem; line-height:1.5; color:#991b1b; margin:12px 0 0; }
.pm-err { color:#b91c1c; font-size:.85rem; margin-top:10px; }

@media (max-width:640px) {
  .pm-stats { grid-template-columns:repeat(2,1fr); }
  .pm-flag__in { font-size:.82rem; }
}