/* =========================================================
   RURAL ROOTS CORPORATION — MAIN STYLESHEET
   Design system: modern, responsive, brand-consistent
   ========================================================= */

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
  /* Brand colors — matched to Rural Roots logo (leafy vibrant green + black + gold accent) */
  --green: #087510;
  --green-deep: #005E14;
  --green-soft: #E8F0EA;
  --green-light: #C8E0CB;
  --gold: #F5B800;
  --gold-warm: #E88A1A;
  --gold-soft: #FFF3D1;
  --earth: #6B4423;
  --earth-soft: #F4EDE1;

  /* Neutrals */
  --ink: #1a1a1a;                  /* v2.5: was #1A2A20 (green-tinted). Rich black is the primary text/dark color now. */
  --ink-soft: #4a4a4a;             /* v2.5: was #3B4A3F (green-tinted). Softer black-gray now. */
  --muted: #6B7A6E;
  --border: #E5DDD0;
  --border-soft: #F0EBE0;
  --cream: #FAF7F0;
  --off-white: #F8F5EE;
  --white: #FFFFFF;
  --dark: #1a1a1a;                 /* v2.5: for dark section backgrounds (trust strip, CTA banners) */
  --dark-soft: #2a2a2a;            /* v2.5: charcoal for softer dark surfaces */

  /* Utilities */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow: 0 4px 12px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.12);
  --shadow-lg: 0 20px 40px rgba(20, 20, 20, 0.16);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --container: 1200px;
  --container-narrow: 900px;

  /* Type */
  --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Transitions */
  --t: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: #FBF9F3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--gold-warm); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem); }
h3 { font-size: clamp(1.35rem, 1.5vw + 0.5rem, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--sans); font-weight: 700; color: var(--muted); }

p { margin-bottom: 1rem; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-warm);
  margin-bottom: 0.75rem;
  display: inline-block;
}

.lead { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.7; }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.25rem; }
section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
section.tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }

.section-header { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3.5rem); }
.section-header p { color: var(--ink-soft); }

.bg-cream { background: var(--cream); }
.bg-green { background: var(--green-deep); color: var(--white); }
.bg-green h1, .bg-green h2, .bg-green h3, .bg-green h4 { color: var(--white); }
.bg-green p { color: rgba(255, 255, 255, 0.85); }
.bg-green-soft { background: var(--green-soft); }
.bg-gold-soft { background: var(--gold-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--t);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-warm); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-warm); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-deep); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--gold); color: var(--ink); }
.btn-lg { padding: 1.1rem 2.25rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--t);
}
.site-header.scrolled { box-shadow: 0 2px 12px rgba(20, 42, 32, 0.08); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  max-width: var(--container);
  margin: 0 auto;
  gap: 2rem;
}
.nav-logo { display: block; flex-shrink: 0; }
.nav-logo img, .nav-logo svg { height: 56px; width: auto; display: block; }
.nav-menu > li > a { white-space: nowrap; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  flex-wrap: nowrap;
}
.nav-menu a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  padding: 0.5rem 0;
}
.nav-menu a:hover { color: var(--green); }
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width var(--t);
}
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green-deep);
  transition: all var(--t);
  border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-header.menu-open .nav-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    padding: 1.5rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    align-items: flex-start;
  }
  .site-header.menu-open .nav-cta {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: var(--white);
    border-top: 1px solid var(--border-soft);
    margin-top: 260px;
    justify-content: center;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--off-white) 0%, var(--cream) 100%);
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-content {
  position: relative;
  max-width: 720px;
  z-index: 1;
}
.hero h1 {
  margin-bottom: 1.5rem;
}
.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold-warm);
  margin-bottom: 1rem;
  font-weight: 500;
}
.hero-lead {
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.35rem);
  color: var(--ink-soft);
  margin-bottom: 2rem;
  line-height: 1.6;
}
.hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
  background: var(--green-soft);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* Page hero (smaller than home hero) */
.page-hero {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(245, 184, 0, 0.15) 0%, transparent 50%);
  pointer-events: none;
}
.page-hero .eyebrow { color: var(--gold-warm); }
.page-hero h1 { color: var(--ink); position: relative; }
.page-hero p { color: var(--ink-soft); max-width: 640px; margin: 1rem auto 0; position: relative; }

/* ---------- Divisions grid (Home) ---------- */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.division-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
}
.division-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.division-card-image {
  aspect-ratio: 16 / 10;
  background: var(--green-soft);
  overflow: hidden;
  position: relative;
}
.division-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.division-card:hover .division-card-image img { transform: scale(1.05); }
.division-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.division-card h3 { color: var(--ink); margin-bottom: 0.75rem; }
.division-card p { flex: 1; margin-bottom: 1.25rem; }
.division-card .btn { align-self: flex-start; }

/* ---------- Feature blocks (Why Choose) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}
.feature {
  text-align: center;
  padding: 1.5rem;
}
.feature-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  background: var(--gold-soft);
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all var(--t);
}
.feature:hover .feature-icon { background: var(--gold); transform: scale(1.08); }
.feature-icon svg { width: 36px; height: 36px; }
.feature h3 { margin-bottom: 0.75rem; font-size: 1.25rem; }

/* ---------- Solar tier cards ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.tier-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.tier-card.featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--white) 30%);
}
.tier-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: var(--radius-full);
}
.tier-label {
  font-size: 0.75rem;
  color: var(--gold-warm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tier-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.15;
}
.tier-best-for {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  font-style: italic;
}
.tier-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.tier-specs li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border);
  color: var(--ink-soft);
  font-size: 0.95rem;
  position: relative;
  padding-left: 1.75rem;
}
.tier-specs li:last-child { border-bottom: none; }
.tier-specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 16px;
  height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* ---------- Service cards (Customized Services) ---------- */
.service-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
.service-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.service-icon {
  width: 56px;
  height: 56px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { color: var(--ink); }
.service-card ul { list-style: none; padding: 0; margin: 0; }
.service-card ul li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.service-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

/* ---------- Journey steps ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  counter-reset: step;
}
.journey-step {
  text-align: center;
  position: relative;
}
.journey-step::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  background: var(--green);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 700;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(31, 95, 63, 0.25);
}
.journey-step h4 { color: var(--ink); margin-bottom: 0.5rem; }
.journey-step p { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonial {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
}
.testimonial-quote { font-style: italic; color: var(--ink-soft); margin-bottom: 1rem; line-height: 1.65; }
.testimonial-quote::before {
  content: '“';
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--gold);
  line-height: 0.5;
  display: inline-block;
  vertical-align: -0.35em;
  margin-right: 0.15em;
}
.testimonial-author { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.testimonial-location { color: var(--muted); font-size: 0.85rem; }

/* ---------- Monthly deals ---------- */
.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.deal-card {
  background: var(--white);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  transition: all var(--t);
  position: relative;
}
.deal-card:hover { background: var(--gold-soft); transform: translateY(-2px); }
.deal-badge {
  display: inline-block;
  background: var(--gold-warm);
  color: var(--white);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.deal-card h4 { color: var(--ink); margin-bottom: 0.5rem; }
.deal-card p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.deal-card em { color: var(--gold-warm); font-style: italic; font-weight: 500; }

/* ---------- Forms ---------- */
.form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-field label .req { color: var(--gold-warm); }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
  font-size: 1rem;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 95, 63, 0.12);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.form-success {
  background: var(--green-soft);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--green);
}
.form-error {
  background: #FDE8E8;
  color: #9B2222;
  border-radius: var(--radius);
  padding: 1rem;
  border: 1px solid #E88A8A;
  margin-bottom: 1rem;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 60%, #2C7A50 100%);
  color: var(--white);
  padding: clamp(3rem, 5vw, 5rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(245, 184, 0, 0.2) 0%, transparent 50%);
}
.cta-banner .container { position: relative; }
.cta-banner h2 { color: var(--white); margin-bottom: 1rem; }
.cta-banner p { color: rgba(255, 255, 255, 0.9); font-size: 1.15rem; max-width: 600px; margin: 0 auto 2rem; }

/* ---------- Value list (About) ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.value {
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
}
.value-letter {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.value h4 { color: var(--ink); margin-bottom: 0.5rem; }
.value p { font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-deep);
  color: rgba(255, 255, 255, 0.9);
  padding: clamp(3rem, 5vw, 4rem) 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand > img, .footer-brand > svg {
  height: 88px;
  width: auto;
  margin-bottom: 1rem;
  background: var(--white);
  padding: 8px 12px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.footer-brand p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.footer-col h5 {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  transition: color var(--t);
}
.footer-col a:hover { color: var(--gold); }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
}
.footer-contact svg { flex-shrink: 0; margin-top: 4px; color: var(--gold); }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-social a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  transition: all var(--t);
}
.footer-social a:hover { background: var(--gold); color: var(--ink); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.6); }
.footer-bottom a:hover { color: var(--gold); }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: all var(--t);
  color: white;
  animation: waPulse 2.5s infinite;
}
.wa-float:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
  color: white;
}
.wa-float svg { width: 32px; height: 32px; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-4 { margin-top: 3rem; }
.mb-4 { margin-bottom: 3rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto;
  max-width: 200px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
}
.divider-icon { color: var(--gold); }

.badge {
  display: inline-block;
  background: var(--green-soft);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}
.badge-gold { background: var(--gold-soft); color: var(--gold-warm); }

/* Fade-in on scroll — kept as no-op class so pages never risk hidden content for bots or slow JS.
   Content is always visible; scroll interactions still get the .visible class added for future animation hooks. */
.fade-in { opacity: 1; transform: none; }

/* =========================================================
   HERO SLIDER (home page)
   ========================================================= */
.hero-slider {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--green-soft);
  isolation: isolate;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 8s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity 1s ease, transform 8s linear;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slide::after {
  /* subtle gradient at bottom for depth */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.35), transparent);
  pointer-events: none;
}
.hero-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-slider-dot {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
  padding: 0;
}
.hero-slider-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-slider-dot.active {
  background: var(--gold);
  width: 48px;
}
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  border: none;
  transition: all var(--t);
  opacity: 0;
}
.hero-slider:hover .hero-slider-arrow { opacity: 1; }
.hero-slider-arrow:hover { background: var(--gold); transform: translateY(-50%) scale(1.08); }
.hero-slider-arrow.prev { left: 12px; }
.hero-slider-arrow.next { right: 12px; }
.hero-slider-arrow svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .hero-slider-arrow { opacity: 1; width: 38px; height: 38px; background: rgba(255,255,255,0.85); }
}

/* =========================================================
   TESTIMONIALS CAROUSEL
   ========================================================= */
.testimonial-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.testimonial-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1.5rem;
  padding: 0.5rem 0.25rem 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track .testimonial {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
  padding: 2.25rem 2rem;
  border-left: none;
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}
.testimonial-track .testimonial-quote {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.testimonial-dots {
  display: flex;
  gap: 0.5rem;
}
.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: transparent;
  cursor: pointer;
  transition: all var(--t);
  padding: 0;
}
.testimonial-dot:hover { background: var(--green-soft); }
.testimonial-dot.active {
  background: var(--green);
  transform: scale(1.2);
}
.testimonial-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--green);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--t);
}
.testimonial-arrow:hover { background: var(--green); color: var(--white); border-color: var(--green); transform: scale(1.05); }
.testimonial-arrow svg { width: 18px; height: 18px; }

/* =========================================================
   SIDE DRAWER MOBILE MENU
   ========================================================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 42, 32, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 200;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--white);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(20, 42, 32, 0.2);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.drawer-header img { height: 56px; width: auto; display: block; }
.drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  transition: all var(--t);
}
.drawer-close:hover { background: var(--gold); transform: rotate(90deg); }
.drawer-close svg { width: 18px; height: 18px; }
.drawer-nav {
  flex: 1;
  padding: 1rem 0;
  list-style: none;
}
.drawer-nav li {
  border-bottom: 1px solid var(--border-soft);
}
.drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.05rem;
  transition: all var(--t);
}
.drawer-nav a:hover,
.drawer-nav a.active {
  background: var(--cream);
  color: var(--green);
  padding-left: 1.75rem;
}
.drawer-nav a.active {
  border-left: 3px solid var(--gold);
  padding-left: calc(1.5rem - 3px);
}
.drawer-nav a::after {
  content: '→';
  color: var(--gold);
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
  transform: translateX(-6px);
}
.drawer-nav a:hover::after { opacity: 1; transform: translateX(0); }
.drawer-cta {
  padding: 1.5rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--cream);
}
.drawer-cta .btn { justify-content: center; width: 100%; }
.drawer-social {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border-soft);
  background: var(--cream);
}
.drawer-social a {
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  transition: all var(--t);
}
.drawer-social a:hover { background: var(--green); color: var(--white); border-color: var(--green); }
.drawer-social svg { width: 16px; height: 16px; }

/* Hide old dropdown menu-open behavior — drawer now handles mobile */
@media (max-width: 900px) {
  .site-header.menu-open .nav-menu,
  .site-header.menu-open .nav-cta {
    display: none;
  }
}

/* Prevent scroll when drawer open */
body.drawer-open { overflow: hidden; }

/* =========================================================
   FOOTER — Ezy Web Pro credit
   ========================================================= */
/* =========================================================
   HERO — FULL-BLEED BACKGROUND SLIDER (home)
   Each slide has its own background image + text overlay
   Smooth cross-fade + slow Ken Burns zoom on active + text slide-up
   ========================================================= */
.hero-fullbleed {
  position: relative;
  width: 100%;
  min-height: min(720px, 85vh);
  overflow: hidden;
  background: var(--green-deep);
  isolation: isolate;
}
@media (max-width: 768px) {
  .hero-fullbleed { min-height: min(640px, 92vh); }
}

.hero-full-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
  z-index: 1;
}
.hero-full-slide > .container {
  width: 100%;
  flex: 1 1 auto;
}
.hero-full-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1s ease, visibility 0s;
  z-index: 2;
}

/* Background image behind everything */
.hero-full-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 8s ease-out;
  z-index: -2;
}
.hero-full-slide.active .hero-full-bg {
  transform: scale(1.12); /* slow Ken Burns zoom while visible */
}

/* Dark overlay for text legibility — black, lighter on the right so image shows through */
.hero-full-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.2) 65%,
      rgba(0, 0, 0, 0.05) 100%
    );
  z-index: -1;
}
@media (max-width: 768px) {
  .hero-full-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 100%);
  }
}

/* Text content — slides in from below when active */
.hero-full-content {
  position: relative;
  z-index: 3;
  max-width: 640px;
  color: var(--white);
  padding: clamp(7rem, 15vw, 9rem) 0 clamp(2rem, 5vw, 4rem);
}
.hero-full-slide .hero-full-content > * {
  opacity: 1;
  transform: none;
}
/* Legacy slider fade-in retained only when there are MULTIPLE slides — no-op for single hero */

.hero-full-content .eyebrow {
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
}
.hero-full-content h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 5vw + 1rem, 4.25rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 20px rgba(0, 20, 10, 0.4);
  letter-spacing: -0.02em;
}
.hero-full-content .hero-accent {
  color: var(--gold);
  font-style: italic;
}
.hero-full-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.25rem);
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 560px;
  text-shadow: 0 1px 10px rgba(0, 20, 10, 0.3);
}

/* Nav arrows */
.hero-full-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--t);
  opacity: 0.6;
}
.hero-fullbleed:hover .hero-full-arrow { opacity: 1; }
.hero-full-arrow:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-50%) scale(1.08); }
.hero-full-arrow.prev { left: clamp(0.75rem, 2vw, 1.5rem); }
.hero-full-arrow.next { right: clamp(0.75rem, 2vw, 1.5rem); }
.hero-full-arrow svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .hero-full-arrow {
    width: 42px;
    height: 42px;
    opacity: 1;
    top: auto;
    bottom: clamp(3rem, 6vw, 4rem);
    transform: none;
  }
  .hero-full-arrow:hover { transform: scale(1.08); }
  .hero-full-arrow svg { width: 18px; height: 18px; }
}

/* Dots — progress-bar style */
.hero-full-dots {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}
.hero-full-dot {
  width: 60px;
  height: 3px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease;
}
.hero-full-dot:hover { background: rgba(255, 255, 255, 0.5); }
.hero-full-dot span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
}
.hero-full-dot.active span {
  animation: heroDotFill 5500ms linear forwards;
}
@keyframes heroDotFill {
  from { width: 0; }
  to { width: 100%; }
}
@media (max-width: 640px) {
  .hero-full-dot { width: 44px; }
}

/* Scroll cue at bottom */
.hero-fullbleed::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60px;
  background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
  pointer-events: none;
  z-index: 5;
}

/* =========================================================
   DROPDOWN MEGA-MENUS (desktop nav)
   ========================================================= */
.nav-menu li { position: relative; }
.nav-menu a.has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-menu a.has-dropdown::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform var(--t);
  order: 2;
}
.nav-menu li:hover a.has-dropdown::before,
.nav-menu li:focus-within a.has-dropdown::before {
  transform: rotate(-180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(20, 42, 32, 0.15);
  border: 1px solid var(--border-soft);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  list-style: none;
  z-index: 110;
}
.nav-menu li:hover > .nav-dropdown,
.nav-menu li:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
/* Invisible bridge so mouse can travel from parent to dropdown without closing */
.nav-menu li:hover > .nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--ink-soft);
  font-size: 0.925rem;
  font-weight: 500;
  transition: all var(--t);
  white-space: nowrap;
}
.nav-dropdown a::after { display: none; } /* remove the underline effect */
.nav-dropdown a:hover {
  background: var(--green-soft);
  color: var(--ink);
  padding-left: 1.5rem;
}
.nav-dropdown .dropdown-heading {
  padding: 0.4rem 1.25rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-warm);
  margin-top: 0.25rem;
}
.nav-dropdown .dropdown-heading:first-child { margin-top: 0; }
.nav-dropdown hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 0.4rem 0;
}
.nav-dropdown .dropdown-cta {
  margin: 0.5rem 1rem 0.25rem;
  padding: 0.55rem 0.75rem !important;
  background: var(--green);
  color: var(--white) !important;
  text-align: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav-dropdown .dropdown-cta:hover {
  background: var(--gold);
  color: var(--ink) !important;
  padding-left: 0.75rem !important;
}

/* =========================================================
   MOBILE DRAWER — expandable sub-menus
   ========================================================= */
.drawer-nav-item.has-submenu > .drawer-nav-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-soft);
}
.drawer-nav-item.has-submenu > .drawer-nav-row > a {
  flex: 1;
  border-bottom: none;
}
.drawer-nav-item.has-submenu > .drawer-nav-row {
  border-bottom: 1px solid var(--border-soft);
}
.drawer-nav-item.has-submenu {
  border-bottom: none;
}
.drawer-submenu-toggle {
  width: 56px;
  border: none;
  border-left: 1px solid var(--border-soft);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all var(--t);
  position: relative;
}
.drawer-submenu-toggle::before,
.drawer-submenu-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.2, 1), background 0.2s ease;
}
.drawer-submenu-toggle::before {
  /* horizontal bar */
  transform: translate(-50%, -50%);
}
.drawer-submenu-toggle::after {
  /* vertical bar → hides when expanded to make a minus sign */
  transform: translate(-50%, -50%) rotate(90deg);
}
.drawer-submenu-toggle[aria-expanded="true"] {
  color: var(--gold-warm);
}
.drawer-submenu-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.drawer-submenu-toggle[aria-expanded="true"]::before {
  transform: translate(-50%, -50%) rotate(180deg);
}
.drawer-submenu-toggle:hover {
  background: var(--green-soft);
  color: var(--green);
}
/* Hide the SVG we shipped in the HTML — CSS icon replaces it */
.drawer-submenu-toggle svg { display: none; }
.drawer-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}
.drawer-submenu.open { max-height: 800px; }
.drawer-submenu li { border-bottom: 1px solid rgba(0,0,0,0.05); }
.drawer-submenu li:last-child { border-bottom: none; }
.drawer-submenu a {
  display: block;
  padding: 0.8rem 1.5rem 0.8rem 2.75rem;
  color: var(--ink-soft);
  font-size: 0.925rem;
  font-weight: 500;
  transition: all var(--t);
  border-bottom: none;
}
.drawer-submenu a:hover {
  background: var(--white);
  color: var(--ink);
  padding-left: 3rem;
}
.drawer-submenu a::after { content: ''; }
.drawer-submenu-heading {
  padding: 0.7rem 1.5rem 0.3rem 2.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-warm);
}

/* Anchor jumps offset for sticky header — sections don't land under the nav */
section[id], article[id] { scroll-margin-top: 100px; }

/* =========================================================
   DEALS PAGE — masonry-ish grid of deal images
   ========================================================= */
.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.deal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all var(--t);
  display: block;
  border: 1px solid var(--border-soft);
  position: relative;
}
.deal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(20, 42, 32, 0.15);
  border-color: var(--gold);
}
.deal-card::after {
  content: '💬 Tap to claim';
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--white);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
}
.deal-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.deal-card img {
  width: 100%;
  height: auto;
  display: block;
}
.deals-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--muted);
  font-style: italic;
}
.deals-empty {
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--cream);
  border-radius: var(--radius-lg);
  max-width: 600px;
  margin: 0 auto;
}
.deals-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  background: var(--gold-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-warm);
}
.deals-empty-icon svg { width: 40px; height: 40px; }
.deals-empty h3 { margin-bottom: 0.75rem; color: var(--ink); }
.deals-empty p { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* =========================================================
   ABOUT — R.O.O.T.S. letter badges + Community cards
   ========================================================= */
.letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 2rem;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(8, 117, 16, 0.25);
}

.community-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(20, 42, 32, 0.08);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--ink);
  border: 1px solid var(--border-soft);
  height: 100%;
}
.community-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(20, 42, 32, 0.15);
  border-color: var(--gold);
  color: var(--ink);
}
.community-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--green-soft);
}
.community-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.community-card:hover .community-card-image img {
  transform: scale(1.05);
}
.community-card-body { padding: 1.75rem 1.5rem; }
.community-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-warm);
  margin-bottom: 0.75rem;
}
.community-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
  line-height: 1.3;
}
.community-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.community-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--green);
  transition: gap var(--t);
}
.community-card:hover .community-cta { gap: 0.85rem; color: var(--gold-warm); }

/* Page hero — consistent style for inner pages */
.page-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
  background: linear-gradient(180deg, var(--cream) 0%, transparent 100%);
  text-align: center;
}
.page-hero .container-narrow, .page-hero .container { text-align: center; }
.page-hero h1 {
  max-width: 900px;
  margin: 0.5rem auto 1.5rem;
}
.page-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1.7;
}

.tight { padding: 1.5rem 0; }

/* =========================================================
   v2.0 — E-COMMERCE HEADER (Search, Account, Cart icons)
   ========================================================= */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.nav-tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ink);
  transition: all var(--t);
  position: relative;
  cursor: pointer;
  border: none;
}
.nav-tool-btn:hover { background: var(--green-soft); color: var(--green); }
.nav-tool-btn svg { width: 20px; height: 20px; }
.nav-tool-btn .badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--gold-warm);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
@media (max-width: 900px) {
  /* v3.2 B5: mobile-friendly nav tools — show cart + account, hide search */
  .nav-tools { display: flex; gap: 0; margin-right: 0.5rem; }
  .nav-tools .header-search-btn { display: none; }
  .nav-tools .account-dropdown { display: block; }
  .nav-tools .account-dropdown .nav-tool-btn { padding: 6px; }
  .nav-tools .nav-tool-btn { width: 36px; height: 36px; }
  .nav-tools .nav-tool-btn svg { width: 20px; height: 20px; }
  .nav-cta { display: none; }
}

/* =========================================================
   v2.0 — MOBILE ACTION BAR (fixed bottom)
   ========================================================= */
.mobile-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border-soft);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  z-index: 90;
  box-shadow: 0 -4px 16px rgba(20, 42, 32, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 900px) {
  .mobile-action-bar { display: grid; }
  body { padding-bottom: 68px; }
}
.mab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  gap: 3px;
  transition: color var(--t);
  text-decoration: none;
}
.mab-item svg { width: 20px; height: 20px; }
.mab-item:hover, .mab-item.active { color: var(--green); }
.mab-item.primary {
  color: var(--white);
  background: var(--green);
}
.mab-item.primary:hover { background: var(--green-deep); color: var(--white); }
.mab-item.whatsapp {
  color: var(--white);
  background: #25D366;
}
.mab-item.whatsapp:hover { background: #1EA653; color: var(--white); }

/* Hide WhatsApp float when mobile action bar is showing so they don't stack */
@media (max-width: 900px) {
  .wa-float { display: none; }
}

/* =========================================================
   v2.0 — TRUST STRIP (below hero)
   ========================================================= */
.trust-strip {
  background: var(--dark);
  color: var(--white);
  padding: 1rem 0;
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.trust-item svg { width: 18px; height: 18px; color: var(--gold); }
.trust-item::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 0.5rem;
}
@media (max-width: 640px) {
  .trust-strip-inner { flex-direction: column; gap: 0.6rem; }
}

/* =========================================================
   v2.0 — PACKAGE CARD (solar packages, AC BTUs)
   ========================================================= */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.package-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: all var(--t);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20, 42, 32, 0.12);
  border-color: var(--gold);
}
.package-card.featured {
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--white) 40%);
}
.package-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: 12px;
  right: -32px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 40px;
  transform: rotate(35deg);
}
.package-eyebrow {
  color: var(--gold-warm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}
.package-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.package-tagline {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.package-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.package-specs li {
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.95rem;
}
.package-specs li:last-child { border-bottom: none; }
.package-specs .spec-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.package-support {
  margin: 0.5rem 0 1.5rem;
}
.package-support-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.package-support-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.package-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* =========================================================
   v2.0 — CARE PLAN CARDS
   ========================================================= */
.care-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.care-plan-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 2px solid var(--border-soft);
  transition: all var(--t);
}
.care-plan-card.platinum {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  color: var(--white);
  border-color: var(--gold);
}
.care-plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.care-plan-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--green-soft);
  color: var(--green);
  margin-bottom: 1rem;
}
.care-plan-card.platinum .care-plan-badge {
  background: var(--gold);
  color: var(--ink);
}
.care-plan-card h3 {
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.care-plan-card.platinum h3 { color: var(--white); }
.care-plan-card > p {
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.care-plan-card.platinum > p { color: rgba(255,255,255,0.85); }
.care-plan-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.care-plan-includes li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.5;
}
.care-plan-includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--gold);
  font-weight: 700;
}

/* =========================================================
   v2.0 — PRODUCT CARDS (marketplace, catalog listings)
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 42, 32, 0.12);
  border-color: var(--gold);
}
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}
.product-image {
  aspect-ratio: 1 / 1;
  background: var(--green-soft);
  overflow: hidden;
}
.product-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-image img { transform: scale(1.05); }
.product-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
}
.product-category {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-warm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-name {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.3;
  min-height: 2.6em;
}
.product-spec {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.product-price {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.product-price-old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.9rem;
}
.product-stock {
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
}
.product-stock.low { color: var(--gold-warm); }
.product-stock.out { color: #B71C1C; }
.product-actions {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.product-actions .btn { flex: 1; min-width: 100px; padding: 0.55rem 0.75rem; font-size: 0.85rem; }

/* Product carousel — horizontal scroll on mobile */
.product-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.product-carousel::-webkit-scrollbar { display: none; }

/* =========================================================
   v2.0 — FORMS (conditional fields, file upload, sections)
   ========================================================= */
.form-section {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-soft);
}
.form-section:first-of-type { border-top: none; padding-top: 0; }
.form-section-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-warm);
  font-weight: 700;
  margin-bottom: 1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.form-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-field label .req { color: #B71C1C; }
.form-field .hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="url"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.form-field textarea { resize: vertical; min-height: 90px; }

/* File upload — custom styled */
.file-upload {
  position: relative;
  padding: 1.25rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--cream);
  text-align: center;
  transition: all var(--t);
  cursor: pointer;
}
.file-upload:hover { border-color: var(--green); background: var(--green-soft); }
.file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file-upload-icon {
  width: 40px; height: 40px;
  background: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 0.5rem;
  color: var(--green);
}
.file-upload-icon svg { width: 20px; height: 20px; }
.file-upload-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.file-upload-text strong { color: var(--ink); }
.file-upload-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Checkbox / radio groups */
.checkbox-group, .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.checkbox-group label, .radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
}
.checkbox-group input, .radio-group input {
  accent-color: var(--green);
  width: 18px; height: 18px;
}

/* Conditional field container — hidden by default, shown when JS toggles */
.conditional-field { display: none; }
.conditional-field.show { display: block; animation: fadeSlideDown 0.3s ease; }
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Two-column form layout for long forms */
.form-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 900px) { .form-two-col { grid-template-columns: 1fr; } }

/* Reference number display in success */
.success-reference {
  background: var(--gold-soft);
  border: 1px dashed var(--gold);
  padding: 1rem;
  border-radius: var(--radius-sm);
  text-align: center;
  margin: 1rem 0;
}
.success-reference-label {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.success-reference-code {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.1em;
}

/* =========================================================
   v2.0 — HOMEPAGE — 12 SECTIONS
   ========================================================= */
.home-hero-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Section 2: 4 division cards */
.division-4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1100px) { .division-4-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .division-4-grid { grid-template-columns: 1fr; } }
.division-4-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid var(--border-soft);
  transition: all var(--t);
  display: flex;
  flex-direction: column;
}
.division-4-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.division-4-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.division-4-icon svg { width: 32px; height: 32px; }
.division-4-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.division-4-card p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1.25rem; flex: 1; }
.division-4-card .btn-group {
  flex-direction: column;
  gap: 0.4rem;
}
.division-4-card .btn { width: 100%; font-size: 0.85rem; padding: 0.55rem; }

/* Community impact home cards */
.home-community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .home-community-grid { grid-template-columns: 1fr; } }

/* Projects gallery */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 1rem;
}
@media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .projects-grid { grid-template-columns: 1fr; } }
.project-tile {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--green-soft);
}
.project-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-tile:hover img { transform: scale(1.08); }
.project-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
  opacity: 0;
  transition: opacity var(--t);
}
.project-tile:hover::after { opacity: 1; }
.project-tile .project-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--t);
}
.project-tile:hover .project-caption { opacity: 1; transform: translateY(0); }
.project-tile.large { grid-row: span 2; }

/* =========================================================
   v2.0 — AC BTU cards
   ========================================================= */
.ac-tier {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--border-soft);
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.ac-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.ac-btu {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 2.75rem;
  color: var(--green);
  line-height: 1;
}
.ac-btu-unit {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.35rem;
}
.ac-tier h4 { margin: 1rem 0 0.5rem; font-size: 1.1rem; }
.ac-tier > p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1rem; }
.ac-tier ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.25rem;
  text-align: left;
}
.ac-tier ul li {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.3rem 0 0.3rem 1.25rem;
  position: relative;
}
.ac-tier ul li::before {
  content: '•';
  position: absolute;
  left: 0.35rem;
  color: var(--gold);
}
.ac-tier .btn-group {
  margin-top: auto;
  flex-direction: column;
  gap: 0.4rem;
}
.ac-tier .btn { font-size: 0.85rem; padding: 0.55rem; }

/* =========================================================
   v2.0 — IRRIGATION product size chips
   ========================================================= */
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.size-chip {
  background: var(--green-soft);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.size-chip.gold {
  background: var(--gold-soft);
  color: var(--gold-warm);
}
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 1rem;
}
.free-badge svg { width: 16px; height: 16px; }

/* =========================================================
   v2.0 — Support pages / FAQ accordion
   ========================================================= */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: all var(--t);
}
.faq-item:hover { border-color: var(--green); }
.faq-item summary {
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform var(--t);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] { border-color: var(--gold); }
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Grouped FAQ heading */
.faq-group-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-warm);
  font-weight: 700;
  margin: 2rem 0 1rem;
}
.faq-group-heading:first-child { margin-top: 0; }

/* Info card blocks (for support pages) */
.info-block {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  margin-bottom: 1rem;
}
.info-block h4 { color: var(--ink); margin-bottom: 0.5rem; }
.info-block p { color: var(--ink-soft); line-height: 1.7; }

/* Icon list */
.icon-list {
  list-style: none;
  padding: 0;
}
.icon-list li {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
}
.icon-list li:last-child { border-bottom: none; }
.icon-list .icon-list-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.icon-list .icon-list-icon svg { width: 20px; height: 20px; }
.icon-list h5 { margin-bottom: 0.25rem; color: var(--ink); }
.icon-list p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* =========================================================
   v2.0 — Global small tweaks
   ========================================================= */
.text-white { color: var(--white); }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.container-narrow-lg { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; }

/* Search modal */
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 42, 32, 0.65);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 15vh 1rem 0;
}
.search-modal.open { display: flex; }
.search-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.search-panel input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1.1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}
.search-panel input:focus { border-color: var(--green); }
.search-hint { margin-top: 1rem; color: var(--muted); font-size: 0.85rem; }
.search-suggestions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.search-suggestions a {
  padding: 6px 12px;
  background: var(--cream);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  color: var(--ink);
  border: 1px solid var(--border-soft);
}
.search-suggestions a:hover { background: var(--green); color: var(--white); }

/* =========================================================
   v2.2 — Fix Rosie chatbot bubble overlap with mobile action bar
   On mobile the fixed action bar is 68px tall — push the bubble
   and panel up so they don't sit on top of the Call button.
   ========================================================= */
@media (max-width: 900px) {
}
/* v3.3: Rosie sits ABOVE the WhatsApp float on desktop (wa-float bottom:24px)
   and above the mobile action bar on mobile. Placed OUTSIDE any media query. */
#ezyr-bubble { bottom: 104px !important; right: 24px !important; }
#ezyr-panel  { bottom: 184px !important; right: 24px !important; max-height: min(500px, calc(100vh - 200px)) !important; }
@media (max-width: 900px) {
  #ezyr-bubble { bottom: 100px !important; right: 16px !important; }
  #ezyr-panel  { bottom: 180px !important; right: 16px !important; }
}

/* =========================================================
   v2.2 — 2-PER-ROW PRODUCT GRID
   Bigger, more prominent product cards for home + marketplace.
   Desktop: 2 columns. Mobile: 1 column (2 tiny cards look worse).
   ========================================================= */
.product-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Make the cards feel more premium at 2-per-row */
.product-card { border-radius: var(--radius-lg); }
.product-image { aspect-ratio: 4 / 3; }
.product-body { padding: 1.5rem 1.5rem 1.25rem; gap: 0.5rem; }
.product-name { font-size: 1.2rem; min-height: 0; }
.product-price { font-size: 1.6rem; }
.product-actions .btn { padding: 0.7rem 0.9rem; font-size: 0.9rem; }

/* Ezy Cart flash toast override to match RR palette */
.ezy-flash {
  position: fixed !important;
  bottom: 100px !important;
  left: 50% !important;
  transform: translateX(-50%);
  background: var(--green-deep) !important;
  color: #fff !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: var(--radius-full) !important;
  z-index: 200 !important;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
@media (max-width: 900px) { .ezy-flash { bottom: 170px !important; } }

/* =========================================================
   v2.3 — STOREFRONT PAGES (Shop, Cart, Product, Checkout, OC)
   ========================================================= */

/* ── Toast (rrToast) ── */
.rr-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: var(--green-deep);
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 250;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
}
.rr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rr-toast.err { background: #B71C1C; }
@media (max-width: 900px) { .rr-toast { bottom: 170px; } }

/* ── Add-to-cart button "Added" state ── */
.btn.added { background: var(--green-deep) !important; color: #fff !important; }

/* ── SHOP TOOLBAR + filters ── */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-chip {
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all var(--t);
  background: var(--white);
}
.filter-chip:hover { border-color: var(--green); color: var(--green); }
.filter-chip.active { background: var(--green); color: #fff; border-color: var(--green); }
.shop-results { color: var(--muted); font-size: 0.9rem; }
.shop-loading, .shop-empty {
  text-align: center;
  padding: 4rem 1rem;
  grid-column: 1 / -1;
}
.shop-empty h3 { margin-bottom: 0.5rem; color: var(--ink); }
.shop-empty p { color: var(--ink-soft); max-width: 480px; margin: 0 auto 1.25rem; line-height: 1.7; }

/* Product image + name links */
.product-image-link { display: block; }
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: var(--green); }

/* ── CART LAYOUT ── */
.cart-layout {
  display: grid;
  gap: 2rem;
  padding: 1rem 0 3rem;
}
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
}
.cart-empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.cart-empty h3 { color: var(--ink); margin-bottom: 0.5rem; }
.cart-empty p { color: var(--ink-soft); margin-bottom: 1.5rem; }

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.cart-item-img {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  background: var(--green-soft) center/cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.cart-item-body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.cart-item-name { font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.cart-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  font-size: 0.9rem;
}
.qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cream);
  border-radius: var(--radius-full);
  padding: 4px 8px;
}
.qty-controls button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.qty-controls b { min-width: 20px; text-align: center; }
.cart-item-price { color: var(--ink); font-weight: 700; margin-left: auto; }
.cart-item-remove {
  background: none;
  border: none;
  color: #B71C1C;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.cart-summary {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}
.cart-summary h3 { color: var(--ink); margin-bottom: 0.75rem; }
.sum-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}
.sum-row.muted { color: var(--muted); }
.sum-row.total {
  border-top: 1.5px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}

/* ── PRODUCT DETAIL ── */
.pd-notfound {
  text-align: center;
  padding: 4rem 1rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
}
.pd-notfound h2 { color: var(--ink); margin-bottom: 0.75rem; }
.pd-layout {
  display: grid;
  gap: 2.5rem;
  padding: 1rem 0 3rem;
}
@media (min-width: 900px) {
  .pd-layout { grid-template-columns: 1fr 1fr; align-items: start; }
}
.pd-media {
  aspect-ratio: 1 / 1;
  background: var(--green-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-cats {
  font-size: 0.8rem;
  color: var(--gold-warm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.pd-cats a { color: inherit; }
.pd-info h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.pd-price {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1rem;
}
.pd-desc {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.pd-desc p { margin-bottom: 0.75rem; }
.pd-buy-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.pd-buy-row .btn { min-width: 0; flex: 1; }
.pd-buy-row .pd-qty { flex-shrink: 0; }
@media (max-width: 500px) {
  .pd-buy-row { flex-direction: column; align-items: stretch; }
  .pd-buy-row .pd-qty { align-self: flex-start; }
  .pd-buy-row .btn { width: 100%; }
}
.pd-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: var(--white);
}
.pd-qty button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.pd-qty b { min-width: 28px; text-align: center; font-size: 1rem; }
.pd-soldout {
  padding: 1rem;
  background: rgba(183, 28, 28, 0.08);
  border-radius: var(--radius);
  color: #B71C1C;
  font-weight: 600;
}
.pd-perks {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}
.pd-perk {
  padding: 0.4rem 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ── CHECKOUT ── */
.co-layout {
  display: grid;
  gap: 2rem;
  padding: 1rem 0 3rem;
}
@media (min-width: 940px) {
  .co-layout { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
.co-form, .co-summary {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.co-section { margin-bottom: 1.5rem; }
.co-section h3 {
  font-size: 1rem;
  color: var(--gold-warm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.ship-opt, .pay-opt {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: all var(--t);
}
.ship-opt.sel, .pay-opt.sel {
  border-color: var(--green);
  background: var(--green-soft);
}
.ship-opt input, .pay-opt input { margin-top: 4px; accent-color: var(--green); }
.ship-opt b, .pay-opt b { font-size: 0.95rem; color: var(--ink); }
.ship-opt small, .pay-opt small { display: block; color: var(--ink-soft); font-size: 0.83rem; margin-top: 3px; }
.bank-box {
  background: var(--gold-soft);
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  margin-top: 0.75rem;
  display: none;
  line-height: 1.7;
}
.bank-box.show { display: block; }
.co-summary { position: sticky; top: 90px; }
.co-summary h3 { color: var(--ink); margin-bottom: 0.75rem; }
.co-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ── ORDER CONFIRMATION ── */
.oc-icon {
  font-size: 5rem;
  animation: ocBounce 0.6s ease-out;
}
@keyframes ocBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.oc-ref {
  display: inline-block;
  background: var(--green-soft);
  color: var(--ink);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.05em;
  margin-top: 0.75rem;
}
.oc-bank {
  background: var(--gold-soft);
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem auto;
  max-width: 480px;
  text-align: left;
  line-height: 1.7;
  font-size: 0.9rem;
}

/* =========================================================
   v2.4 — SINGLE HERO refinements
   ========================================================= */
/* Division badge chips inside the hero — small, friendly, on-brand */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}
.hero-badge {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all var(--t);
}
.hero-badge:hover {
  background: rgba(245, 184, 0, 0.9);
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(-2px);
}
@media (max-width: 500px) {
  .hero-badge { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
}

/* Single hero — slightly taller than the slider version to give copy room */
.hero-single .hero-full-content { max-width: 780px; }
.hero-single h1 { line-height: 1.05; }
.hero-single .hero-accent { display: inline-block; margin-top: 0.2em; }


/* =========================================================
   v2.5 — PALETTE REBALANCE (black-dominant, gold-accent, less green)
   Division 4-cards get photo backgrounds with dark overlay.
   Cards work with OR without a bg image — dark fallback holds.
   ========================================================= */
.division-4-card {
  background: var(--dark);
  background-size: cover;
  background-position: center;
  color: var(--white);
  border: none;
  padding: 0;
  overflow: hidden;
  min-height: 340px;
  position: relative;
  isolation: isolate;
}
.division-4-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.95) 100%);
  z-index: 0;
  transition: opacity var(--t);
}
.division-4-card:hover::before {
  background: linear-gradient(180deg, rgba(26,26,26,0.05) 0%, rgba(26,26,26,0.45) 40%, rgba(26,26,26,0.85) 100%);
}
.division-4-card > * { position: relative; z-index: 1; }
.division-4-card .division-4-inner {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 340px;
}
.division-4-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }

/* Icon — gold outline, no green gradient */
.division-4-card .division-4-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(245, 184, 0, 0.15);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.division-4-card h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 0.5rem; }
.division-4-card p { color: rgba(255,255,255,0.85); font-size: 0.92rem; margin-bottom: 1.25rem; flex: 1; line-height: 1.55; }
.division-4-card .btn-group { flex-direction: column; gap: 0.4rem; margin-top: auto; }

/* Button styling inside dark cards — gold primary + white outline */
.division-4-card .btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.division-4-card .btn-outline:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.division-4-card .btn { width: 100%; font-size: 0.87rem; padding: 0.6rem; }

/* Section-head eyebrow — reduce green in section headers, use gold */
.section-head .eyebrow, .eyebrow { color: var(--gold-warm); }

/* Trust strip: bg is now dark, so dots stay gold but bump their visibility */
.trust-strip .trust-item::before { background: var(--gold); }

/* =========================================================
   v2.6 — QUICK STRIP (below About/pages hero)
   Wraps properly on mobile, dark bg matches trust strip aesthetic
   ========================================================= */
.quick-strip {
  background: var(--dark);
  color: var(--white);
  padding: 1rem 0;
}
.quick-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.quick-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.quick-item::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.quick-item:first-child::before { display: none; }
@media (max-width: 600px) {
  .quick-strip-inner { gap: 0.5rem 1.25rem; font-size: 0.82rem; flex-direction: column; }
  .quick-item { white-space: normal; text-align: center; }
  .quick-item::before { display: none; }
}

/* =========================================================
   v2.7 — ACCOUNT DROPDOWN (header)
   Sign In / Create Account / Track My Order — click to open,
   click outside to close (handled in main.js).
   ========================================================= */
.account-dropdown {
  position: relative;
  display: inline-block;
}
.account-dropdown .nav-tool-btn { cursor: pointer; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: all var(--t);
  z-index: 100;
}
.account-dropdown.open .account-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.account-menu-header {
  padding: 0.6rem 1rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-warm);
}
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background var(--t);
}
.account-menu-item:hover {
  background: var(--cream);
  color: var(--green-deep);
}
.account-menu-item svg { flex-shrink: 0; }
.account-menu-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 0.25rem 0;
}

/* Mobile: hide the account icon from header, show items inside the mobile drawer instead */
@media (max-width: 900px) {
  .account-dropdown { display: none; }
}

/* v2.7 — Drawer account section (mobile) */
.drawer-account-section {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-soft);
  margin-top: 0.5rem;
}
.drawer-account-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 0.5rem;
}
.drawer-account-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.drawer-account-item:hover { color: var(--green-deep); }

/* =========================================================
   v2.7 — MULTI-STEP WIZARD (Solar Assessment form)
   ========================================================= */
.wizard-wrap {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (max-width: 600px) {
  .wizard-wrap { padding: 1.25rem; }
}

/* Progress indicator */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding: 0 0.5rem;
  gap: 4px;
}
.wizard-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.wizard-progress-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.95rem;
  transition: all var(--t);
}
.wizard-progress-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: color var(--t);
}
.wizard-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}
.wizard-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.4s ease;
}
/* Active / completed step styling */
.wizard-progress-step.active .wizard-progress-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(245, 184, 0, 0.35);
}
.wizard-progress-step.active .wizard-progress-label {
  color: var(--ink);
}
.wizard-progress-step.completed .wizard-progress-dot {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.wizard-progress-step.completed .wizard-progress-label {
  color: var(--green-deep);
}
.wizard-progress-bar.filled span { width: 100%; }

@media (max-width: 500px) {
  .wizard-progress-dot { width: 32px; height: 32px; font-size: 0.85rem; }
  .wizard-progress-label { font-size: 0.62rem; }
  .wizard-progress-bar { margin-bottom: 18px; }
}

/* Individual step */
.wizard-step {
  display: none;
  animation: wizardFadeIn 0.35s ease;
}
.wizard-step.active { display: block; }
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wizard-step-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}
.wizard-step-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-warm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.wizard-step-header h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.wizard-step-lead {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Nav row (Back / Next / Submit) */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.wizard-nav .btn { min-width: 130px; }
@media (max-width: 500px) {
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn { width: 100%; min-width: 0; }
}

/* Validation state */
.wizard-step .form-field input:invalid.touched,
.wizard-step .form-field select:invalid.touched,
.wizard-step .form-field textarea:invalid.touched {
  border-color: #B71C1C;
}
.wizard-step .field-error {
  color: #B71C1C;
  font-size: 0.82rem;
  margin-top: 0.25rem;
  display: none;
}
.wizard-step .form-field.error .field-error { display: block; }

/* =========================================================
   v3.0 — DEALS PAGE — Promo Cards with poster images
   ========================================================= */
.promo-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .promo-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.promo-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  transition: all var(--t);
}
.promo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.promo-image-link {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream);
}
.promo-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.promo-image-link:hover img { transform: scale(1.03); }
.promo-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--gold);
  color: var(--ink);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.promo-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}
.promo-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-warm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.promo-body h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
}
.promo-body > p {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}
.promo-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.promo-features li {
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding-left: 0;
  line-height: 1.5;
}
.promo-strike {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.85em;
  margin-left: 0.3em;
}
.promo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem;
}
.promo-date { color: var(--green-deep); font-weight: 700; }
.promo-terms { color: var(--muted); }
.promo-body .btn-group { margin-top: 0.5rem; }
.promo-footnote {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2.5rem;
  font-style: italic;
}

/* =========================================================
   v3.0 — SOLAR PAGE — Recent Installations Gallery
   ========================================================= */
.install-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: minmax(360px, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .install-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(240px, 1fr) minmax(240px, 1fr);
  }
  .install-tile-large { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 600px) {
  .install-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .install-tile-large { grid-column: 1; grid-row: auto; }
}
.install-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
  background: var(--dark);
  cursor: pointer;
  transition: all var(--t);
}
.install-tile-large { grid-column: 1; grid-row: 1 / 3; }
@media (min-width: 900px) {
  .install-gallery { grid-template-rows: 1fr 1fr; }
  .install-tile-large { grid-row: 1 / 3; }
}
.install-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.install-tile:hover img { transform: scale(1.05); }
.install-tile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.25rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
  color: #fff;
}
.install-tile-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.install-tile-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.install-tile-large .install-tile-title { font-size: 1.1rem; }

/* =========================================================
   v3.2 — Group A: enforce 1 product per row on mobile
   ========================================================= */
@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
}

/* =========================================================
   v3.2 — MINI-CART DRAWER (slide-out from right)
   Auto-opens on Add to Cart. User can Go to Cart or Continue Shopping.
   ========================================================= */

/* Overlay behind drawer */
.mini-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 998;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mini-cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* The drawer */
.mini-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 92vw;
  background: var(--white);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.mini-cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

/* Header with green success check + close */
.mini-cart-header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--green-soft) 0%, transparent 100%);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.mini-cart-header-inner {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.mini-cart-check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mini-cart-check svg { width: 18px; height: 18px; }
.mini-cart-header-text { flex: 1; min-width: 0; }
.mini-cart-added {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mini-cart-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-cart-close {
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  transition: background var(--t);
  flex-shrink: 0;
}
.mini-cart-close:hover { background: var(--cream); color: var(--ink); }

/* Body — item list, scrollable */
.mini-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.mini-cart-items { display: flex; flex-direction: column; gap: 0.75rem; }
.mc-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  align-items: center;
  transition: border-color var(--t);
}
.mc-item.just-added { border-color: var(--gold); background: var(--gold-soft); }
.mc-item-img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--cream) center/cover no-repeat;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}
.mc-item-body { flex: 1; min-width: 0; }
.mc-item-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.mc-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.mc-item-qty {
  background: var(--cream);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
  color: var(--green-deep);
}
.mc-item-price {
  font-weight: 700;
  color: var(--ink);
}

/* Empty state */
.mini-cart-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-soft);
}
.mini-cart-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }

/* Footer — subtotal + CTAs */
.mini-cart-footer {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border-soft);
  background: var(--body-bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mini-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--ink);
}
.mini-cart-subtotal b {
  font-size: 1.2rem;
  color: var(--green-deep);
}
.mini-cart-go, .mini-cart-continue {
  width: 100%;
  justify-content: center;
}
.mini-cart-checkout-link {
  text-align: center;
  font-size: 0.85rem;
  color: var(--green-deep);
  font-weight: 600;
  margin-top: 0.25rem;
  padding: 0.5rem;
}
.mini-cart-checkout-link:hover { color: var(--gold-warm); }

/* Prevent body scroll when drawer open */
body.mini-cart-open { overflow: hidden; }


/* =========================================================
   v3.2 — LEETAM-INSPIRED PREMIUM ECOMMERCE CARDS
   Product cards get a plate/panel look: soft grey background top with
   product image (mix-blend-mode multiply removes white bg from product shots),
   then white content panel below with brand micro-label + name + price.
   ========================================================= */

/* Product card refresh — Leetam-style plate + panel */
.product-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(20, 20, 20, 0.12);
  transform: translateY(-2px);
}

/* Image plate — soft cream/grey plate that lets the product photo pop */
.product-image, .product-image-link .product-image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #F5F2EB 0%, #EDE9DF 100%);
  padding: 20px;
  display: grid;
  place-items: center;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.product-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.5s ease;
}
.product-card:hover .product-image img { transform: scale(1.05); }

/* Badge — Leetam-style folded corner (gold, top-right) */
.product-badge {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  background: var(--gold);
  color: var(--ink);
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  padding: 7px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
}

/* Body panel — clean white with tighter typography */
.product-body {
  background: #fff;
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.product-category {
  color: #9AA5B2;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-name {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: var(--green-deep); }
.product-spec { color: #9AA5B2; font-size: 0.78rem; margin-bottom: 4px; }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid #F0EEE8; }
.product-price { font-size: 1.1rem; font-weight: 800; color: var(--ink); font-family: var(--sans); }
.product-price-old { color: #9AA5B2; text-decoration: line-through; font-size: 0.85rem; }
.product-stock { color: var(--green-deep); font-size: 0.75rem; font-weight: 600; margin-top: 2px; }

/* Actions area — icon-forward add to cart */
.product-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.product-actions .btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.78rem;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.product-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ink);
  color: #fff;
}
.product-actions .btn-primary:hover { background: var(--gold-warm); color: #fff; }
.product-actions .btn-primary::before {
  content: '';
  width: 14px; height: 14px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') center/contain no-repeat;
  flex-shrink: 0;
}
.product-actions .btn-outline {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.product-actions .btn-outline:hover {
  background: var(--cream);
  color: var(--green-deep);
  border-color: var(--green-deep);
}

/* SKELETON loader (Leetam-inspired) */
.skeleton {
  background: linear-gradient(90deg, #F0EEE8 0%, #E5E2D8 50%, #F0EEE8 100%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.product-card.skeleton-card { pointer-events: none; }
.product-card.skeleton-card .product-image { padding: 0; }
.product-card.skeleton-card .product-image .skeleton { width: 100%; height: 100%; border-radius: 0; }

/* Product detail page — Leetam-style clean plate ==== */
.pd-media {
  background: linear-gradient(180deg, #F5F2EB 0%, #EDE9DF 100%);
  padding: 24px;
  display: grid;
  place-items: center;
}
.pd-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* =========================================================
   v3.2 — LEETAM-STYLE HORIZONTAL CAROUSELS ("ct-carousel")
   Used on home to keep it short: featured products, projects, community
   ========================================================= */
.ct-carousel {
  position: relative;
  padding: 0 0 8px;
  margin: 0 -8px;
}
.ct-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 300px);
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 8px 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ct-track::-webkit-scrollbar { display: none; }
.ct-track > * {
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 900px) {
  .ct-track { grid-auto-columns: minmax(260px, 1fr); }
}
@media (max-width: 500px) {
  .ct-track { grid-auto-columns: 82vw; padding: 8px 12px 20px; }
}
.ct-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transition: all var(--t);
  z-index: 2;
}
.ct-arrow:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.ct-arrow.prev { left: -18px; }
.ct-arrow.next { right: -18px; }
.ct-arrow svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .ct-arrow { display: none; }
  .ct-track { padding-bottom: 24px; }
}

/* Rule divider between sections */
.ct-rule {
  max-width: 90px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-warm) 100%);
  margin: 0 auto 2rem;
}

/* Project tile — for the projects carousel */
.project-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  display: block;
  cursor: pointer;
  transition: transform var(--t);
}
.project-tile:hover { transform: translateY(-3px); }
.project-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-tile:hover img { transform: scale(1.05); }
.project-tile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
  color: #fff;
}
.project-tile-title { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.project-tile-loc { color: var(--gold); font-size: 0.75rem; font-weight: 600; margin-top: 4px; }

/* Community/story cards for carousel */
.story-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.story-card-img {
  aspect-ratio: 16 / 10;
  background: var(--cream) center/cover no-repeat;
}
.story-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.story-card-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-warm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.story-card h4 { font-family: var(--serif); color: var(--ink); font-size: 1.1rem; margin: 0; }
.story-card p { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; margin: 0; flex: 1; }

/* =========================================================
   v3.3 — SOLAR PAGE full-bleed hero with image
   ========================================================= */
.solar-hero {
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  padding: clamp(6rem, 15vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
  color: var(--white);
}
.solar-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%);
}
@media (max-width: 768px) {
  .solar-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%); }
}
.solar-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.solar-hero-inner .eyebrow {
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}
.solar-hero-title {
  font-family: var(--serif);
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.solar-hero-accent {
  color: var(--gold);
  font-style: italic;
  white-space: nowrap;
}
@media (max-width: 500px) {
  .solar-hero-accent { white-space: normal; }
}
.solar-hero-lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1.75rem;
  max-width: 560px;
}

/* =========================================================
   v3.3 — Force single-line section headings on desktop
   ========================================================= */
.section-header h2, .section-head h2 {
  text-wrap: balance;
}
/* Force one-line for specific home sections */
#featured-solar .section-header h2,
.division-section .section-header h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}
@media (min-width: 900px) {
  #featured-solar .section-header h2,
  .division-section .section-header h2 {
    white-space: nowrap;
  }
}

/* =========================================================
   v3.3 — CTA sections with background image (Get Solar Assessment etc.)
   ========================================================= */
.cta-with-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--white);
  overflow: hidden;
}
.cta-with-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,60,15,0.85) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;              /* v3.5: let clicks pass through to buttons */
  z-index: 1;
}
.cta-with-bg > .container,
.cta-with-bg > .container-narrow { position: relative; z-index: 2; }
.cta-with-bg h2,
.cta-with-bg h3 { color: var(--white); }
.cta-with-bg p { color: rgba(255,255,255,0.92) !important; }  /* !important beats inline var(--ink-soft) */
.cta-with-bg .eyebrow { color: var(--gold); }
.cta-with-bg .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.7); }
.cta-with-bg .btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* =========================================================
   v3.3 — FOOTER: cleaner 4 columns, less green
   ========================================================= */
.site-footer {
  background: var(--ink);              /* switched from --green-deep → black, less green */
  color: rgba(255,255,255,0.85);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  border-top: 3px solid var(--gold);   /* single gold accent line at top */
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col h5 {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: rgba(255,255,255,0.78); font-size: 0.92rem; transition: color var(--t); }
.footer-col a:hover { color: var(--gold); }
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}
.footer-contact-list svg { color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.footer-contact-list a {
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.footer-contact-list a:hover { color: var(--gold); }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.footer-bottom-links { display: flex; gap: 1.25rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.6); }
.footer-bottom-links a:hover { color: var(--gold); }

/* =========================================================
   v3.5 — HOME featured-solar preview package cards
   ========================================================= */
.package-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .package-preview-grid { grid-template-columns: 1fr; }
}
.package-preview {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}
.package-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.1);
  border-color: var(--gold);
}
.package-preview.featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--white) 40%);
}
.package-preview-tag {
  display: inline-block;
  background: var(--cream);
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
}
.package-preview-tag.popular { background: var(--gold); color: var(--ink); }
.package-preview h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.35rem;
  margin: 0.25rem 0;
}
.package-preview > p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.package-preview ul {
  list-style: none;
  padding: 0.5rem 0 0.5rem;
  margin: 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.package-preview ul li {
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.package-preview-cta {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--green-deep);
  font-weight: 700;
  font-size: 0.9rem;
  border-top: 1px solid var(--border-soft);
}
.package-preview:hover .package-preview-cta { color: var(--gold-warm); }

/* =========================================================
   v3.5 — ABOUT PAGE full-bleed hero with bg image
   ========================================================= */
.about-hero {
  position: relative;
  min-height: 460px;
  background-size: cover;
  background-position: center;
  padding: clamp(6rem, 14vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  color: var(--white);
  overflow: hidden;
}
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .about-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%); }
}
.about-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.about-hero-inner .eyebrow {
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
  letter-spacing: 0.2em;
}
.about-hero-title {
  font-family: var(--serif);
  color: var(--white);
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.about-hero-accent {
  color: var(--gold);
  font-style: italic;
  white-space: nowrap;
}
@media (max-width: 640px) { .about-hero-accent { white-space: normal; } }
.about-hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1rem;
}
.about-hero-tag {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* =========================================================
   v3.7 — GLOBAL FIXES
   1. Section padding reduced 84px → 56px each side (168px gap → 112px gap)
   2. Eyebrow text bigger 12px → 15px (13.6px → 16px on hero for extra emphasis)
   3. Section headings sized to fit one line (text-wrap: balance + tighter clamp)
   4. Marketplace/shop product cards match Leetam styling
   ========================================================= */

/* — 1. Tighter section padding (all sections). Override the base 84px. — */
section:not(.hero-fullbleed):not(.trust-strip):not(.about-hero):not(.solar-hero):not(.page-hero) {
  padding-top: clamp(2.5rem, 4.5vw, 3.5rem) !important;    /* was ~5.25rem (84px) */
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem) !important;
}
/* trust-strip stays compact; hero sections have their own padding — leave alone */

/* — 2. Eyebrow bigger + more prominent — */
.eyebrow, .section-eyebrow {
  font-size: 0.95rem !important;         /* was 0.75rem */
  letter-spacing: 0.18em !important;     /* slightly wider tracking */
  font-weight: 700 !important;
}
/* Hero eyebrow — bigger still, since Lee specifically called out the hero slide eyebrows */
.hero-full-content .eyebrow,
.hero-fullbleed .eyebrow {
  font-size: 1.05rem !important;         /* was 0.85rem */
  letter-spacing: 0.22em !important;
  margin-bottom: 1.25rem !important;
}

/* — 3. Section headings sized to fit one line on desktop — */
.section-header h2,
.section-head h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem) !important;   /* was clamp(2rem, 5vw, 3rem) — smaller max */
  line-height: 1.15 !important;
  text-wrap: balance;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* Reduce the p under headings margin so section feels tighter */
.section-header p,
.section-head p {
  margin-top: 0.5rem !important;
  margin-bottom: 1.75rem !important;
}
/* Section header itself tighter */
.section-header, .section-head {
  margin-bottom: 2rem !important;   /* was often 3rem+ */
}

/* — 4. Marketplace/shop product cards — Leetam-inspired premium look — */
.product-grid .product-card {
  background: #F5F2EB !important;         /* soft plate — Leetam c-plate */
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16,32,43,.06) !important;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.product-grid .product-card:hover {
  transform: none !important;             /* Leetam kills the lift */
  box-shadow: 0 10px 26px rgba(16,32,43,.12) !important;
}
/* Image plate — 1:1 aspect, product on multiply blend so white bg vanishes */
.product-card .product-image {
  aspect-ratio: 1/1 !important;
  padding: 20px !important;
  background: #F5F2EB !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
}
.product-card .product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
}
/* White content panel — Leetam pattern */
.product-card .product-body {
  background: #fff !important;
  padding: 16px 15px 18px !important;
  gap: 5px !important;
  display: flex;
  flex-direction: column;
}
.product-card .product-category {
  color: #9AA5B2 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.product-card .product-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  min-height: 2.7em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .product-spec {
  color: #9AA5B2 !important;
  font-size: 11px !important;
  margin-bottom: 4px;
}
.product-card .product-price-row {
  border-top: 1px solid #F0EEE8;
  padding-top: 10px;
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.product-card .product-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  font-family: var(--sans);
}
.product-card .product-stock {
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
/* Folded gold corner badge (Leetam-style) */
.product-card .product-badge {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-radius: 0 12px 0 12px !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
}

/* — 5. Actions row — tighter, less generic — */
.product-card .product-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.product-card .product-actions .btn {
  flex: 1;
  padding: 9px 8px !important;
  font-size: 0.75rem !important;
  min-width: 0;
  font-weight: 700;
  border-radius: 999px;
}
.product-card .product-actions .btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.product-card .product-actions .btn-primary:hover {
  background: var(--gold-warm) !important;
  border-color: var(--gold-warm) !important;
}
.product-card .product-actions .btn-outline {
  border-color: #E0DCD3 !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
}


/* =========================================================
   v3.8 — ACCOUNT PAGES (login, register, dashboard, forgot, reset)
   ========================================================= */

/* Hero wrapper — subtle cream backdrop */
.account-hero {
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--body-bg) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem);
  min-height: 60vh;
}
.container-narrow {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* The white card that holds the form */
.account-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(20,20,20,0.06);
  border: 1px solid var(--border-soft);
}
.account-card-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.account-card-head h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0.5rem 0 0.5rem;
  color: var(--ink);
}
.account-card-head p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }
.account-card-head .eyebrow {
  color: var(--gold-warm);
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
}

/* Account forms */
.account-form { display: flex; flex-direction: column; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.form-field label small { color: var(--ink-soft); font-weight: 400; }
.form-field input {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t);
  font-family: inherit;
}
.form-field input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(8, 117, 16, 0.1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.form-field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 0.25rem 0;
}
.form-field-check input[type=checkbox] { margin-top: 3px; }
.form-field-check a { color: var(--green-deep); font-weight: 600; }
.account-form-actions { margin-top: 0.5rem; }
.btn-block { width: 100%; justify-content: center; }
.account-form-msg {
  padding: 0;
  font-size: 0.88rem;
  font-weight: 500;
  min-height: 1.4em;
  text-align: center;
}
.account-form-msg.success { color: var(--green-deep); }
.account-form-msg.error { color: #b71c1c; }
.account-form-msg.info { color: var(--ink-soft); }

/* Perks list on register page */
.account-perks {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.account-perk { font-size: 0.9rem; color: var(--ink); }
.account-perk b { color: var(--green-deep); }

/* Footer links */
.account-links {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.account-links a { color: var(--green-deep); font-weight: 600; }
.account-links-sep { margin: 0 0.5rem; color: var(--border); }

/* Notice / error banners */
.account-notice {
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.account-notice.error {
  background: #ffebee;
  border-left: 3px solid #b71c1c;
  color: #b71c1c;
}

/* ══ Dashboard ══ */
.account-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
}
.account-dash-head h1 { color: var(--ink); margin: 0.25rem 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.account-meta { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.account-dash-head .eyebrow { color: var(--gold-warm); }

.account-dash-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
}
@media (max-width: 800px) { .account-dash-grid { grid-template-columns: 1fr; } }

.account-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.account-panel + .account-panel { margin-top: 1rem; }
.account-panel h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.account-points-big {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 800;
  color: var(--green-deep);
  line-height: 1;
}
.account-points-note { color: var(--ink-soft); font-size: 0.85rem; margin: 0.5rem 0 0; }

.account-form-inline { display: flex; flex-direction: column; gap: 0.75rem; }
.account-form-inline .form-field label { font-size: 0.78rem; color: var(--ink-soft); }
.account-form-inline .form-field input { padding: 8px 10px; font-size: 14px; }

/* Orders */
.account-orders { display: flex; flex-direction: column; gap: 0.75rem; }
.account-order {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color var(--t);
}
.account-order:hover { border-color: var(--gold); }
.account-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.account-order-head b { color: var(--ink); font-family: var(--sans); font-size: 1rem; }
.account-order-when { color: var(--ink-soft); font-size: 0.82rem; margin-top: 2px; }
.account-order-total { font-weight: 700; color: var(--green-deep); font-size: 1.05rem; }
.account-order-status { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.account-order-tracking {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-soft);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.account-order-tracking b { color: var(--ink); font-family: Consolas, Menlo, monospace; }

.pill {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pill-status { background: var(--green-soft); color: var(--green-deep); }
.pill-pay { background: var(--gold-soft); color: var(--gold-warm); }

.account-empty {
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--cream);
  border-radius: var(--radius);
}
.account-empty a { color: var(--green-deep); font-weight: 700; }

/* Dropdown menu enhancements when logged in */
.account-menu-user {
  padding: 0.75rem 1rem;
  background: var(--green-soft);
  border-radius: var(--radius);
  margin: 0 0.5rem 0.5rem;
  color: var(--ink);
}
.account-menu-user b { color: var(--green-deep); }
.account-menu-points {
  color: var(--gold-warm);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 2px;
}
.account-dropdown .nav-tool-btn.signed-in { color: var(--green-deep); }

/* Mobile drawer account */
.drawer-account-user {
  padding: 0.75rem 1rem;
  background: var(--green-soft);
  border-radius: var(--radius);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.drawer-account-item {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.drawer-account-item:hover { background: var(--cream); color: var(--green-deep); }


/* v3.8 — Checkout register-during-checkout enhancement */
.checkout-register-offer {
  background: var(--gold-soft);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.checkout-register-toggle {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}
.checkout-register-toggle input { margin-top: 4px; flex-shrink: 0; }
.checkout-register-toggle b { color: var(--green-deep); }
.checkout-register-password { margin-top: 0.75rem; }
.checkout-signed-in {
  background: var(--green-soft);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--green-deep);
  font-weight: 600;
  font-size: 0.92rem;
}

/* =========================================================
   v3.9 — TIGHTER SECTION GAPS
   Reducing further: 56px pad + 32px header-mb → 40px pad + 20px header-mb
   Total gap between sections drops from ~144px → ~100px
   ========================================================= */
section:not(.hero-fullbleed):not(.trust-strip):not(.about-hero):not(.solar-hero):not(.page-hero) {
  padding-top: clamp(2rem, 3.5vw, 2.75rem) !important;    /* was 56px, now ~40px */
  padding-bottom: clamp(2rem, 3.5vw, 2.75rem) !important;
}
.section-header, .section-head {
  margin-bottom: 1.25rem !important;                       /* was 2rem, now 20px */
}
.section-header p, .section-head p {
  margin-bottom: 1.25rem !important;                       /* was 1.75rem */
}
/* CTA banners were also 56px — bring them down to match */
.cta-banner {
  padding-top: clamp(2.5rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}
/* trust-strip already 16px, no change needed */

/* =========================================================
   v3.9 — PREMIUM PRODUCT CARDS (Amazon/Best Buy inspired)
   Clean white cards, image on white bg with subtle shadow,
   star rating row, delivery pill, bold pricing, hover elevation.
   4 per row on desktop, 2 on tablet, 1 on mobile.
   ========================================================= */

/* 4-column grid on desktop */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 850px)  { .product-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .product-grid { grid-template-columns: 1fr !important; } }

/* Card — clean white, subtle border, real shadow on hover */
.product-grid .product-card {
  background: #fff !important;
  border: 1px solid #E8E5DD !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-grid .product-card:hover {
  border-color: transparent !important;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.14) !important;
  transform: translateY(-3px) !important;
  z-index: 2;
}

/* Image — pure white with subtle inset shadow, product prominent */
.product-grid .product-card .product-image {
  aspect-ratio: 1/1 !important;
  padding: 16px !important;
  background: #fff !important;
  display: grid !important;
  place-items: center !important;
  border-bottom: 1px solid #F0EEE8 !important;
  position: relative;
  overflow: hidden;
}
.product-grid .product-card .product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  transition: transform .4s ease;
}
.product-grid .product-card:hover .product-image img {
  transform: scale(1.06);
}

/* Body — tight, readable, benefits-forward */
.product-grid .product-card .product-body {
  padding: 12px 14px 14px !important;
  gap: 6px !important;
  background: #fff !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-grid .product-card .product-category {
  color: #6B7280 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 !important;
}
.product-grid .product-card .product-name {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 4px !important;
}
.product-grid .product-card .product-name a { color: inherit; text-decoration: none; }
.product-grid .product-card .product-name a:hover { color: var(--green-deep); }

/* Star rating row — hardcoded 5 stars for now (dynamic when reviews come in) */
.product-grid .product-card .product-body::before {
  content: "★★★★★";
  color: #F5B800;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
  order: -1;
  margin-bottom: 2px;
}

/* Price row — bold, clear hierarchy */
.product-grid .product-card .product-price-row {
  border-top: 0 !important;
  padding-top: 4px !important;
  margin-top: auto !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.product-grid .product-card .product-price {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  font-family: var(--sans) !important;
  line-height: 1.1;
}
.product-grid .product-card .product-price-old {
  color: #9CA3AF !important;
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 500;
}

/* "Free island-wide delivery" pill under price */
.product-grid .product-card .product-stock {
  color: #059669 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.product-grid .product-card .product-stock::before {
  content: "✓";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
}

/* Actions — clean pill button, full-width */
.product-grid .product-card .product-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px !important;
}
.product-grid .product-card .product-actions .btn {
  flex: 1;
  padding: 9px 10px !important;
  font-size: 12.5px !important;
  min-width: 0;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: 0;
}
.product-grid .product-card .product-actions .btn-primary {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.product-grid .product-card .product-actions .btn-primary:hover {
  background: var(--gold-warm) !important;
  border-color: var(--gold-warm) !important;
}
.product-grid .product-card .product-actions .btn-outline {
  border-color: #E5E7EB !important;
  color: #6B7280 !important;
  background: transparent !important;
}
.product-grid .product-card .product-actions .btn-outline:hover {
  border-color: #111827 !important;
  color: #111827 !important;
  background: #F9FAFB !important;
}

/* Badge — small folded gold corner (unchanged from v3.7 but slightly smaller) */
.product-grid .product-card .product-badge {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  background: var(--gold) !important;
  color: #111827 !important;
  border-radius: 0 10px 0 10px !important;
  font-size: 10.5px !important;
  padding: 5px 10px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 3;
  line-height: 1.1;
}


/* =========================================================
   v3.10 — DYNAMIC FLOATING WIDGETS
   Rosie slides in at 5s with intro speech bubble.
   WhatsApp button slides in at 10s.
   Both start hidden then animate in — gives the page a "coming to life" feel.
   ========================================================= */

/* Initial hidden state */
#ezyr-bubble {
  opacity: 0;
  transform: translateY(30px) scale(0.7);
  pointer-events: none;
  transition: opacity .4s cubic-bezier(0.34, 1.56, 0.64, 1), transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wa-float {
  opacity: 0;
  transform: translateY(30px) scale(0.7);
  pointer-events: none;
  transition: opacity .4s cubic-bezier(0.34, 1.56, 0.64, 1), transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Revealed state */
#ezyr-bubble.ezyr-revealed,
.wa-float.wa-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Intro speech bubble — sits to the left of Rosie */
.ezyr-intro {
  position: fixed;
  bottom: 115px;               /* aligned with Rosie bubble top */
  right: 100px;                /* to the left of Rosie's 60px width + gap */
  z-index: 99997;
  max-width: 280px;
  background: #fff;
  color: var(--ink);
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  font-size: 14px;
  line-height: 1.45;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transform-origin: bottom right;
  transition: opacity .35s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.ezyr-intro.ezyr-intro-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Little pointer/tail pointing to Rosie */
.ezyr-intro::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 3px -3px 6px rgba(0,0,0,0.04);
}
.ezyr-intro-name {
  color: var(--green-deep);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ezyr-intro-name::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: ezyrPulse 2s ease-in-out infinite;
}
@keyframes ezyrPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1); }
}
.ezyr-intro-msg { color: #374151; }
.ezyr-intro-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ezyr-intro-close:hover { background: #F3F4F6; color: #111827; }

/* Mobile — intro appears above the bubble (not to the left, screen too narrow) */
@media (max-width: 640px) {
  .ezyr-intro {
    bottom: 168px;   /* above the mobile bubble */
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .ezyr-intro::after { right: 32px; bottom: -8px; box-shadow: 3px 3px 6px rgba(0,0,0,0.04); }
}


/* =========================================================
   v3.11 — DARK THEME (kill the white sitewide)
   Body & sections: dark gray. Header: inverted dark. Cards: STAY WHITE (Amazon look — cards pop on dark).
   Text on dark bg: light. Text inside white cards: stays dark.
   ========================================================= */

/* ── Base palette override ────────────────────────────── */
:root {
  --page-bg:      #1F2328;   /* main page background (dark slate-gray) */
  --page-bg-alt:  #2A2F35;   /* slight variant for alternating sections */
  --page-bg-band: #262A30;   /* header + inline bands */
  --text-on-dark: #E5E7EB;   /* body text on dark */
  --text-dim:     #9CA3AF;   /* muted text on dark */
  --heading-on-dark: #FFFFFF;
  --border-dark:  #383D44;   /* subtle divider on dark */
}

/* ── Body: dark background, light text ─────────────────── */
body {
  background: var(--page-bg) !important;
  color: var(--text-on-dark) !important;
}

/* ── Header: inverted (dark bg, white text) ────────────── */
.site-header {
  background: var(--page-bg-band) !important;
  border-bottom: 1px solid var(--border-dark) !important;
}
.site-header.scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; }
/* Nav menu links white */
.nav-menu > li > a {
  color: var(--text-on-dark) !important;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active {
  color: var(--gold) !important;
}
/* Nav dropdowns (Solar, Irrigation, AC, Marketplace, Services) */
.nav-dropdown, .nav-dropd {
  background: var(--page-bg-band) !important;
  border: 1px solid var(--border-dark) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}
.nav-dropdown a, .nav-dropd a { color: var(--text-on-dark) !important; }
.nav-dropdown a:hover, .nav-dropd a:hover { background: rgba(245, 184, 0, 0.12) !important; color: var(--gold) !important; }
/* Search + Account + Cart icons white */
.nav-tools .nav-tool-btn { color: var(--text-on-dark) !important; }
.nav-tools .nav-tool-btn:hover { color: var(--gold) !important; }
/* Account dropdown menu — inverted */
.account-menu {
  background: var(--page-bg-band) !important;
  border: 1px solid var(--border-dark) !important;
}
.account-menu-header { color: var(--gold) !important; border-bottom-color: var(--border-dark) !important; }
.account-menu-item { color: var(--text-on-dark) !important; }
.account-menu-item:hover { background: rgba(245, 184, 0, 0.12) !important; color: var(--gold) !important; }
.account-menu-user { background: rgba(8, 117, 16, 0.18) !important; color: var(--text-on-dark) !important; }
.account-menu-user b { color: var(--green-light) !important; }
/* Mobile hamburger — white bars */
.nav-toggle span { background: var(--text-on-dark) !important; }
/* Mobile menu drawer */
@media (max-width: 900px) {
  .site-header.menu-open .nav-menu {
    background: var(--page-bg-band) !important;
    border-top: 1px solid var(--border-dark) !important;
  }
}

/* ── Sections: convert cream/off-white → dark ──────────── */
.bg-cream, .bg-off-white, .bg-off, .bg-light {
  background: var(--page-bg-alt) !important;
  color: var(--text-on-dark) !important;
}
/* Section headings + paragraph on dark */
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) h1,
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) h2,
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) h3 {
  color: var(--heading-on-dark);
}
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) > .container > .section-header > p,
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) > .container > .section-head > p {
  color: var(--text-dim) !important;
}
/* Inline text with inline color:var(--ink-soft) — override for text sitting on dark bg */
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) > .container > .section-header > p[style*="ink-soft"],
section:not(.hero-fullbleed):not(.solar-hero):not(.about-hero):not(.page-hero):not(.cta-with-bg):not(.trust-strip) > .container > .section-head > p[style*="ink-soft"] {
  color: var(--text-dim) !important;
}

/* ── Page hero (used on Contact, Refunds, etc.) — dark band ──
   Uses background-color (not the shorthand) so pages that set an inline
   background-image (irrigation, AC, marketplace, services heroes) aren't wiped. */
.page-hero {
  background-color: var(--page-bg-band) !important;
  color: var(--text-on-dark) !important;
}
.page-hero h1 { color: var(--heading-on-dark) !important; }
.page-hero p { color: var(--text-dim) !important; }

/* ── Cards: STAY WHITE — text inside stays dark (Amazon look) ─── */
/* Product cards already white via v3.9 rules — nothing to change */
/* Division cards (dark bg with overlay) — unchanged */
/* Story cards (community) — force white with dark text */
.story-card { background: #fff !important; color: var(--ink) !important; }
.story-card h4 { color: var(--ink) !important; }
.story-card p { color: var(--ink-soft) !important; }
/* Package preview cards (featured-solar section) */
.package-preview { background: #fff !important; border-color: #E5E7EB !important; }
.package-preview h3 { color: var(--ink) !important; }
.package-preview > p, .package-preview ul li { color: var(--ink-soft) !important; }
.package-preview.featured { background: linear-gradient(180deg, var(--gold-soft) 0%, #fff 40%) !important; }

/* ── Trust strip (below hero) — already dark, verify text ── */
.trust-strip { background: var(--dark) !important; color: var(--text-on-dark) !important; }

/* ── Newsletter section: form on dark ─── */
#newsletter input[type=email] {
  background: var(--page-bg-band) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-on-dark) !important;
}
#newsletter input[type=email]::placeholder { color: var(--text-dim) !important; }

/* ── Filter chips (marketplace) — dark theme ─── */
.filter-chip {
  background: var(--page-bg-band) !important;
  border: 1px solid var(--border-dark) !important;
  color: var(--text-on-dark) !important;
}
.filter-chip:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.filter-chip.active { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }

/* ── Mobile action bar (bottom) — inverted to dark ── */
@media (max-width: 900px) {
  .mobile-action-bar {
    background: var(--page-bg-band) !important;
    border-top: 1px solid var(--border-dark) !important;
  }
  .mab-item { color: var(--text-on-dark) !important; }
  .mab-item:hover, .mab-item.primary { color: var(--gold) !important; }
}

/* ── Search overlay (if used) ── */
.search-overlay { background: rgba(0,0,0,0.85) !important; }
.search-panel { background: var(--page-bg-band) !important; }
.search-panel input {
  background: var(--page-bg) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--border-dark) !important;
}

/* ── Reviews / testimonials: white cards with dark text ── */
.testimonial-card, .review-card {
  background: #fff !important;
  color: var(--ink) !important;
}

/* ── FAQ / Support / T&C / Privacy sections — dark bg, light body text ─── */
.legal-content, .faq-list, .support-blocks {
  color: var(--text-on-dark);
}
.legal-content h2, .legal-content h3, .faq-item h3, .faq-item h4 {
  color: var(--heading-on-dark);
}
.faq-item { border-color: var(--border-dark) !important; }

/* ── Contact page cards / boxes ── */
.contact-info-card, .contact-methods > * {
  background: var(--page-bg-band) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-on-dark) !important;
}
.contact-info-card h3, .contact-info-card h4 { color: var(--heading-on-dark) !important; }

/* ── Divisions section (home) already uses dark cards — verify heading text ── */
/* Section headers ABOVE division cards should be white on dark */

/* ── Buttons: outline button on dark bg needs light border ── */
.btn-outline:not(.mini-cart-close):not(.ezyr-intro-close) {
  border-color: rgba(255,255,255,0.35);
  color: var(--text-on-dark);
  background: transparent;
}
.btn-outline:hover:not(.mini-cart-close):not(.ezyr-intro-close) {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}
/* But inside white cards (like product-actions), keep the original styling */
.product-card .btn-outline,
.package-preview .btn-outline,
.story-card .btn-outline {
  border-color: #E5E7EB;
  color: var(--ink-soft);
}
.product-card .btn-outline:hover,
.package-preview .btn-outline:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: #F9FAFB;
}

/* ── Skeleton loaders + empty states on dark ── */
.shop-loading, .shop-empty {
  color: var(--text-dim) !important;
}
.shop-empty h3 { color: var(--heading-on-dark) !important; }

/* ── Mini-cart drawer stays white (inside a card overlay) ── */
/* v3.7 rules unchanged — mini-cart is its own overlay */

/* ── Marketplace hero title on one line ─── */
.page-hero h1, section.page-hero h1 {
  text-wrap: balance;
}
@media (min-width: 900px) {
  .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem) !important; white-space: nowrap; }
}

/* ── Force a subtle scrollbar theme on dark ── */
html { scrollbar-color: #4B5563 var(--page-bg); }


/* =========================================================
   v3.11 — POST-QA FIXES
   1. Text inside WHITE cards must stay dark (H1/H2/H3 in .account-card, .package-preview, etc.)
   2. Account-hero background — kill the cream gradient, use dark
   3. Any hardcoded 'bg-cream'-like backgrounds
   ========================================================= */

/* Fix 1: White cards on all pages get dark text inside */
.account-card h1,
.account-card h2,
.account-card h3,
.account-card h4,
.account-card p,
.account-card label {
  color: var(--ink) !important;
}
.account-card p { color: var(--ink-soft) !important; }
.account-card .eyebrow { color: var(--gold-warm) !important; }
.account-card .form-field label { color: var(--ink) !important; }

/* Fix 2: Account-hero → dark background (was cream gradient) */
.account-hero {
  background: var(--page-bg) !important;
}

/* Also dashboard panels — white bg, dark text inside */
.account-panel h1, .account-panel h2, .account-panel h3, .account-panel h4 { color: var(--ink) !important; }
.account-panel p, .account-panel label { color: var(--ink-soft) !important; }
.account-panel .form-field label { color: var(--ink) !important; }

/* Account dashboard head sits on dark bg — text stays light */
.account-dash-head h1, .account-dash-head p { color: var(--text-on-dark) !important; }
.account-dash-head .eyebrow { color: var(--gold) !important; }
.account-meta { color: var(--text-dim) !important; }

/* Notice box on white — text dark */
.account-notice { color: inherit; }
.account-notice.error { color: #b71c1c !important; background: #ffebee !important; }

/* Checkout register offer sits on dark now — invert */
.checkout-register-offer {
  background: rgba(245, 184, 0, 0.10) !important;
  border-color: rgba(245, 184, 0, 0.35) !important;
}
.checkout-register-toggle { color: var(--text-on-dark) !important; }
.checkout-register-toggle b { color: var(--gold) !important; }
.checkout-signed-in {
  background: rgba(8, 117, 16, 0.20) !important;
  color: var(--green-light) !important;
}

/* Any form fields that sit on dark bg — inputs need dark bg */
.form-field input,
.form-field textarea,
.form-field select {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
/* But when inputs sit ON dark bg outside a card, they need to be either white or invert */
body > form input:not(.account-card input),
section > .container > form input,
section > .container > form textarea {
  /* leave defaults — they'll inherit from .form-field rule above */
}


/* =========================================================
   v3.12 — KILL WHITE COMPLETELY (client hates white — dark cards sitewide)
   Cards go to warm dark charcoal (#242830) with subtle gold-tinted borders.
   Text inside cards: light. Featured cards: gold-tinted dark bg.
   ========================================================= */

/* Add card variables to :root */
:root {
  --card-bg:        #242830;   /* warm dark charcoal for all cards */
  --card-bg-alt:    #2C3038;   /* slightly lighter — for hover / inner sub-panels */
  --card-bg-featured: linear-gradient(180deg, rgba(245,184,0,0.13) 0%, #242830 55%);
  --card-border:    #3A3F47;
  --card-border-hover: rgba(245, 184, 0, 0.55);
}

/* ── Product cards (marketplace + shop + home featured) — DARK ── */
.product-grid .product-card,
.product-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-on-dark) !important;
}
.product-grid .product-card:hover,
.product-card:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(245, 184, 0, 0.2) !important;
}
/* Image plate — very dark to make products stand out */
.product-grid .product-card .product-image,
.product-card .product-image {
  background: #1A1D22 !important;      /* darker than card body for depth */
  border-bottom: 1px solid var(--card-border) !important;
}
/* Photo blend — subtle lighten so products photographed on white show cleanly on dark */
.product-grid .product-card .product-image img,
.product-card .product-image img {
  mix-blend-mode: normal;
  filter: brightness(1.02);
}
/* Body — dark bg, light text */
.product-grid .product-card .product-body,
.product-card .product-body {
  background: var(--card-bg) !important;
}
.product-grid .product-card .product-name,
.product-card .product-name,
.product-grid .product-card .product-name a,
.product-card .product-name a {
  color: var(--text-on-dark) !important;
}
.product-grid .product-card .product-price,
.product-card .product-price {
  color: var(--gold) !important;    /* prices in gold on dark = premium */
}
.product-grid .product-card .product-category,
.product-card .product-category {
  color: var(--text-dim) !important;
}
/* Actions row — primary btn stays gold, outline goes light */
.product-grid .product-card .product-actions .btn-primary,
.product-card .product-actions .btn-primary {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
.product-grid .product-card .product-actions .btn-primary:hover,
.product-card .product-actions .btn-primary:hover {
  background: var(--gold-warm) !important;
  border-color: var(--gold-warm) !important;
}
.product-grid .product-card .product-actions .btn-outline,
.product-card .product-actions .btn-outline {
  border-color: var(--card-border) !important;
  color: var(--text-dim) !important;
}
.product-grid .product-card .product-actions .btn-outline:hover,
.product-card .product-actions .btn-outline:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: transparent !important;
}

/* ── Package preview cards (home Featured Solar) — DARK ── */
.package-preview {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}
.package-preview h3 { color: var(--heading-on-dark) !important; }
.package-preview > p,
.package-preview ul li { color: var(--text-on-dark) !important; }
.package-preview ul { border-top-color: var(--card-border) !important; }
.package-preview-cta { color: var(--gold) !important; border-top-color: var(--card-border) !important; }
.package-preview-tag { background: var(--card-bg-alt) !important; color: var(--text-dim) !important; }
.package-preview.featured {
  background: var(--card-bg-featured) !important;
  border-color: rgba(245, 184, 0, 0.55) !important;
}
.package-preview-tag.popular { background: var(--gold) !important; color: var(--ink) !important; }

/* ── Story cards (community section) — DARK ── */
.story-card {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 1px solid var(--card-border);
}
.story-card h4 { color: var(--heading-on-dark) !important; }
.story-card p { color: var(--text-dim) !important; }
.story-card-body { background: var(--card-bg); }

/* ── Testimonial / review cards — DARK ── */
.testimonial-card, .review-card {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 1px solid var(--card-border);
}
.testimonial-card p, .review-card p { color: var(--text-on-dark) !important; }
.testimonial-card b, .review-card b { color: var(--heading-on-dark) !important; }
/* Author info under testimonial — muted */
.testimonial-card .review-meta,
.testimonial-card .author-role { color: var(--text-dim) !important; }
/* Quote mark and arrows in gold */
.testimonial-arrow {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--gold) !important;
}
.testimonial-arrow:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

/* ── Account card (login/register/forgot/reset) — DARK ── */
.account-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-on-dark) !important;
}
.account-card h1,
.account-card h2,
.account-card h3,
.account-card h4 {
  color: var(--heading-on-dark) !important;
}
.account-card p { color: var(--text-dim) !important; }
.account-card label,
.account-card .form-field label { color: var(--text-on-dark) !important; }
.account-card .form-field-check { color: var(--text-dim) !important; }
.account-card .eyebrow { color: var(--gold) !important; }
.account-perks { background: rgba(245, 184, 0, 0.08) !important; }
.account-perk { color: var(--text-on-dark) !important; }
.account-perk b { color: var(--gold) !important; }
.account-links { border-top-color: var(--card-border) !important; color: var(--text-dim) !important; }
.account-links a { color: var(--gold) !important; }

/* ── Account dashboard panels — DARK ── */
.account-panel {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-on-dark) !important;
}
.account-panel h3, .account-panel h4 { color: var(--heading-on-dark) !important; }
.account-panel p { color: var(--text-dim) !important; }
.account-panel label,
.account-panel .form-field label { color: var(--text-on-dark) !important; }
.account-points-big { color: var(--gold) !important; }
.account-points-note { color: var(--text-dim) !important; }

.account-order {
  background: var(--card-bg-alt) !important;
  border-color: var(--card-border) !important;
}
.account-order:hover { border-color: var(--gold) !important; }
.account-order-head b { color: var(--heading-on-dark) !important; }
.account-order-when { color: var(--text-dim) !important; }
.account-order-total { color: var(--gold) !important; }
.account-order-tracking { border-top-color: var(--card-border) !important; color: var(--text-dim) !important; }
.account-order-tracking b { color: var(--text-on-dark) !important; }
.account-empty {
  background: var(--card-bg-alt) !important;
  color: var(--text-dim) !important;
}
.account-empty a { color: var(--gold) !important; }
.pill-status { background: rgba(8, 117, 16, 0.35) !important; color: var(--green-light) !important; }
.pill-pay { background: rgba(245, 184, 0, 0.20) !important; color: var(--gold) !important; }

/* ── Contact info cards — DARK ── */
.contact-info-card,
.contact-methods > * {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-on-dark) !important;
}
.contact-info-card h3,
.contact-info-card h4 { color: var(--heading-on-dark) !important; }
.contact-info-card p { color: var(--text-dim) !important; }

/* ── Form inputs everywhere — DARK ── */
.form-field input:not([type=submit]):not([type=button]),
.form-field textarea,
.form-field select,
input[type=text]:not([type=submit]),
input[type=email],
input[type=tel],
input[type=password],
input[type=search],
textarea {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--card-border) !important;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
input:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.15) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: #6B7280 !important; }

/* ── .btn-white on dark bg → convert to gold outline (no white anywhere) ── */
.btn-white {
  background: transparent !important;
  color: var(--gold) !important;
  border: 2px solid var(--gold) !important;
}
.btn-white:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

/* ── Fix hero button clipping on mobile ── */
@media (max-width: 640px) {
  .home-hero-btns {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.6rem;
  }
  .home-hero-btns .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }
  .hero-full-content {
    padding-right: 1.25rem;
    padding-left: 0.25rem;
    max-width: 100%;
  }
}

/* ── Mini cart drawer stays as an overlay — keep it dark now too ── */
.mini-cart {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}
.mini-cart-header { border-bottom-color: var(--card-border) !important; }
.mini-cart-header h3 { color: var(--heading-on-dark) !important; }
.mc-item { border-bottom-color: var(--card-border) !important; }
.mc-item-name { color: var(--text-on-dark) !important; }
.mc-item-price { color: var(--gold) !important; }

/* ── Logo: safety net in case deployed logo has baked-in white bg ── */
.nav-logo,
.drawer-header a,
.footer-brand > a {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* If a logo image has embedded white bg, this uses PNG's own alpha; already transparent locally */
.nav-logo img,
.drawer-header img,
.footer-brand img {
  background: transparent !important;
}

/* ── Any lingering .bg-cream / white section overrides ── */
.bg-white { background: var(--page-bg) !important; color: var(--text-on-dark) !important; }


/* =========================================================
   v3.13 — PRODUCT GRID BREAKPOINTS
   Desktop: 4 cols · Tablet: 3 cols · Mobile: 2 cols (was 1 at <600px)
   Lee's preference: 2 on mobile, drop to 1 only on tiny screens.
   ========================================================= */
.product-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 800px)  { .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } }
@media (max-width: 360px)  { .product-grid { grid-template-columns: 1fr !important; } }

/* Compact cards at 2-col mobile — smaller padding, tighter text so everything still reads */
@media (max-width: 800px) {
  .product-grid .product-card .product-image { padding: 10px !important; }
  .product-grid .product-card .product-body { padding: 10px 10px 12px !important; }
  .product-grid .product-card .product-name { font-size: 13px !important; min-height: 2.5em; }
  .product-grid .product-card .product-price { font-size: 16px !important; }
  .product-grid .product-card .product-category { font-size: 9.5px !important; }
  .product-grid .product-card .product-stock { font-size: 10px !important; }
  .product-grid .product-card .product-actions .btn { padding: 7px 6px !important; font-size: 11px !important; }
  .product-grid .product-card .product-badge { font-size: 9.5px !important; padding: 4px 8px !important; }
}

/* =========================================================
   v3.14 — TESTIMONIAL + TRUST-STRIP + LINGERING WHITES
   ========================================================= */

/* Fix 1: testimonials on home use .testimonial (not .testimonial-card) */
.testimonial-carousel .testimonial,
.testimonial {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-on-dark) !important;
}
.testimonial-quote { color: var(--text-on-dark) !important; }
.testimonial-author { color: var(--heading-on-dark) !important; }
.testimonial-location { color: var(--text-dim) !important; }
/* The gold border-top curve stays; ensure it renders above dark card */
.testimonial-track { background: transparent !important; }
.testimonial-dot { background: var(--card-border) !important; }
.testimonial-dot.active { background: var(--gold) !important; }

/* Fix 4: trust-strip on mobile — grid with icons + 2-col + tighter */
.trust-strip { background: #101317 !important; }
.trust-strip-inner {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-on-dark);
  font-size: 0.9rem;
  font-weight: 500;
}
.trust-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Mobile trust-strip: 2-col grid with SVG icons prepended via ::before hidden, use data-icon attr */
@media (max-width: 700px) {
  .trust-strip { padding: 1.25rem 0 !important; }
  .trust-strip-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 0.5rem;
    padding: 0 0.5rem;
  }
  .trust-item {
    background: rgba(245, 184, 0, 0.06);
    border: 1px solid rgba(245, 184, 0, 0.15);
    border-radius: 8px;
    padding: 10px 8px;
    justify-content: flex-start;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: left;
  }
  .trust-item::before {
    width: 22px; height: 22px;
    background: rgba(245, 184, 0, 0.15);
    border-radius: 6px;
    display: grid;
    place-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
  }
  /* Icon per trust item — apply via nth-child since we can't add HTML from CSS */
  .trust-item:nth-child(1)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.2' stroke-linecap='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M4 10h16M10 4v16'/></svg>");
  }
  .trust-item:nth-child(2)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L3 14h9l-1 8 10-12h-9l1-8z' fill='%23F5B800'/></svg>");
  }
  .trust-item:nth-child(3)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.2' stroke-linecap='round'><rect x='6' y='4' width='12' height='18' rx='2'/><rect x='9' y='2' width='6' height='2'/><rect x='8' y='7' width='8' height='4' fill='%23F5B800'/></svg>");
  }
  .trust-item:nth-child(4)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 7L4 17l3 3 10-10M17 3l4 4-4 4-4-4z'/></svg>");
  }
  .trust-item:nth-child(5)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z'/><path d='M9 12l2 2 4-4' fill='none' stroke='%23F5B800' stroke-width='2.5'/></svg>");
  }
}

/* Audit — kill any lingering .form-wrap white bgs (inline style is inline, but override) */
.form-wrap[style*="var(--white)"],
.form-wrap[style*="#fff"],
.form-wrap[style*="#FFF"],
.form-wrap[style*="white"] {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
}
.form-wrap {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-on-dark);
}
.form-wrap label { color: var(--text-on-dark) !important; }
.form-wrap .form-section-heading, .form-wrap h4 { color: var(--heading-on-dark) !important; }
/* Wizard form on solar-solutions */
.wizard-form, .lead-form {
  color: var(--text-on-dark);
}
.wizard-step h3, .wizard-step h4 { color: var(--heading-on-dark) !important; }

/* Any generic white-bg overrides — final safety net */
[style*="background:var(--white)"],
[style*="background: var(--white)"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#FFFFFF"],
[style*="background: #FFFFFF"] {
  background: var(--card-bg) !important;
}


/* =========================================================
   v3.15 — KEN BURNS HERO + SCROLL-IN ANIMATIONS
   Respects prefers-reduced-motion: user setting takes precedence.
   ========================================================= */

/* ── Ken Burns on hero slider ────────────────────────────
   Each slide's background bg zooms + pans slowly over ~20s.
   Different keyframes per slide so each has its own motion direction. */
.hero-full-bg {
  will-change: transform;
  transform-origin: center center;
}
.hero-full-slide.active .hero-full-bg {
  animation: kenBurns1 22s ease-out both;
}
.hero-full-slide[data-slide="2"].active .hero-full-bg { animation-name: kenBurns2; }
.hero-full-slide[data-slide="3"].active .hero-full-bg { animation-name: kenBurns3; }
.hero-full-slide[data-slide="4"].active .hero-full-bg { animation-name: kenBurns4; }

@keyframes kenBurns1 {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.14) translate(-2%, -1.5%); }
}
@keyframes kenBurns2 {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.14) translate(2%, -1%); }
}
@keyframes kenBurns3 {
  0%   { transform: scale(1.14) translate(0, 0); }
  100% { transform: scale(1.02) translate(-1%, 1.5%); }
}
@keyframes kenBurns4 {
  0%   { transform: scale(1.02) translate(-1%, 1%); }
  100% { transform: scale(1.14) translate(1%, -1%); }
}

/* Cross-fade between slides — smoother than a hard swap */
.hero-full-slide {
  transition: opacity 1.4s ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.hero-full-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Content scroll-in animations (sitewide) ────────────
   Base .fade-in fades up. Variants: -left, -right, -scale, -stagger.
   Applied when JS observer adds .visible.
   ======================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* Directional variants */
.fade-in-left  { transform: translateX(-40px); }
.fade-in-right { transform: translateX(40px); }
.fade-in-scale { transform: scale(0.92); }
.fade-in-left.visible,
.fade-in-right.visible,
.fade-in-scale.visible { transform: none; }

/* Staggered children — apply to a grid/list to have each child animate in one after the other */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fade-in-stagger.visible > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(2)  { transition-delay: 0.15s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(3)  { transition-delay: 0.25s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(4)  { transition-delay: 0.35s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(5)  { transition-delay: 0.45s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(6)  { transition-delay: 0.55s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(7)  { transition-delay: 0.60s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(8)  { transition-delay: 0.65s; opacity: 1; transform: none; }
.fade-in-stagger.visible > *:nth-child(n+9) { transition-delay: 0.70s; opacity: 1; transform: none; }

/* Hero content on load — fade+rise on the FIRST render */
.hero-full-slide.active .hero-full-content > * {
  animation: heroContentIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero-full-slide.active .hero-full-content > *:nth-child(1) { animation-delay: 0.15s; }
.hero-full-slide.active .hero-full-content > *:nth-child(2) { animation-delay: 0.30s; }
.hero-full-slide.active .hero-full-content > *:nth-child(3) { animation-delay: 0.45s; }
.hero-full-slide.active .hero-full-content > *:nth-child(4) { animation-delay: 0.60s; }
.hero-full-slide.active .hero-full-content > *:nth-child(5) { animation-delay: 0.75s; }
@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Subtle lift on cards + product tiles when they slide in */
.fade-in-stagger.visible > .package-preview,
.fade-in-stagger.visible > .product-card,
.fade-in-stagger.visible > .story-card {
  transform: none;
}

/* Respect user motion preference — kill everything animated */
@media (prefers-reduced-motion: reduce) {
  .hero-full-slide.active .hero-full-bg,
  .hero-full-slide.active .hero-full-content > *,
  .fade-in,
  .fade-in-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   v3.16 — LOGO SIZE + SEO SUPPORT
   ========================================================= */
/* Logo bigger on desktop AND mobile — was 56px everywhere */
.nav-logo img, .nav-logo svg {
  height: 76px !important;    /* was 56 */
  width: auto !important;
}
@media (max-width: 900px) {
  .nav-logo img, .nav-logo svg { height: 60px !important; }
}
/* Header needs a bit more breathing room for the bigger logo */
.site-header .container,
.site-header .nav-wrap {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* Mobile drawer + footer logos also get proportional size bumps */
.drawer-header img { height: 60px !important; }
.footer-brand img { height: 70px !important; }


/* =========================================================
   v3.17 — HERO TEXT / TRUST ICONS / POPPINS / KILL WHITE / NEWSLETTER
   ========================================================= */

/* ── 1. Poppins font sitewide (better than the current serif for body) ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Fraunces:wght@600;700;800&display=swap');
:root {
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}
html, body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif) !important; letter-spacing: -0.01em; }
button, input, select, textarea { font-family: var(--font-sans) !important; }

/* ── 2. Hero slides 2 & 3 text — force WHITE (were black after H1→H2 SEO change) ── */
.hero-full-content h1,
.hero-full-content h2,
.hero-full-content h3 {
  color: #FFFFFF !important;
}
.hero-full-content h2.hero-full-title,
.hero-full-content .hero-full-title {
  color: #FFFFFF !important;
}
.hero-full-content .hero-full-accent {
  color: var(--gold) !important;
}
.hero-full-content p {
  color: rgba(255,255,255,0.94) !important;
}

/* ── 3. Trust-strip icons — apply on DESKTOP too (was mobile-only) ── */
.trust-strip-inner {
  display: flex !important;
  gap: 2rem !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-item {
  display: inline-flex !important;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-on-dark) !important;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.trust-item::before {
  content: '' !important;
  width: 26px !important;
  height: 26px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  border-radius: 0 !important;
  display: inline-block;
}
/* Per-icon SVGs (data-icon attribute drives which one) — clean stroke-only icons */
/* !important overrides the old v3.14 nth-child fallback rules */
.trust-item[data-icon]::before {
  background-color: transparent !important;
  background-size: contain !important;
}
.trust-item[data-icon="flag"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23000000'/><polygon points='0,0 60,0 30,20' fill='%23009B3A'/><polygon points='0,40 60,40 30,20' fill='%23009B3A'/><line x1='0' y1='0' x2='60' y2='40' stroke='%23FED100' stroke-width='5'/><line x1='60' y1='0' x2='0' y2='40' stroke='%23FED100' stroke-width='5'/></svg>") !important;
  border-radius: 3px;
}
.trust-item[data-icon="pin"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>") !important;
}
.trust-item[data-icon="truck"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='6' width='13' height='10' rx='1'/><path d='M14 9h4l3 3v4h-7z'/><circle cx='6' cy='18' r='2'/><circle cx='17.5' cy='18' r='2'/></svg>") !important;
}
.trust-item[data-icon="installer"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.9 6.9a2.12 2.12 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>") !important;
}
.trust-item[data-icon="shield"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z'/><path d='M9 12l2 2 4-4'/></svg>") !important;
}

/* Mobile — trust items as compact tiles (keep the tile look on small screens) */
@media (max-width: 700px) {
  .trust-strip-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem !important;
    padding: 0 0.75rem;
  }
  .trust-item {
    background: rgba(245, 184, 0, 0.06) !important;
    border: 1px solid rgba(245, 184, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 10px 10px !important;
    font-size: 12px !important;
    justify-content: flex-start;
  }
  .trust-item::before {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ── 4. Newsletter — kill the visible box + section styling ── */
#newsletter .newsletter-form-wrap,
#newsletter .form-wrap {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#newsletter { background: var(--page-bg-alt) !important; }
#newsletter h2, #newsletter .eyebrow { color: var(--heading-on-dark) !important; }
#newsletter h2 { color: var(--heading-on-dark) !important; }
#newsletter .eyebrow { color: var(--gold) !important; }
#newsletter p { color: var(--text-dim) !important; }
#newsletter input[type=email] {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--card-border) !important;
}
#newsletter input[type=email]::placeholder { color: #8b8f97 !important; }

/* ── 5. Product cards Add to Cart button — more padding ── */
.product-grid .product-card .product-actions .btn,
.product-card .product-actions .btn {
  padding: 11px 14px !important;
  font-size: 12.5px !important;
  gap: 6px;
}
@media (max-width: 800px) {
  .product-grid .product-card .product-actions .btn {
    padding: 10px 10px !important;
    font-size: 11.5px !important;
  }
}

/* ── 6. NUKE WHITE — global safety net for all pages ── */
/* Any element with a white/near-white bg gets converted to dark card bg */
[style*="background:#fff" i],
[style*="background: #fff" i],
[style*="background:white" i],
[style*="background: white" i],
[style*="background:var(--white)" i],
[style*="background: var(--white)" i],
[style*="background-color:#fff" i],
[style*="background-color: #fff" i],
[style*="background-color:white" i],
[style*="background-color: white" i] {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}

/* Common "card" / "panel" / "box" utility classes get dark treatment */
.info-card,
.value-card,
.promise-card,
.service-card,
.offer-card,
.feature-card,
.experience-card,
.about-card,
.why-card,
.brand-value {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 1px solid var(--card-border) !important;
}
.info-card h2, .info-card h3, .info-card h4,
.value-card h2, .value-card h3, .value-card h4,
.promise-card h2, .promise-card h3, .promise-card h4,
.service-card h2, .service-card h3, .service-card h4,
.offer-card h2, .offer-card h3, .offer-card h4,
.feature-card h2, .feature-card h3, .feature-card h4,
.experience-card h2, .experience-card h3, .experience-card h4,
.about-card h2, .about-card h3, .about-card h4,
.why-card h2, .why-card h3, .why-card h4,
.brand-value h2, .brand-value h3, .brand-value h4 {
  color: var(--heading-on-dark) !important;
}
.info-card p, .value-card p, .promise-card p, .service-card p,
.offer-card p, .feature-card p, .experience-card p, .about-card p,
.why-card p, .brand-value p {
  color: var(--text-dim) !important;
}

/* About page specific — "Who We Are" subtitle + What We Offer + Customer Promises */
.about-hero p, .about-hero-lead {
  color: rgba(255,255,255,0.94) !important;
}
.about-hero-tag { color: var(--gold) !important; }

/* Any section header p that has inline color:var(--ink-soft) sitting on dark bg — override */
section > .container > .section-header > p[style*="ink-soft"],
section > .container > .section-head > p[style*="ink-soft"],
section .section-header p[style*="ink-soft"] {
  color: var(--text-dim) !important;
}

/* Legal / support / FAQ / customized-services content on dark bg — light body text */
.legal-content, .faq-list, .support-blocks, .services-list,
.about-content, .about-story, .who-we-are,
.customized-content, .service-content {
  color: var(--text-on-dark);
}
.legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4,
.faq-list h3, .faq-list h4,
.about-content h2, .about-content h3, .about-content h4,
.customized-content h2, .customized-content h3 {
  color: var(--heading-on-dark) !important;
}
.legal-content p, .about-content p, .customized-content p {
  color: var(--text-dim) !important;
}

/* Kill any lingering .bg-white utility */
.bg-white, .bg-light, .bg-off, .bg-off-white {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}


/* =========================================================
   v3.18 — POST-AUDIT: force one-line headings + kill remaining whites + care plans dark
   ========================================================= */

/* ── 1. Section h2 sizing — smaller so more headings fit 1 line on desktop ── */
section .section-header h2,
section .section-head h2,
section > .container > h2 {
  text-wrap: balance;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem) !important;   /* was up to 2.5rem — smaller so long headings don't wrap */
  line-height: 1.15;
  max-width: 100%;
}
/* On wide desktop (>=1000px), force common long headings to a single line */
@media (min-width: 1000px) {
  section .section-header h2,
  section .section-head h2 {
    white-space: nowrap;
  }
  /* Container needs to be wide enough */
  .section-header, .section-head {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* On mobile — allow wrap, restore balance for readability */
@media (max-width: 999px) {
  section .section-header h2,
  section .section-head h2 {
    white-space: normal;
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
  }
}

/* ── 2. "Get a Customized Solar Assessment" — force one line on desktop ── */
.cta-with-bg h2,
#customized-solar h2,
#solar-assessment h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .cta-with-bg .container-narrow h2,
  .cta-with-bg .container h2 { white-space: nowrap; }
}

/* ── 3. Kill remaining .bg-cream backgrounds SITEWIDE — force dark ── */
section.bg-cream,
section.bg-white,
section.bg-off,
section.bg-off-white,
section.bg-light,
.bg-cream,
.bg-white,
.bg-off,
.bg-off-white,
.bg-light {
  background: var(--page-bg-alt) !important;
  color: var(--text-on-dark) !important;
}
section.bg-cream h1, section.bg-cream h2, section.bg-cream h3, section.bg-cream h4,
section.bg-white h1, section.bg-white h2, section.bg-white h3, section.bg-white h4,
.bg-cream h2, .bg-cream h3, .bg-cream h4,
.bg-white h2, .bg-white h3, .bg-white h4 {
  color: var(--heading-on-dark) !important;
}
section.bg-cream p, section.bg-white p, .bg-cream p, .bg-white p {
  color: var(--text-dim) !important;
}

/* ── 4. Solar packages section (#packages) + care plans (#care-plans) — dark cards inside ── */
#packages, #care-plans, #recent-installs {
  background: var(--page-bg) !important;
}
#packages .package-card,
#packages .solar-package,
#packages [class*="package"],
#care-plans .plan-card,
#care-plans [class*="plan"],
#care-plans .care-card,
#recent-installs .install-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-on-dark) !important;
}
#packages h1, #packages h2, #packages h3, #packages h4,
#care-plans h1, #care-plans h2, #care-plans h3, #care-plans h4,
#recent-installs h1, #recent-installs h2, #recent-installs h3, #recent-installs h4 {
  color: var(--heading-on-dark) !important;
}
#packages p, #care-plans p, #recent-installs p {
  color: var(--text-dim) !important;
}
#packages li, #care-plans li { color: var(--text-on-dark) !important; }
#packages ul, #care-plans ul { border-color: var(--card-border) !important; }
#packages .price, #care-plans .price,
#packages [class*="price"], #care-plans [class*="price"] { color: var(--gold) !important; }

/* ── 5. Any generic .card / .box / .panel utility with implicit white — dark ──
   IMPORTANT: uses background-color (not the background shorthand) so inline
   background-image on cards like .division-4-card that carry a photo aren't wiped.
   Also excludes .division-4-card explicitly since it has its own dark-with-photo styling. */
.card:not(.product-card):not(.package-preview),
.box, .panel, .info-box, .value-box,
[class*="-card"]:not(.product-card):not(.package-preview):not(.card-body):not(.division-4-card) {
  background-color: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--card-border) !important;
}

/* ── 6. Home hero "Not sure which system? Get a Customized Solar Assessment" ── */
.cta-banner h2,
.cta-with-bg h2 {
  text-wrap: balance;
}
@media (min-width: 900px) {
  .cta-banner h2, .cta-with-bg h2 {
    white-space: nowrap;
  }
}

/* ── 7. Safety: any element with computed white bg — nuke it ── */
[style*="#ffffff" i],
[style*="#fefefe" i],
[style*="rgb(255, 255, 255)"],
[style*="rgb(255,255,255)"] {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}


/* =========================================================
   v3.19 — REMOVE CARD BORDERS SITEWIDE
   Client feedback: visible "box lines around corners" look tacky.
   Kill all card borders — cards separate from bg via slightly-lighter fill only.
   Keep radius, keep buttons, keep form inputs (those NEED borders).
   ========================================================= */

/* Every card, panel, box surface — no border */
.product-card,
.product-grid .product-card,
.package-preview,
.story-card,
.testimonial,
.testimonial-card,
.review-card,
.account-card,
.account-panel,
.account-order,
.account-empty,
.contact-info-card,
.contact-methods > *,
.form-wrap,
.newsletter-form-wrap,
.info-card,
.value-card,
.promise-card,
.service-card,
.offer-card,
.feature-card,
.experience-card,
.about-card,
.why-card,
.brand-value,
.mini-cart,
.card,
.box,
.panel,
.info-box,
.value-box,
[class*="-card"]:not(.card-body),
#packages .package-card,
#packages .solar-package,
#packages [class*="package"],
#care-plans .plan-card,
#care-plans [class*="plan"],
#care-plans .care-card,
#recent-installs .install-card,
.faq-item,
.trust-item {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;
}

/* Slightly lift card bg contrast so cards still separate from section bg WITHOUT borders */
.product-card,
.package-preview,
.story-card,
.testimonial,
.testimonial-card,
.account-card,
.account-panel,
.contact-info-card,
.form-wrap,
.info-card,
.value-card,
.promise-card,
.service-card,
.offer-card,
.feature-card,
.experience-card,
.about-card,
.why-card,
.brand-value,
#packages .package-card,
#packages [class*="package"]:not(.package-preview-tag):not(.package-preview-cta),
#care-plans .plan-card,
#care-plans [class*="plan"],
#care-plans .care-card {
  background: var(--card-bg) !important;
}

/* Hover shadow OK — but no border */
.product-grid .product-card:hover,
.product-card:hover {
  border: 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Nested panels inside package cards (TYPICALLY SUPPORTS, feature lists) — no border, subtle bg only */
#packages ul,
#care-plans ul,
.package-preview ul,
.plan-card ul {
  border: 0 !important;
  border-top: 0 !important;
  padding-top: 1rem;
}
#packages .typically-supports,
#packages [class*="supports"],
.card ul.spec-list,
.card .package-supports {
  background: rgba(255,255,255,0.03) !important;
  border: 0 !important;
  border-radius: 8px;
  padding: 10px 14px !important;
}

/* Image plate divider (bottom border under product image) — kill it, use subtle shadow instead */
.product-grid .product-card .product-image,
.product-card .product-image {
  border-bottom: 0 !important;
}

/* Faq accordion — no border between items, just a thin dividing line */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Newsletter input — keeps its border (needed for input recognition), but subtle */
#newsletter input[type=email] {
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Form inputs generally keep their border (subtle) — needed to see input fields */
.form-field input,
.form-field textarea,
.form-field select {
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gold) !important;
}

/* Package preview tag pills (Entry, Most Popular, Business) — keep as pills but no border */
.package-preview-tag {
  border: 0 !important;
}

/* Trust items on mobile — kill the tile border, just the gold-tinted bg */
@media (max-width: 700px) {
  .trust-item {
    border: 0 !important;
    background: rgba(245, 184, 0, 0.08) !important;
  }
}


/* =========================================================
   v3.20 — POPPINS ON HEADINGS TOO + MISSION/VISION GRID + TEXT VISIBILITY
   ========================================================= */

/* Force Poppins EVERYWHERE — including headings. Client wants full Poppins vibe. */
html, body, h1, h2, h3, h4, h5, h6,
.hero-full-title, .solar-hero-title,
.section-header h2, .section-head h2,
.package-preview h3, .product-name,
p, span, a, button, input, textarea, select, label {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .hero-full-title {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Mission + Vision — 2-column grid, dark cards, gold-tinted accent */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 800px) { .mv-grid { grid-template-columns: 1fr; gap: 1rem; } }
.mv-card {
  background: var(--card-bg) !important;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 14px;
  color: var(--text-on-dark);
}
.mv-card .eyebrow {
  color: var(--gold) !important;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}
.mv-card h3 {
  color: var(--heading-on-dark) !important;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  margin: 0.75rem 0 1rem !important;
  line-height: 1.2;
}
.mv-card p {
  color: var(--text-dim) !important;
  line-height: 1.7;
  margin: 0;
}

/* About page — "Who We Are" body text — force white on dark */
section p {
  color: var(--text-on-dark);
}
/* Any inline p with color: var(--ink-soft) needs to lighten on dark */
p[style*="ink-soft"], p[style*="var(--ink-soft)"] {
  color: var(--text-dim) !important;
}
/* But specifically: the "Who We Are" section body text (line-height:1.8 marker) */
section > .container > .about-content p,
section > .container > .container-narrow > p[style*="line-height"] {
  color: var(--text-on-dark) !important;
}
/* Generic paragraph inside sections that appears to sit on the page bg (not on a card) */
section > .container > p,
section > .container > .container-narrow > p {
  color: var(--text-on-dark) !important;
}

/* "Stronger Communities Together" CTA banner — text below must be white */
.cta-banner p, .cta-with-bg p {
  color: rgba(255, 255, 255, 0.92) !important;
}
.cta-banner h2, .cta-with-bg h2 {
  color: #fff !important;
}

/* "Right Solution for You" buttons — smaller so fits one row */
.cta-banner .btn-group .btn.btn-lg,
.cta-with-bg .btn-group .btn.btn-lg {
  padding: 12px 18px !important;
  font-size: 14px !important;
}
@media (max-width: 700px) {
  .cta-banner .btn-group .btn.btn-lg,
  .cta-with-bg .btn-group .btn.btn-lg {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}

/* Newsletter heading force one line where possible */
#newsletter h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
  text-wrap: balance;
}
@media (min-width: 700px) {
  #newsletter h2 { white-space: nowrap; }
}


/* =========================================================
   v3.21 — PRODUCT DETAIL PAGE + CONTACT INFO-BLOCK + PAGE HERO BGS
   ========================================================= */

/* Product single page (/product/) — light text on dark, gold price */
.pd-layout,
.pd-info,
.pd-media {
  color: var(--text-on-dark) !important;
}
.pd-info h1,
.pd-info h2,
.pd-info h3 {
  color: var(--heading-on-dark) !important;
}
.pd-cats,
.pd-cats a,
.pd-cats span {
  color: var(--text-dim) !important;
}
.pd-price {
  color: var(--gold) !important;         /* was black — now gold, visible */
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;   /* was HUGE — bring down */
  font-weight: 800 !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.pd-price-old,
.pd-price .product-price-old {
  color: var(--text-dim) !important;
  text-decoration: line-through;
  font-size: 0.7em !important;
  font-weight: 500 !important;
  margin-left: 0.5rem;
}
.pd-desc,
.pd-desc p,
.pd-desc li,
.pd-desc span {
  color: var(--text-on-dark) !important;
  line-height: 1.7;
}
.pd-desc h1, .pd-desc h2, .pd-desc h3, .pd-desc h4 {
  color: var(--heading-on-dark) !important;
}
.pd-perks {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pd-perk {
  color: var(--text-on-dark) !important;
  background: rgba(245, 184, 0, 0.08);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
}
.pd-qty label,
.pd-buy-row {
  color: var(--text-on-dark) !important;
}
.pd-qty input {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.pd-soldout {
  color: var(--text-dim) !important;
}
.pd-notfound {
  color: var(--text-on-dark) !important;
  text-align: center;
  padding: 4rem 1rem;
}
.pd-notfound h1, .pd-notfound h2 {
  color: var(--heading-on-dark) !important;
}
/* Media panel (product image gallery) — dark bg */
.pd-media {
  background: var(--card-bg) !important;
  border-radius: 14px;
  padding: 1.25rem;
}
.pd-media img {
  border-radius: 8px;
}

/* ── Contact page .info-block — dark card ── */
.info-block {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  padding: clamp(1.5rem, 3vw, 2rem) !important;
  border-radius: 14px !important;
  border: 0 !important;
}
.info-block h3, .info-block h4 {
  color: var(--heading-on-dark) !important;
  margin-top: 0;
}
.info-block p, .info-block strong, .info-block a:not(.btn) {
  color: var(--text-on-dark) !important;
}
.info-block strong { color: var(--heading-on-dark) !important; }
.info-block a:not(.btn):hover { color: var(--gold) !important; }
.info-block .footer-social a {
  background: rgba(255,255,255,0.05);
  color: var(--text-on-dark);
}

/* Grid-2 (contact info blocks in 2 cols) — nice spacing */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }


/* v3.21 patch — product page not-found + wrapper containers */
.pd-notfound,
.pd-layout,
main .pd-layout,
section .pd-notfound {
  background: transparent !important;
  color: var(--text-on-dark) !important;
}
/* If a wrapper section holds the product with an implicit white bg, force dark */
main:has(.pd-layout),
main:has(.pd-notfound),
section:has(.pd-layout),
section:has(.pd-notfound) {
  background: var(--page-bg) !important;
}
.pd-notfound p, .pd-notfound h1, .pd-notfound h2 {
  color: var(--text-on-dark) !important;
}
.pd-notfound h1, .pd-notfound h2 {
  color: var(--heading-on-dark) !important;
}


/* =========================================================
   v3.22 — trust-item CHECK fallback + hard-lock dark theme
   ========================================================= */

.trust-item[data-icon="check"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12l2.5 2.5L16 9'/></svg>") !important;
  background-color: transparent !important;
  background-size: contain !important;
}

/* HARD LOCK — any info-block, grid-2 column, grid-3 column, or any generic
   "column" inside a section MUST be dark. Kill any residual white bg. */
.info-block,
.grid-2 > div,
.grid-3 > div,
.grid-4 > div,
section .info-block,
section .grid-2 > .info-block,
section .grid-3 > .info-block {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border-radius: 14px !important;
  border: 0 !important;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}
.info-block h1, .info-block h2, .info-block h3, .info-block h4,
.grid-2 > div h1, .grid-2 > div h2, .grid-2 > div h3, .grid-2 > div h4,
.grid-3 > div h1, .grid-3 > div h2, .grid-3 > div h3, .grid-3 > div h4 {
  color: var(--heading-on-dark) !important;
}
.info-block p, .info-block li, .info-block ul, .info-block span,
.grid-2 > div p, .grid-2 > div li, .grid-2 > div ul,
.grid-3 > div p, .grid-3 > div li, .grid-3 > div ul {
  color: var(--text-on-dark) !important;
}
.grid-3 > div li, .grid-2 > div li { color: var(--text-on-dark) !important; }

/* Any element with an inline style color:var(--ink-soft) sitting inside a
   .section-header (dark bg) — override to a light muted color */
.section-header p[style*="ink-soft"],
.section-head p[style*="ink-soft"],
section > .container > p[style*="ink-soft"] {
  color: var(--text-dim) !important;
}
/* Same for inline color: var(--ink) — override */
section > .container > p[style*="ink"],
.section-header p[style*="color:var(--ink)"],
.section-head p[style*="color:var(--ink)"] {
  color: var(--text-dim) !important;
}


/* =========================================================
   v3.23 — MARKETPLACE FIX + MOBILE BUTTON OVERFLOW FIX
   ========================================================= */

/* Safety net: product cards inserted DYNAMICALLY (after fade-in observer already fired
   on the parent) get stuck at opacity 0. Force always-visible. Fine for these — the
   parent grid's stagger animation still runs when scrolled into view. */
.product-grid .product-card,
.product-card {
  opacity: 1 !important;
  transform: none !important;
}
.product-grid .product-card.fade-in,
.product-card.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile Add to Cart — hide View Details (redundant since image + name link to product page),
   give Add to Cart full width so text never clips. */
@media (max-width: 800px) {
  .product-grid .product-card .product-actions {
    display: block !important;
    gap: 0 !important;
  }
  .product-grid .product-card .product-actions .btn {
    width: 100%;
    padding: 10px 8px !important;
    font-size: 12px !important;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-width: 0;
    display: block;
    text-align: center;
  }
  /* Hide the secondary Details/outline button on mobile — card image + name still link to detail page */
  .product-grid .product-card .product-actions .btn-outline,
  .product-grid .product-card .product-actions a.btn:not(.btn-primary):not(.btn-gold) {
    display: none !important;
  }
  /* Hide any cart icon inline in the button */
  .product-grid .product-card .product-actions .btn svg,
  .product-grid .product-card .product-actions .btn .cart-icon {
    display: none !important;
  }
}


/* =========================================================
   v3.26 — WHITE AUDIT CLEANUP (rounds 1+2+3 in one shot)
   Kill every remaining white surface on cart/checkout/AC/FAQ/drawers/uploads.
   Text inside gets forced light-on-dark for legibility.
   ========================================================= */

/* ═══════════ ROUND 1 — CRITICAL: CART / CHECKOUT / AC ═══════════ */

/* Cart page — empty state + summary sidebar + items */
.cart-empty,
.cart-summary,
.cart-item,
.cart-container,
aside.cart-summary {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 0 !important;
  border-radius: 14px !important;
}
.cart-empty h2, .cart-empty h3, .cart-empty p,
.cart-summary h2, .cart-summary h3, .cart-summary h4,
.cart-item h4, .cart-item .cart-item-name,
.cart-container h1, .cart-container h2 {
  color: var(--heading-on-dark) !important;
}
.cart-empty p, .cart-summary p, .cart-item p,
.cart-summary li, .cart-summary label,
.cart-summary .cart-line, .cart-summary .cart-line-label,
.cart-item-price, .cart-item-qty, .cart-item-desc {
  color: var(--text-on-dark) !important;
}
.cart-summary .cart-total, .cart-summary strong { color: var(--gold) !important; }
.cart-line { border-color: rgba(255,255,255,0.08) !important; }
.cart-item { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.qty-controls button {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.qty-controls button:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* Checkout — form panel + summary sidebar */
.co-form,
.co-summary,
.co-container,
.co-panel,
.co-card,
.checkout-form,
.checkout-summary {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 0 !important;
  border-radius: 14px !important;
}
.co-form h1, .co-form h2, .co-form h3, .co-form h4,
.co-summary h1, .co-summary h2, .co-summary h3, .co-summary h4 {
  color: var(--heading-on-dark) !important;
}
.co-form label, .co-form p, .co-form small,
.co-summary p, .co-summary label, .co-summary li,
.co-summary strong { color: var(--text-on-dark) !important; }
.co-form small, .co-form .co-hint,
.co-summary .co-line-label, .co-summary .co-note {
  color: var(--text-dim) !important;
}
.co-summary .co-total, .co-summary .co-total strong,
.co-total, .cart-total-value { color: var(--gold) !important; }
/* Guest-vs-account choice card at top of checkout — dark, accented */
.co-account-invite, .co-guest-toggle {
  background: rgba(245, 184, 0, 0.08) !important;
  border: 1px solid rgba(245, 184, 0, 0.25) !important;
  color: var(--text-on-dark) !important;
}
.co-account-invite strong, .co-account-invite b { color: var(--gold) !important; }
/* Loyalty points highlight */
.co-form .points-pill, .co-summary .points-pill {
  background: rgba(245, 184, 0, 0.15) !important;
  color: var(--gold) !important;
}
/* "Back to Basket" link */
.co-summary .back-to-cart, .co-summary a { color: var(--gold) !important; }
.co-summary a:hover { color: #fff !important; }

/* AC tier cards */
.ac-tier {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 0 !important;
  border-radius: 14px !important;
}
.ac-tier h3, .ac-tier h4 { color: var(--heading-on-dark) !important; }
.ac-tier p, .ac-tier li, .ac-tier ul { color: var(--text-on-dark) !important; }
.ac-tier .ac-tier-price, .ac-tier .price, .ac-tier .btu { color: var(--gold) !important; }
.ac-tier .ac-tier-label,
.ac-tier .ac-tier-badge { background: rgba(245,184,0,0.15) !important; color: var(--gold) !important; }
.ac-tier.featured,
.ac-tier.recommended {
  background: linear-gradient(180deg, rgba(245,184,0,0.13) 0%, var(--card-bg) 55%) !important;
}

/* ═══════════ ROUND 2 — HIGH: FAQ + MOBILE DRAWERS ═══════════ */

/* FAQ items — <details> elements need dark treatment. Kill any white bg. */
details.faq-item,
.faq-item {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin-bottom: 8px;
}
details.faq-item summary,
.faq-item summary {
  background: transparent !important;
  color: var(--heading-on-dark) !important;
  padding: 14px 18px !important;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 40px !important;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}
details.faq-item[open] summary::after {
  content: '−';
}
details.faq-item[open] summary {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
details.faq-item > div,
details.faq-item > p,
details.faq-item .faq-body {
  padding: 12px 18px 16px !important;
  color: var(--text-on-dark) !important;
  line-height: 1.65;
}
details.faq-item p, details.faq-item li, details.faq-item ul, details.faq-item ol {
  color: var(--text-on-dark) !important;
}

/* Mobile hamburger drawer */
aside.drawer, .drawer {
  background: var(--page-bg) !important;
  color: var(--text-on-dark) !important;
}
.drawer-header {
  background: var(--card-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.drawer-close {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
  border: 0 !important;
}
.drawer-menu a,
.drawer-menu > li > a {
  color: var(--text-on-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.drawer-menu a:hover,
.drawer-menu a.active {
  background: var(--card-bg-alt) !important;
  color: var(--gold) !important;
}
.drawer-submenu,
ul.drawer-submenu,
ul.drawer-submenu.open {
  background: var(--card-bg-alt) !important;
}
.drawer-submenu a,
.drawer-submenu-heading {
  color: var(--text-on-dark) !important;
}
.drawer-submenu-heading {
  color: var(--gold) !important;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.drawer-submenu a:hover { color: var(--gold) !important; background: rgba(245,184,0,0.05) !important; }
.drawer-cta {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.drawer-cta h4 { color: var(--heading-on-dark) !important; }
.drawer-cta p { color: var(--text-dim) !important; }
.drawer-social {
  background: var(--card-bg) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.drawer-social a {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
}
.drawer-social a:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* Mini-cart drawer (right slide-out when cart icon is tapped) */
aside.mini-cart-drawer,
.mini-cart-drawer,
.mini-cart {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}
.mini-cart-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.mini-cart-header h3, .mini-cart-header h4 { color: var(--heading-on-dark) !important; }
.mini-cart-close {
  background: var(--card-bg-alt) !important;
  color: var(--text-on-dark) !important;
  border: 0 !important;
}
.mini-cart-body { background: transparent !important; }
.mc-item, .mini-cart-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.mc-item-name, .mini-cart-item-name { color: var(--text-on-dark) !important; }
.mc-item-price, .mini-cart-item-price { color: var(--gold) !important; }
.mc-item-qty, .mini-cart-item-qty { color: var(--text-dim) !important; }
.mini-cart-footer, .mini-cart-totals {
  background: var(--card-bg-alt) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text-on-dark) !important;
}
.mini-cart-total, .mini-cart-total strong { color: var(--gold) !important; }
.mini-cart-empty {
  background: transparent !important;
  color: var(--text-dim) !important;
  text-align: center;
  padding: 2rem 1rem;
}

/* ═══════════ ROUND 3 — MEDIUM: FILE UPLOAD / PROJECT TILE / PROMO / PRIVACY ═══════════ */

/* File upload dropzones (contact/services/warranty/quote forms) */
.file-upload,
.file-upload-area,
.file-drop-zone {
  background: var(--card-bg-alt) !important;
  border: 2px dashed rgba(245, 184, 0, 0.3) !important;
  color: var(--text-on-dark) !important;
  border-radius: 10px !important;
}
.file-upload:hover,
.file-upload.dragover {
  background: var(--card-bg) !important;
  border-color: var(--gold) !important;
}
.file-upload label, .file-upload span, .file-upload p {
  color: var(--text-on-dark) !important;
}
.file-upload-icon {
  background: rgba(245, 184, 0, 0.1) !important;
  color: var(--gold) !important;
  border: 0 !important;
}
.file-upload small, .file-upload .hint {
  color: var(--text-dim) !important;
}

/* Home page project tile */
a.project-tile, .project-tile {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
  border-radius: 12px;
  border: 0 !important;
  overflow: hidden;
}
.project-tile h3, .project-tile h4 { color: var(--heading-on-dark) !important; }
.project-tile p, .project-tile span { color: var(--text-dim) !important; }

/* Deals page promo image links */
a.promo-image-link, .promo-image-link,
.promo-card {
  background: var(--card-bg) !important;
  border: 0 !important;
  border-radius: 12px;
}

/* Privacy / legal — any bare paragraph rendering cream */
.legal-content p, .privacy-content p, .terms-content p,
main p[style*="cream"], main p[style*="fafaf"], main p[style*="var(--cream)"] {
  background: transparent !important;
  color: var(--text-on-dark) !important;
}

/* ═══════════ NUCLEAR FALLBACKS ═══════════ */

/* Any anchor / div / aside / article / section rendering solid white or cream — nuke it.
   NARROW enough not to hit buttons (they're covered by btn styles higher up), inputs, or SVGs. */
main [class]:not(button):not(input):not(textarea):not(select):not(svg):not(path):not(img):not(.btn):not(.btn-primary):not(.btn-gold):not(.btn-white):not(.badge):not([class*="ico"])[class*="card"],
main aside[class],
main section[class*="cream"] {
  /* only touch clearly-card-like elements */
}

/* Legacy .bg-cream / .bg-white / etc — one more sweep */
.bg-cream, .bg-white, .bg-off, .bg-off-white, .bg-light,
section.bg-cream, section.bg-white, section.bg-off, section.bg-off-white, section.bg-light {
  background: var(--page-bg-alt) !important;
}

/* Any element with style-attr background of cream/white — override */
[style*="background:#FAF7F0" i],
[style*="background: #FAF7F0" i],
[style*="background-color:#FAF7F0" i],
[style*="background-color: #FAF7F0" i],
[style*="background: rgb(250, 247, 240)"],
[style*="background:rgb(250,247,240)"] {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}


/* v3.26 patch — final drawer-nav + inline var(--cream) sweep */
.drawer-nav a,
.drawer-nav > li > a {
  color: var(--text-on-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: transparent !important;
}
.drawer-nav a:hover,
.drawer-nav a.active,
.drawer-nav > li > a.active {
  background: var(--card-bg-alt) !important;
  color: var(--gold) !important;
}

/* Any inline style using var(--cream) anywhere — kill it */
[style*="var(--cream)"] {
  background: var(--card-bg) !important;
  color: var(--text-on-dark) !important;
}


/* v3.28 — product image placeholder (self-contained, no external file dependency) */
.product-image-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--card-bg-alt) 0%, var(--card-bg) 100%);
  color: var(--gold);
  font-size: 4.5rem;
  line-height: 1;
  opacity: 0.85;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.33 — Package tier colors: VIBRANT brand colors
 *   • Entry    → Rural Roots GREEN
 *   • Popular  → Rural Roots GOLD (most attention)
 *   • Business → Deep INK/black with gold accent (premium)
 * ═══════════════════════════════════════════════════════════════ */

/* ─── PowerStart 6 — Entry (GREEN) ─── */
.package-preview.tier-entry {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border-color: var(--green-deep) !important;
  color: #fff !important;
}
.package-preview.tier-entry h3,
.package-preview.tier-entry > p,
.package-preview.tier-entry ul li {
  color: #fff !important;
}
.package-preview.tier-entry ul {
  border-top-color: rgba(255,255,255,0.25) !important;
}
.package-preview.tier-entry .package-preview-tag {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
.package-preview.tier-entry .package-preview-cta {
  color: var(--gold) !important;
}
.package-preview.tier-entry:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 14px 32px rgba(52, 122, 82, 0.4);
}

/* ─── PowerPro 12 — Most Popular (GOLD) ─── */
.package-preview.tier-popular {
  background: linear-gradient(155deg, var(--gold) 0%, var(--gold-warm, #E4A700) 100%) !important;
  border-color: var(--gold-warm, #E4A700) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 30px rgba(245, 184, 0, 0.28);
}
.package-preview.tier-popular h3,
.package-preview.tier-popular > p,
.package-preview.tier-popular ul li {
  color: var(--ink) !important;
}
.package-preview.tier-popular ul {
  border-top-color: rgba(26,26,26,0.25) !important;
}
.package-preview.tier-popular .package-preview-tag {
  background: var(--ink) !important;
  color: var(--gold) !important;
}
.package-preview.tier-popular .package-preview-cta {
  color: var(--ink) !important;
}
.package-preview.tier-popular:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px rgba(245, 184, 0, 0.4);
}

/* ─── PowerTitan 16 — Business (DEEP INK + gold accent) ─── */
.package-preview.tier-business {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  color: #fff !important;
}
.package-preview.tier-business h3,
.package-preview.tier-business > p,
.package-preview.tier-business ul li {
  color: #fff !important;
}
.package-preview.tier-business ul {
  border-top-color: rgba(255,255,255,0.2) !important;
}
.package-preview.tier-business .package-preview-tag {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.package-preview.tier-business .package-preview-cta {
  color: var(--gold) !important;
}
.package-preview.tier-business:hover {
  border-color: #fff !important;
  box-shadow: 0 14px 32px rgba(245, 184, 0, 0.35);
}

/* Home page — Current Deals & Offers promo grid (2 tiles side by side) */
.home-deals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem auto 0;
  max-width: 780px;   /* v3.35 — tighten so tiles read as previews, not billboards */
}
@media (max-width: 720px) {
  .home-deals-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.home-deals-tile {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  aspect-ratio: 1 / 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
}
.home-deals-tile:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.home-deals-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-deals-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--card-bg-alt), var(--card-bg));
  color: var(--gold);
  font-size: 4rem;
  aspect-ratio: 1 / 1;
}
.home-deals-placeholder span {
  font-size: 0.9rem;
  color: var(--text-dim);
  text-align: center;
  font-family: var(--sans);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.34 — Multi-fix pack (Aug 29)
 *   Task 1: Wider product cards on home #featured-products
 *   Task 2: Section variety — gold hairlines + subtle warm tints
 *   Task 4: Mobile hero buttons 2-per-row (was 1-per-row stacked)
 *   Task 5: Deals promo tiles: no crop — contain the whole poster
 *   Task 6: Newsletter section visually separate from section above
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Task 1: Wider marketplace cards on home ─── */
#homeFeaturedGrid.product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}
@media (max-width: 1100px) {
  #homeFeaturedGrid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  #homeFeaturedGrid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
  }
}
/* Give the image area more visual weight — taller than 1:1 */
#homeFeaturedGrid .product-card .product-image,
#homeFeaturedGrid .product-card .product-image-ph {
  aspect-ratio: 4 / 3 !important;
}

/* ─── Task 4: Mobile hero — 2 buttons per row (was stacked) ─── */
@media (max-width: 640px) {
  .home-hero-btns {
    flex-direction: row !important;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .home-hero-btns .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    padding: 0.7rem 0.4rem !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    min-width: 0;
    text-align: center;
    letter-spacing: -0.005em;
    border-radius: 999px;
    white-space: normal;
  }
  /* .btn-lg specifically — override its larger padding on mobile */
  .home-hero-btns .btn.btn-lg {
    padding: 0.7rem 0.4rem !important;
    font-size: 0.72rem !important;
  }
}

/* ─── Task 5 (v3.35): Deals promo tiles — tidy uniform preview + click-to-lightbox for full view ─── */
.home-deals-tile {
  aspect-ratio: 1 / 1 !important;
  display: block;
  padding: 0;
  cursor: zoom-in;
  position: relative;
}
.home-deals-tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* Little "expand" hint icon in the corner */
.home-deals-tile::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B800' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.home-deals-tile:hover::after { opacity: 1; }
@media (hover: none) { .home-deals-tile::after { opacity: 0.9; } }

/* Lightbox overlay — opens on click of a data-lightbox target */
.ezy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  animation: ezyLightboxIn 0.2s ease-out;
}
@keyframes ezyLightboxIn { from { opacity: 0; } to { opacity: 1; } }
.ezy-lightbox img {
  max-width: min(1000px, 92vw);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.ezy-lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 14px;
  border-radius: 999px;
}
.ezy-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--ink, #1a1a1a);
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.ezy-lightbox-close:hover { background: var(--gold, #F5B800); }

/* ─── Task 6: Newsletter — visual separation from prior section ───
   Green-tinted background (subscribe = fresh feel) + gold hairline top divider. */
section.bg-cream#newsletter {
  background: linear-gradient(180deg, #1a2e1f 0%, var(--card-bg) 100%) !important;
  border-top: 2px solid var(--gold);
  position: relative;
}
section.bg-cream#newsletter::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}
#newsletter .newsletter-form-wrap input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
#newsletter .newsletter-form-wrap input[type="email"]::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

/* ─── Task 2: Section variety on home page ───
   Alternate very-dark → subtle-warm-dark to break the monotone gray.
   Also add a slim gold hairline between sections for rhythm. */
#featured-products {
  background: linear-gradient(180deg, var(--card-bg) 0%, #26251f 100%) !important;
  position: relative;
}
#featured-products::after,
#reviews::after,
#home-deals::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}
#featured-products, #reviews, #home-deals {
  position: relative;
}
#reviews {
  background: linear-gradient(180deg, var(--card-bg) 0%, #1e2830 100%) !important;
}
#home-deals {
  background: linear-gradient(180deg, #26251f 0%, var(--card-bg) 100%) !important;
}

/* Solar packages section — subtle green wash */
section:has(.package-preview-grid) {
  background: linear-gradient(180deg, var(--card-bg) 0%, #1a2621 60%, var(--card-bg) 100%) !important;
}

/* Trust strip — 6 items now, ensure clean wrap on all sizes */
@media (min-width: 900px) {
  .trust-strip-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
  }
}
@media (max-width: 640px) {
  .trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  .trust-item {
    font-size: 0.82rem;
    justify-content: center;
    text-align: center;
  }
}

/* v3.35 (fix) — 6th trust item ("Free Site Assessments") MOBILE ONLY */
.trust-item[data-icon="check"] { display: none !important; }
@media (max-width: 640px) {
  .trust-item[data-icon="check"] { display: inline-flex !important; }
}
/* On mobile the trust strip is a 2-col grid — with 6 items now that's a clean 3 rows.
   With 5 items visible it would be 2/2/1 (last row lonely). So verify grid still balanced. */

/* ═══════════════════════════════════════════════════════════════
 * v3.36 — Section background image system
 * Sections keep their gray/dark base + get a subtle background image
 * showing through an ~85% dark overlay. Adds texture without
 * competing with the content.
 *
 * How it works:
 *   background = linear-gradient(dark-overlay) + image
 * If the image file isn't uploaded yet, the linear-gradient is
 * fully opaque (dark) so the section looks identical to before.
 * Once Clive uploads via Image Manager → subtle texture appears.
 * ═══════════════════════════════════════════════════════════════ */

#our-divisions {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/05-bg-our-divisions.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

#featured-solar {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/06-bg-solar-packages.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* Section bg images are decorative — never fall foul of shorthand rules that
   wiped inline background-image (division cards / page-heros bug earlier).
   These use background-color explicitly as fallback so the layered background
   above works even if the image 404s. */

/* ═══════════════════════════════════════════════════════════════
 * v3.38 — Section bg image rollout + About page structural fixes
 * ═══════════════════════════════════════════════════════════════ */

/* ── Task 5 (home): "Get a Customized Solar Assessment" — one line on desktop ── */
@media (min-width: 900px) {
  #customized-solar h2 {
    white-space: nowrap;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  }
}

/* ── Tasks 1-4 (home) + 7-8, 10, 11, 13 (about): section bg image slots ──
   Same pattern as v3.36 divisions/solar: 93% dark overlay over an image.
   Fallback: fully dark if no image uploaded yet.                        */
#featured-products {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/07-bg-featured-products.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#reviews {
  background:
    linear-gradient(rgba(26, 26, 26, 0.94), rgba(26, 26, 26, 0.94)),
    url('/images/08-bg-testimonials.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#home-deals {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/09-bg-current-deals.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
section.bg-cream#newsletter {
  /* Newsletter had a green tint override — keep the accent, add bg image */
  background:
    linear-gradient(rgba(26, 46, 31, 0.92), rgba(26, 46, 31, 0.92)),
    url('/images/10-bg-newsletter.jpg') center/cover no-repeat !important;
  background-color: #1a2e1f !important;
}

/* About page — 7 section backgrounds */
#about-who-we-are {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/11-bg-about-who-we-are.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#about-what-we-offer {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/12-bg-about-what-we-offer.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#about-core-values {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/13-bg-about-core-values.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#about-cx-promise {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/14-bg-about-cx-promise.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#about-why-rural-roots {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/15-bg-about-why.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#about-work-with-us {
  background:
    linear-gradient(rgba(26, 26, 26, 0.93), rgba(26, 26, 26, 0.93)),
    url('/images/16-bg-about-work-with-us.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* ── Task 6 (about): 2-column "Who We Are" layout ── */
.about-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1000px;
  margin: 2rem auto 0;
}
.about-2col-left, .about-2col-right {
  display: flex;
  flex-direction: column;
}
@media (max-width: 820px) {
  .about-2col { grid-template-columns: 1fr; gap: 1rem; max-width: 700px; }
}

/* ── Task 9 (about): ROOTS — 5 letters in one line + brand-color hover ── */
#about-core-values .grid-3 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1rem !important;
}
@media (max-width: 1100px) {
  #about-core-values .grid-3 { gap: 0.6rem !important; }
  #about-core-values .service-card { padding: 1.25rem 0.75rem !important; }
  #about-core-values .service-card h4 { font-size: 0.95rem !important; }
  #about-core-values .service-card p  { font-size: 0.82rem !important; line-height: 1.5 !important; }
}
@media (max-width: 720px) {
  #about-core-values .grid-3 {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0.35rem !important;
  }
  #about-core-values .service-card { padding: 0.75rem 0.35rem !important; }
  #about-core-values .service-card h4 { font-size: 0.68rem !important; margin-top: 0.4rem !important; }
  #about-core-values .service-card p  { font-size: 0.65rem !important; line-height: 1.35 !important; }
  #about-core-values .letter-badge { width: 32px !important; height: 32px !important; font-size: 1.05rem !important; }
}

/* Brand-color hover on each ROOTS card — cycle through green/gold accents */
#about-core-values .service-card {
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s, background 0.25s;
  border: 1px solid var(--card-border);
  cursor: default;
}
#about-core-values .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
/* Different accent per position — R O O T S */
#about-core-values .grid-3 > .service-card:nth-child(1):hover {
  border-color: var(--green);
  background: linear-gradient(160deg, rgba(52,122,82,0.20) 0%, var(--card-bg) 60%) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(1):hover .letter-badge {
  background: var(--green); color: #fff;
}
#about-core-values .grid-3 > .service-card:nth-child(2):hover {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(245,184,0,0.20) 0%, var(--card-bg) 60%) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(2):hover .letter-badge {
  background: var(--gold); color: var(--ink);
}
#about-core-values .grid-3 > .service-card:nth-child(3):hover {
  border-color: var(--green);
  background: linear-gradient(160deg, rgba(52,122,82,0.20) 0%, var(--card-bg) 60%) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(3):hover .letter-badge {
  background: var(--green); color: #fff;
}
#about-core-values .grid-3 > .service-card:nth-child(4):hover {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(245,184,0,0.20) 0%, var(--card-bg) 60%) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(4):hover .letter-badge {
  background: var(--gold); color: var(--ink);
}
#about-core-values .grid-3 > .service-card:nth-child(5):hover {
  border-color: var(--green);
  background: linear-gradient(160deg, rgba(52,122,82,0.20) 0%, var(--card-bg) 60%) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(5):hover .letter-badge {
  background: var(--green); color: #fff;
}

/* ── Task 11 (about): "Why Rural Roots?" FAQ section — nicer look ── */
#about-why-rural-roots .faq-item,
#about-why-rural-roots details.faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  margin-bottom: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#about-why-rural-roots .faq-item:hover,
#about-why-rural-roots details.faq-item[open] {
  border-color: var(--gold) !important;
  box-shadow: 0 6px 18px rgba(245,184,0,0.08);
}
#about-why-rural-roots details.faq-item summary {
  padding: 1.1rem 1.3rem !important;
  font-weight: 600 !important;
  color: #fff !important;
}
#about-why-rural-roots details.faq-item[open] summary { color: var(--gold) !important; }

/* ── Task 11 (about) polish: Why Rural Roots checklist → 2-col grid with cards ── */
.why-rr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}
@media (max-width: 720px) {
  .why-rr-grid { grid-template-columns: 1fr; gap: 0.5rem; }
}
.why-rr-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--card-border);
  border-radius: 10px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.why-rr-item:hover {
  transform: translateX(4px);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(245,184,0,0.08), rgba(245,184,0,0.02));
  box-shadow: 0 4px 14px rgba(245,184,0,0.10);
}
.why-rr-check {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.95rem;
}
.why-rr-label {
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.39 — Vibrant tier-color system (site-wide reusable)
 * 6 tier colors that can decorate any card grid. Applied via
 * nth-child selectors on specific grid IDs page by page.
 *
 * Palette:
 *   green — brand primary; grounded, natural
 *   gold  — brand accent; attention, popularity
 *   ink   — deep black with gold border; premium, catch-all
 *   blue  — trust, water, communication
 *   teal  — cool, service, clarity
 *   plum  — warmth, community, service
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Universal tier-color mixin — apply to any .division-card / .service-card / .mv-card / .package-preview ─── */
.tier-color-green,
.tier-color-gold,
.tier-color-blue,
.tier-color-teal,
.tier-color-ink,
.tier-color-plum {
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s !important;
}

.tier-color-green {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important;
  color: #fff !important;
}
.tier-color-green h3, .tier-color-green h4, .tier-color-green p, .tier-color-green li,
.tier-color-green .service-icon svg { color: #fff !important; stroke: #fff !important; }
.tier-color-green .eyebrow { color: rgba(255,255,255,0.85) !important; }
.tier-color-green:hover { border-color: var(--gold) !important; box-shadow: 0 14px 32px rgba(52,122,82,0.4); transform: translateY(-4px); }

.tier-color-gold {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border: 1px solid #E4A700 !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 26px rgba(245,184,0,0.25);
}
.tier-color-gold h3, .tier-color-gold h4, .tier-color-gold p, .tier-color-gold li,
.tier-color-gold .service-icon svg { color: var(--ink) !important; stroke: var(--ink) !important; }
.tier-color-gold .eyebrow { color: var(--ink) !important; opacity: 0.75; }
.tier-color-gold:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgba(245,184,0,0.45); }

.tier-color-ink {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  color: #fff !important;
}
.tier-color-ink h3, .tier-color-ink h4, .tier-color-ink p, .tier-color-ink li,
.tier-color-ink .service-icon svg { color: #fff !important; stroke: #fff !important; }
.tier-color-ink .eyebrow { color: var(--gold) !important; }
.tier-color-ink:hover { border-color: #fff !important; box-shadow: 0 14px 32px rgba(245,184,0,0.35); transform: translateY(-4px); }

.tier-color-blue {
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border: 1px solid #14406e !important;
  color: #fff !important;
}
.tier-color-blue h3, .tier-color-blue h4, .tier-color-blue p, .tier-color-blue li,
.tier-color-blue .service-icon svg { color: #fff !important; stroke: #fff !important; }
.tier-color-blue .eyebrow { color: rgba(255,255,255,0.85) !important; }
.tier-color-blue:hover { border-color: var(--gold) !important; box-shadow: 0 14px 32px rgba(37,99,168,0.4); transform: translateY(-4px); }

.tier-color-teal {
  background: linear-gradient(155deg, #14a196 0%, #0d6b64 100%) !important;
  border: 1px solid #0d6b64 !important;
  color: #fff !important;
}
.tier-color-teal h3, .tier-color-teal h4, .tier-color-teal p, .tier-color-teal li,
.tier-color-teal .service-icon svg { color: #fff !important; stroke: #fff !important; }
.tier-color-teal .eyebrow { color: rgba(255,255,255,0.85) !important; }
.tier-color-teal:hover { border-color: var(--gold) !important; box-shadow: 0 14px 32px rgba(20,161,150,0.4); transform: translateY(-4px); }

.tier-color-plum {
  background: linear-gradient(155deg, #7a3f6b 0%, #4d2542 100%) !important;
  border: 1px solid #4d2542 !important;
  color: #fff !important;
}
.tier-color-plum h3, .tier-color-plum h4, .tier-color-plum p, .tier-color-plum li,
.tier-color-plum .service-icon svg { color: #fff !important; stroke: #fff !important; }
.tier-color-plum .eyebrow { color: rgba(255,255,255,0.85) !important; }
.tier-color-plum:hover { border-color: var(--gold) !important; box-shadow: 0 14px 32px rgba(122,63,107,0.4); transform: translateY(-4px); }

/* Ensure buttons inside colored cards stay legible — swap primary buttons to gold */
.tier-color-green .btn-primary,
.tier-color-blue .btn-primary,
.tier-color-teal .btn-primary,
.tier-color-plum .btn-primary,
.tier-color-ink .btn-primary {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: none;
}
.tier-color-gold .btn-primary {
  background: var(--ink) !important;
  color: var(--gold) !important;
  border: none;
}

/* ─── ABOUT · What We Offer (5 cards) ─── */
#wwo-grid > article:nth-child(1) { /* Solar Solutions */
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important; color: #fff !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#wwo-grid > article:nth-child(2) { /* Irrigation */
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border: 1px solid #14406e !important; color: #fff !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#wwo-grid > article:nth-child(3) { /* Air Conditioning */
  background: linear-gradient(155deg, #14a196 0%, #0d6b64 100%) !important;
  border: 1px solid #0d6b64 !important; color: #fff !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#wwo-grid > article:nth-child(4) { /* Rural Roots Marketplace */
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border: 1px solid #E4A700 !important; color: var(--ink) !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
  box-shadow: 0 10px 26px rgba(245,184,0,0.25);
}
#wwo-grid > article:nth-child(5) { /* Specialized Services — spans 2 cols */
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important; color: #fff !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}

/* Text colors for each */
#wwo-grid > article:nth-child(1) h3, #wwo-grid > article:nth-child(1) p { color: #fff !important; }
#wwo-grid > article:nth-child(2) h3, #wwo-grid > article:nth-child(2) p { color: #fff !important; }
#wwo-grid > article:nth-child(3) h3, #wwo-grid > article:nth-child(3) p { color: #fff !important; }
#wwo-grid > article:nth-child(4) h3, #wwo-grid > article:nth-child(4) p { color: var(--ink) !important; }
#wwo-grid > article:nth-child(5) h3, #wwo-grid > article:nth-child(5) p { color: #fff !important; }

/* Buttons inside — gold on dark, ink on gold */
#wwo-grid > article:nth-child(4) .btn-primary { background: var(--ink) !important; color: var(--gold) !important; }
#wwo-grid > article:nth-child(1) .btn-primary,
#wwo-grid > article:nth-child(2) .btn-primary,
#wwo-grid > article:nth-child(3) .btn-primary,
#wwo-grid > article:nth-child(5) .btn-primary { background: var(--gold) !important; color: var(--ink) !important; }

#wwo-grid > article:hover { transform: translateY(-4px); }

/* ─── ABOUT · Mission / Vision (2 cards) ─── */
.mv-grid .mv-card:nth-child(1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important; color: #fff !important;
  padding: 2rem !important;
  border-radius: var(--radius-lg);
  transition: transform 0.2s, box-shadow 0.25s;
}
.mv-grid .mv-card:nth-child(2) {
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border: 1px solid #14406e !important; color: #fff !important;
  padding: 2rem !important;
  border-radius: var(--radius-lg);
  transition: transform 0.2s, box-shadow 0.25s;
}
.mv-grid .mv-card h3, .mv-grid .mv-card p { color: #fff !important; }
.mv-grid .mv-card .eyebrow { color: var(--gold) !important; }
.mv-grid .mv-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.4); }

/* ─── ABOUT · Customer Experience Promise (6 cards — 6 colors cycle) ─── */
#cxp-grid > .service-card:nth-child(1),
#cxp-grid > .service-card:nth-child(7) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important;
}
#cxp-grid > .service-card:nth-child(2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border: 1px solid #E4A700 !important; color: var(--ink) !important;
}
#cxp-grid > .service-card:nth-child(3) {
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border: 1px solid #14406e !important;
}
#cxp-grid > .service-card:nth-child(4) {
  background: linear-gradient(155deg, #14a196 0%, #0d6b64 100%) !important;
  border: 1px solid #0d6b64 !important;
}
#cxp-grid > .service-card:nth-child(5) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
}
#cxp-grid > .service-card:nth-child(6) {
  background: linear-gradient(155deg, #7a3f6b 0%, #4d2542 100%) !important;
  border: 1px solid #4d2542 !important;
}
/* Text colors — most white, gold-card gets ink */
#cxp-grid > .service-card:not(:nth-child(2)) h4,
#cxp-grid > .service-card:not(:nth-child(2)) p,
#cxp-grid > .service-card:not(:nth-child(2)) .service-icon svg {
  color: #fff !important; stroke: #fff !important;
}
#cxp-grid > .service-card:nth-child(2) h4,
#cxp-grid > .service-card:nth-child(2) p,
#cxp-grid > .service-card:nth-child(2) .service-icon svg {
  color: var(--ink) !important; stroke: var(--ink) !important;
}
#cxp-grid > .service-card {
  transition: transform 0.2s, box-shadow 0.25s;
}
#cxp-grid > .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }

/* ─── ABOUT · R.O.O.T.S. — shrink cards (Lee: "too vertical") ─── */
#about-core-values .service-card {
  padding: 1rem 0.7rem !important;
}
#about-core-values .service-card h4 {
  font-size: 0.92rem !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.4rem !important;
}
#about-core-values .service-card p {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}
#about-core-values .letter-badge {
  width: 42px !important; height: 42px !important;
  font-size: 1.35rem !important;
}
@media (max-width: 1100px) {
  #about-core-values .service-card h4 { font-size: 0.85rem !important; }
  #about-core-values .service-card p { font-size: 0.72rem !important; }
}

/* ─── SOLAR SOLUTIONS · Why Rural Roots for Solar (3 cards) ─── */
#solar-promise-grid > .service-card:nth-child(1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#solar-promise-grid > .service-card:nth-child(2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border: 1px solid #E4A700 !important; color: var(--ink) !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
  box-shadow: 0 10px 26px rgba(245,184,0,0.25);
}
#solar-promise-grid > .service-card:nth-child(3) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#solar-promise-grid > .service-card:nth-child(1) h4,
#solar-promise-grid > .service-card:nth-child(1) p,
#solar-promise-grid > .service-card:nth-child(1) .service-icon svg,
#solar-promise-grid > .service-card:nth-child(3) h4,
#solar-promise-grid > .service-card:nth-child(3) p,
#solar-promise-grid > .service-card:nth-child(3) .service-icon svg {
  color: #fff !important; stroke: #fff !important;
}
#solar-promise-grid > .service-card:nth-child(2) h4,
#solar-promise-grid > .service-card:nth-child(2) p,
#solar-promise-grid > .service-card:nth-child(2) .service-icon svg {
  color: var(--ink) !important; stroke: var(--ink) !important;
}
#solar-promise-grid > .service-card:hover { transform: translateY(-4px); }

/* v3.39 fix — .division-card-body inside colored cards must be transparent
   so the parent article's gradient shows through */
#wwo-grid > article > .division-card-body,
.mv-grid .mv-card,
#cxp-grid > .service-card > *,
#solar-promise-grid > .service-card {
  background: transparent !important;
}

/* Also — some children like ::before overlays or bg-hover states must not
   paint over our gradient. Reset any background/box-shadow on inner blocks. */
#wwo-grid > article {
  overflow: hidden;
  position: relative;
  padding: 0;   /* body has its own padding */
}
#wwo-grid > article > .division-card-body {
  background: transparent !important;
  padding: 2rem 1.75rem !important;
  position: relative;
  z-index: 1;
}

/* Some card packs use ::before for hover accents — kill it inside colored cards */
#wwo-grid > article::before { display: none !important; }

/* Ensure the eyebrow "OUR MISSION" / "OUR VISION" pops on solid backgrounds */
.mv-grid .mv-card .eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

/* v3.39 polish — service-icon inside colored cards should be transparent/matched */
#solar-promise-grid > .service-card .service-icon,
#cxp-grid > .service-card .service-icon,
#about-core-values .service-card .letter-badge {
  background: transparent !important;
  box-shadow: none !important;
}
#solar-promise-grid > .service-card:nth-child(1) .service-icon,
#solar-promise-grid > .service-card:nth-child(3) .service-icon,
#cxp-grid > .service-card:not(:nth-child(2)) .service-icon {
  background: rgba(255,255,255,0.15) !important;
}
#solar-promise-grid > .service-card:nth-child(2) .service-icon,
#cxp-grid > .service-card:nth-child(2) .service-icon {
  background: rgba(0,0,0,0.15) !important;
}
/* Icons themselves — colors */
#solar-promise-grid > .service-card:nth-child(1) .service-icon svg,
#solar-promise-grid > .service-card:nth-child(3) .service-icon svg,
#cxp-grid > .service-card:not(:nth-child(2)) .service-icon svg {
  stroke: #fff !important;
}
#solar-promise-grid > .service-card:nth-child(2) .service-icon svg,
#cxp-grid > .service-card:nth-child(2) .service-icon svg {
  stroke: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.40 — Site-wide tier colors + bg image slots (all pages)
 * ═══════════════════════════════════════════════════════════════ */

/* Reusable 3-card tier mixin: nth-child(1)=green, (2)=gold, (3)=ink+gold-border.
   Applied to any grid id in this list. */
#home-why-grid > .service-card:nth-child(1),
#irrigation-why-grid > .service-card:nth-child(1),
#ac-why-grid > .service-card:nth-child(1),
#contact-cards-grid > .service-card:nth-child(1),
#contact-cards-grid > .division-card:nth-child(1),
#contact-cards-grid > article:nth-child(1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important;
  color: #fff !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#home-why-grid > .service-card:nth-child(2),
#irrigation-why-grid > .service-card:nth-child(2),
#ac-why-grid > .service-card:nth-child(2),
#contact-cards-grid > .service-card:nth-child(2),
#contact-cards-grid > .division-card:nth-child(2),
#contact-cards-grid > article:nth-child(2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border: 1px solid #E4A700 !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 26px rgba(245,184,0,0.25);
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
#home-why-grid > .service-card:nth-child(3),
#irrigation-why-grid > .service-card:nth-child(3),
#ac-why-grid > .service-card:nth-child(3),
#contact-cards-grid > .service-card:nth-child(3),
#contact-cards-grid > .division-card:nth-child(3),
#contact-cards-grid > article:nth-child(3) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  color: #fff !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}

/* Text + icons inside colored cards */
#home-why-grid > .service-card:nth-child(1) h4,
#home-why-grid > .service-card:nth-child(1) p,
#home-why-grid > .service-card:nth-child(1) .service-icon svg,
#home-why-grid > .service-card:nth-child(3) h4,
#home-why-grid > .service-card:nth-child(3) p,
#home-why-grid > .service-card:nth-child(3) .service-icon svg,
#irrigation-why-grid > .service-card:nth-child(1) h4,
#irrigation-why-grid > .service-card:nth-child(1) p,
#irrigation-why-grid > .service-card:nth-child(1) .service-icon svg,
#irrigation-why-grid > .service-card:nth-child(3) h4,
#irrigation-why-grid > .service-card:nth-child(3) p,
#irrigation-why-grid > .service-card:nth-child(3) .service-icon svg,
#ac-why-grid > .service-card:nth-child(1) h4,
#ac-why-grid > .service-card:nth-child(1) p,
#ac-why-grid > .service-card:nth-child(1) .service-icon svg,
#ac-why-grid > .service-card:nth-child(3) h4,
#ac-why-grid > .service-card:nth-child(3) p,
#ac-why-grid > .service-card:nth-child(3) .service-icon svg,
#contact-cards-grid > *:nth-child(1) h3, #contact-cards-grid > *:nth-child(1) h4, #contact-cards-grid > *:nth-child(1) p, #contact-cards-grid > *:nth-child(1) a,
#contact-cards-grid > *:nth-child(3) h3, #contact-cards-grid > *:nth-child(3) h4, #contact-cards-grid > *:nth-child(3) p, #contact-cards-grid > *:nth-child(3) a {
  color: #fff !important; stroke: #fff !important;
}
#home-why-grid > .service-card:nth-child(2) h4,
#home-why-grid > .service-card:nth-child(2) p,
#home-why-grid > .service-card:nth-child(2) .service-icon svg,
#irrigation-why-grid > .service-card:nth-child(2) h4,
#irrigation-why-grid > .service-card:nth-child(2) p,
#irrigation-why-grid > .service-card:nth-child(2) .service-icon svg,
#ac-why-grid > .service-card:nth-child(2) h4,
#ac-why-grid > .service-card:nth-child(2) p,
#ac-why-grid > .service-card:nth-child(2) .service-icon svg,
#contact-cards-grid > *:nth-child(2) h3, #contact-cards-grid > *:nth-child(2) h4, #contact-cards-grid > *:nth-child(2) p, #contact-cards-grid > *:nth-child(2) a {
  color: var(--ink) !important; stroke: var(--ink) !important;
}
/* Icon container tinting */
#home-why-grid .service-icon,
#irrigation-why-grid .service-icon,
#ac-why-grid .service-icon {
  background: transparent !important; box-shadow: none !important;
}
#home-why-grid > .service-card:nth-child(1) .service-icon,
#home-why-grid > .service-card:nth-child(3) .service-icon,
#irrigation-why-grid > .service-card:nth-child(1) .service-icon,
#irrigation-why-grid > .service-card:nth-child(3) .service-icon,
#ac-why-grid > .service-card:nth-child(1) .service-icon,
#ac-why-grid > .service-card:nth-child(3) .service-icon {
  background: rgba(255,255,255,0.15) !important;
}
#home-why-grid > .service-card:nth-child(2) .service-icon,
#irrigation-why-grid > .service-card:nth-child(2) .service-icon,
#ac-why-grid > .service-card:nth-child(2) .service-icon {
  background: rgba(0,0,0,0.15) !important;
}
/* Hover — all */
#home-why-grid > .service-card:hover,
#irrigation-why-grid > .service-card:hover,
#ac-why-grid > .service-card:hover,
#contact-cards-grid > *:hover { transform: translateY(-4px); }

/* ═══════════════════════════════════════════════════════════════
 * v3.40 — Section bg image slots — site-wide
 * ═══════════════════════════════════════════════════════════════ */

/* Home — Why Rural Roots */
#home-why {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/17-bg-home-why.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* Irrigation */
#irrigation-why {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/18-bg-irrigation-why.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#drip-hose {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/19-bg-drip-hose.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#drip-tape {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/20-bg-drip-tape.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#main-hose {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/21-bg-main-hose.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#fittings {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/22-bg-fittings.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#mulch-film {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/23-bg-mulch-film.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#weed-mat {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/24-bg-weed-mat.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#irrigation-faq {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/25-bg-irrigation-faq.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* Solar Solutions */
#solar-why {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/26-bg-solar-why.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#packages {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/27-bg-solar-packages-page.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#care-plans {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/28-bg-solar-care-plans.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#recent-installs {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/29-bg-solar-installs.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#solar-assessment {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/30-bg-solar-assessment.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* Air Conditioning */
#ac-why {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/31-bg-ac-why.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#ac-range {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/32-bg-ac-range.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#solar-ac-combo {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/33-bg-solar-ac-combo.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#ac-faq {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/34-bg-ac-faq.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* Marketplace — one bg for the main content area (scrolls behind products) */
#marketplace-main {
  background:
    linear-gradient(rgba(26,26,26,0.94), rgba(26,26,26,0.94)),
    url('/images/35-bg-marketplace-main.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
  background-attachment: fixed;   /* parallax effect — products scroll, bg stays */
}

/* Services — each of 7 sub-sections */
#solar-install {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/36-bg-svc-solar-install.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#irrigation-install {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/37-bg-svc-irrigation-install.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#ac-install {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/38-bg-svc-ac-install.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#billboard {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/39-bg-svc-billboard.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#special-orders {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/40-bg-svc-special-orders.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#event-space {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/41-bg-svc-event-space.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#service-request {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/42-bg-svc-request.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* Contact */
#contact-cards {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/43-bg-contact-cards.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}
#inquiry {
  background:
    linear-gradient(rgba(26,26,26,0.93), rgba(26,26,26,0.93)),
    url('/images/44-bg-contact-inquiry.jpg') center/cover no-repeat !important;
  background-color: var(--card-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.41 — Client feedback pass:
 *   • ABOUT · Who We Are 2-col → each column as black+gold card
 *   • ABOUT · R.O.O.T.S. 5 cards → colored backgrounds (green/gold cycle)
 *   • ABOUT · Why RR checklist → each item as black+gold card
 *   • HOME  · Testimonials → each card as black+gold (matches Specialized Services)
 * ═══════════════════════════════════════════════════════════════ */

/* ── ABOUT · Who We Are — 2-col text becomes 2 black+gold cards ── */
.about-2col {
  gap: 2rem !important;
}
.about-2col > .about-2col-left,
.about-2col > .about-2col-right {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.about-2col > .about-2col-left:hover,
.about-2col > .about-2col-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(245,184,0,0.25);
  border-color: #fff !important;
}
.about-2col p { color: #fff !important; }

/* ── ABOUT · R.O.O.T.S. 5 cards — cycling colors (green/gold/blue/teal/plum) ── */
#about-core-values .service-card {
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s !important;
}
/* Card 1 — Resilience — green */
#about-core-values .grid-3 > .service-card:nth-child(1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border: 1px solid var(--green-deep) !important;
}
/* Card 2 — Opportunity — gold */
#about-core-values .grid-3 > .service-card:nth-child(2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border: 1px solid #E4A700 !important;
}
/* Card 3 — Ownership — blue */
#about-core-values .grid-3 > .service-card:nth-child(3) {
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border: 1px solid #14406e !important;
}
/* Card 4 — Transformation — teal */
#about-core-values .grid-3 > .service-card:nth-child(4) {
  background: linear-gradient(155deg, #14a196 0%, #0d6b64 100%) !important;
  border: 1px solid #0d6b64 !important;
}
/* Card 5 — Synergy — plum */
#about-core-values .grid-3 > .service-card:nth-child(5) {
  background: linear-gradient(155deg, #7a3f6b 0%, #4d2542 100%) !important;
  border: 1px solid #4d2542 !important;
}
/* Text on all — white; letter-badge in gold pill on all */
#about-core-values .grid-3 > .service-card:not(:nth-child(2)) h4,
#about-core-values .grid-3 > .service-card:not(:nth-child(2)) p {
  color: #fff !important;
}
#about-core-values .grid-3 > .service-card:nth-child(2) h4,
#about-core-values .grid-3 > .service-card:nth-child(2) p {
  color: var(--ink) !important;
}
#about-core-values .grid-3 > .service-card .letter-badge {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
#about-core-values .grid-3 > .service-card:nth-child(2) .letter-badge {
  background: rgba(0,0,0,0.18) !important;
  color: var(--ink) !important;
}
#about-core-values .grid-3 > .service-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
#about-core-values .grid-3 > .service-card:nth-child(2):hover {
  border-color: var(--ink) !important;
}

/* ── ABOUT · Why RR checklist — each item as black+gold card ── */
.why-rr-item {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  padding: 1.1rem 1.3rem !important;
}
.why-rr-item:hover {
  background: linear-gradient(155deg, #1f1f1f 0%, #0f0f0f 100%) !important;
  transform: translateY(-3px);
  border-color: #fff !important;
  box-shadow: 0 8px 22px rgba(245,184,0,0.28);
}

/* ── HOME · Testimonials — each carousel card as black+gold ── */
.testimonial-carousel .testimonial {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid var(--gold) !important;
  border-radius: var(--radius-lg);
  padding: 2rem 2rem !important;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.testimonial-carousel .testimonial:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(245,184,0,0.22);
  border-color: #fff !important;
}
.testimonial-carousel .testimonial .testimonial-quote {
  color: #fff !important;
  font-size: 1.05rem;
  line-height: 1.65;
}
.testimonial-carousel .testimonial .testimonial-author {
  color: var(--gold) !important;
  font-weight: 700;
}
.testimonial-carousel .testimonial .testimonial-location {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.42 — Solar Solutions page — black+gold treatment
 *   6 package cards + 2 care plan cards
 *   Each card visually distinct — solid black gradient + gold border,
 *   proper gap between columns, hover lift.
 *   Featured (Most Popular = PowerElite 12) gets brighter gold accent.
 * ═══════════════════════════════════════════════════════════════ */

/* Package grid — ensure clear column separation with gap */
.package-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.75rem !important;
  align-items: stretch;
}
@media (max-width: 1050px) {
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  .package-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* All 6 package cards — solid black gradient with gold border */
.package-card {
  background: linear-gradient(155deg, #2a2a2a 0%, #171717 100%) !important;
  border: 3px solid var(--gold) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2rem 1.75rem !important;
  color: #fff !important;
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s !important;
  display: flex !important;
  flex-direction: column;
  position: relative;
  overflow: visible !important;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.15),        /* subtle outer gold halo */
    0 8px 24px rgba(0, 0, 0, 0.5) !important;  /* lift from bg */
}
.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(245, 184, 0, 0.28);
  border-color: #fff !important;
}

/* Text inside package cards — all white with gold accents */
.package-card .package-title,
.package-card .package-tagline,
.package-card .package-specs,
.package-card .package-specs li,
.package-card .package-support-text {
  color: #fff !important;
}
.package-card .package-tagline {
  color: rgba(255,255,255,0.85) !important;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.package-card .package-eyebrow {
  display: inline-block;
  background: rgba(245, 184, 0, 0.15);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(245, 184, 0, 0.35);
}
.package-card .package-specs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem 0 !important;
}
.package-card .package-specs li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}
.package-card .package-specs li:last-child {
  border-bottom: 0;
}
.package-card .package-support {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  margin-top: auto; /* push actions to bottom */
}
.package-card .package-support-label {
  color: var(--gold) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.package-card .package-support-text {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0;
}
.package-card .package-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.package-card .package-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.package-card .package-actions .btn-outline {
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  background: transparent !important;
}
.package-card .package-actions .btn-outline:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* Featured (Most Popular = PowerElite 12) — extra prominence */
.package-card.featured {
  border: 3px solid var(--gold) !important;
  background: linear-gradient(155deg, #202020 0%, #0e0e0e 100%) !important;
  box-shadow: 0 12px 32px rgba(245, 184, 0, 0.25);
  position: relative;
}
.package-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) !important;   /* reset the old rotate(35deg) */
  background: var(--gold);
  color: var(--ink);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(245, 184, 0, 0.4);
  z-index: 2;
}
.package-card.featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 46px rgba(245, 184, 0, 0.4);
}
.package-card.featured .package-eyebrow {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
 * Care Plans — 2 cards, black+gold, cleanly separated
 * ═══════════════════════════════════════════════════════════════ */
.care-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.75rem !important;
  max-width: 1000px;
  margin: 2rem auto 0;
  align-items: stretch;
}
@media (max-width: 720px) {
  .care-plan-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

.care-plan-card {
  background: linear-gradient(155deg, #2a2a2a 0%, #171717 100%) !important;
  border: 3px solid var(--gold) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2rem 1.75rem !important;
  color: #fff !important;
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s !important;
  display: flex !important;
  flex-direction: column;
  overflow: visible !important;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.care-plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(245, 184, 0, 0.28);
  border-color: #fff !important;
}
.care-plan-card h3,
.care-plan-card > p,
.care-plan-card .care-plan-includes,
.care-plan-card .care-plan-includes li {
  color: #fff !important;
}
.care-plan-card > p {
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.care-plan-card .care-plan-badge {
  display: inline-block;
  background: rgba(245, 184, 0, 0.15);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 184, 0, 0.35);
  margin-bottom: 0.85rem;
  align-self: flex-start;
}
.care-plan-card .care-plan-includes {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
  flex-grow: 1;
}
.care-plan-card .care-plan-includes li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.92rem;
  line-height: 1.5;
}
.care-plan-card .care-plan-includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--gold);
  font-weight: 800;
}
.care-plan-card .care-plan-includes li:last-child { border-bottom: 0; }
.care-plan-card .btn { margin-top: auto; }

/* Platinum (premium tier) — brighter accent */
.care-plan-card.platinum {
  border: 3px solid var(--gold) !important;
  background: linear-gradient(155deg, #202020 0%, #0e0e0e 100%) !important;
  box-shadow: 0 12px 32px rgba(245, 184, 0, 0.25);
  position: relative;
}
.care-plan-card.platinum::before {
  content: 'PREMIUM';
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--gold);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.care-plan-card.platinum .care-plan-badge {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* v3.42 fix — reset transform inherited from old featured rules + default lift on all package/care cards */
.package-card {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);   /* lift each card for clear separation from section bg */
}
.care-plan-card {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.care-plan-card.platinum::before {
  transform: translateX(0) !important;   /* no rotation inherited */
  left: auto;
  right: 20px;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.43 — Vibrant tier colors: all remaining .info-block grids +
 * AC range tiers + size-chip text visibility fix
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Universal info-block styling (base = black+gold single card) ─── */
.info-block {
  background: linear-gradient(155deg, #2a2a2a 0%, #171717 100%) !important;
  border: 2.5px solid var(--gold) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.75rem 1.5rem !important;
  color: #fff !important;
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s !important;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
  position: relative;
}
.info-block:hover {
  transform: translateY(-4px);
  border-color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.3),
    0 12px 28px rgba(245, 184, 0, 0.25) !important;
}
.info-block h4,
.info-block > p,
.info-block > ul li {
  color: #fff !important;
}
.info-block > p { color: rgba(255,255,255,0.88) !important; }

/* ─── 2-column info-block grids → GREEN + GOLD tier colors ───
     (drip-hose, drip-tape, service installations, Visit Us) */
.grid-2 > .info-block:nth-child(1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border-color: var(--green-deep) !important;
}
.grid-2 > .info-block:nth-child(2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border-color: #E4A700 !important;
  color: var(--ink) !important;
}
.grid-2 > .info-block:nth-child(2) h4,
.grid-2 > .info-block:nth-child(2) > p,
.grid-2 > .info-block:nth-child(2) > ul li {
  color: var(--ink) !important;
}

/* ─── 3-column info-block grids (Fittings, Sourcing Service) ───
     6-color cycle if 6 items, else 3-color (green/gold/ink) */
.grid-3 > .info-block:nth-child(6n+1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border-color: var(--green-deep) !important;
}
.grid-3 > .info-block:nth-child(6n+2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border-color: #E4A700 !important;
  color: var(--ink) !important;
}
.grid-3 > .info-block:nth-child(6n+2) h4,
.grid-3 > .info-block:nth-child(6n+2) > p,
.grid-3 > .info-block:nth-child(6n+2) > ul li {
  color: var(--ink) !important;
}
.grid-3 > .info-block:nth-child(6n+2) ul li span[style*="color:var(--gold)"] {
  color: var(--ink) !important;
}
.grid-3 > .info-block:nth-child(6n+3) {
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border-color: #14406e !important;
}
.grid-3 > .info-block:nth-child(6n+4) {
  background: linear-gradient(155deg, #14a196 0%, #0d6b64 100%) !important;
  border-color: #0d6b64 !important;
}
.grid-3 > .info-block:nth-child(6n+5) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2.5px solid var(--gold) !important;
}
.grid-3 > .info-block:nth-child(6n+6) {
  background: linear-gradient(155deg, #7a3f6b 0%, #4d2542 100%) !important;
  border-color: #4d2542 !important;
}

/* ─── size-chip pills (Lee's "invisible text" complaint) ───
     Currently white pill bg + white text on colored card. Fix: gold pill w/ ink text. */
.size-chip {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  display: inline-block;
  font-size: 0.85rem;
}
/* When card is gold (2nd of grid-2), flip chip to dark */
.grid-2 > .info-block:nth-child(2) .size-chip {
  background: var(--ink) !important;
  color: var(--gold) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.size-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0.75rem 0 1rem !important;
}

/* ─── free-badge inside info-blocks ─── */
.free-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: rgba(245,184,0,0.15) !important;
  border: 1px solid rgba(245,184,0,0.4) !important;
  color: var(--gold) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.5rem 0;
}
.grid-2 > .info-block:nth-child(2) .free-badge {
  background: rgba(0,0,0,0.15) !important;
  border-color: rgba(0,0,0,0.3) !important;
  color: var(--ink) !important;
}

/* Buttons inside colored info-blocks */
.info-block .btn-outline {
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
  background: transparent !important;
}
.info-block .btn-outline:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
.grid-2 > .info-block:nth-child(2) .btn-outline {
  border-color: rgba(0,0,0,0.3) !important;
  color: var(--ink) !important;
}
.grid-2 > .info-block:nth-child(2) .btn-outline:hover {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--gold) !important;
}
.grid-2 > .info-block:nth-child(2) .btn-primary {
  background: var(--ink) !important;
  color: var(--gold) !important;
}

/* ─── AC · ac-range 5 cards → 5-color tier cycle ─── */
#ac-range .grid-3 > .ac-tier {
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.75rem 1.5rem !important;
  border-width: 2.5px !important;
  border-style: solid !important;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.45) !important;
}
#ac-range .grid-3 > .ac-tier:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.3),
    0 12px 28px rgba(245, 184, 0, 0.25) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(1) {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%) !important;
  border-color: var(--green-deep) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) {
  background: linear-gradient(155deg, var(--gold) 0%, #E4A700 100%) !important;
  border-color: #E4A700 !important;
  color: var(--ink) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(3) {
  background: linear-gradient(155deg, #2563a8 0%, #14406e 100%) !important;
  border-color: #14406e !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(4) {
  background: linear-gradient(155deg, #14a196 0%, #0d6b64 100%) !important;
  border-color: #0d6b64 !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(5) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border-color: var(--gold) !important;
}
/* Text — white on all except gold */
#ac-range .grid-3 > .ac-tier:not(:nth-child(2)) h4,
#ac-range .grid-3 > .ac-tier:not(:nth-child(2)) p,
#ac-range .grid-3 > .ac-tier:not(:nth-child(2)) ul li,
#ac-range .grid-3 > .ac-tier:not(:nth-child(2)) .ac-btu,
#ac-range .grid-3 > .ac-tier:not(:nth-child(2)) .ac-btu-unit {
  color: #fff !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) h4,
#ac-range .grid-3 > .ac-tier:nth-child(2) p,
#ac-range .grid-3 > .ac-tier:nth-child(2) ul li,
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu,
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu-unit {
  color: var(--ink) !important;
}
#ac-range .grid-3 > .ac-tier .btn-primary {
  background: var(--gold) !important; color: var(--ink) !important; border: 0;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-primary {
  background: var(--ink) !important; color: var(--gold) !important;
}
#ac-range .grid-3 > .ac-tier .btn-outline {
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline {
  border-color: rgba(0,0,0,0.3) !important;
  color: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.44 — Home: black bg + colored borders on both 3-card grids
 *   All 3 cards: solid black background
 *   Border varies: green / gold / white for card 1 / 2 / 3
 *   Applies to Featured Solar Packages + Why Rural Roots
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Featured Solar Packages (PowerStart 6 / PowerElite 12 / PowerTitan 16) ─── */
.package-preview.tier-entry,
.package-preview.tier-popular,
.package-preview.tier-business,
.package-preview.featured.tier-popular {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  color: #fff !important;
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}
.package-preview.tier-entry {
  border: 2.5px solid var(--gold) !important;
}
.package-preview.tier-popular,
.package-preview.featured.tier-popular {
  border: 3px solid var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.2),
    0 10px 26px rgba(245, 184, 0, 0.28) !important;
}
.package-preview.tier-business {
  border: 2.5px solid #fff !important;
}

/* Text on all 3 — white (background is uniformly black) */
.package-preview.tier-entry h3,
.package-preview.tier-entry p,
.package-preview.tier-entry ul li,
.package-preview.tier-popular h3,
.package-preview.tier-popular p,
.package-preview.tier-popular ul li,
.package-preview.featured.tier-popular h3,
.package-preview.featured.tier-popular p,
.package-preview.featured.tier-popular ul li,
.package-preview.tier-business h3,
.package-preview.tier-business p,
.package-preview.tier-business ul li {
  color: #fff !important;
}

/* "View Details →" — gold on all */
.package-preview.tier-entry .package-preview-cta,
.package-preview.tier-popular .package-preview-cta,
.package-preview.featured.tier-popular .package-preview-cta,
.package-preview.tier-business .package-preview-cta {
  color: var(--gold) !important;
}

/* Package tag pills — match the border color */
.package-preview.tier-entry .package-preview-tag {
  background: transparent !important;
  border: 1.5px solid var(--green) !important;
  color: var(--green) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.85rem;
}
.package-preview.tier-popular .package-preview-tag,
.package-preview.featured.tier-popular .package-preview-tag {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--gold) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.85rem;
}
.package-preview.tier-business .package-preview-tag {
  background: transparent !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.85rem;
}

/* Hover — brighten the border */
.package-preview.tier-entry:hover {
  border-color: #4ade80 !important;
  box-shadow: 0 12px 30px rgba(52, 122, 82, 0.35) !important;
  transform: translateY(-4px);
}
.package-preview.tier-popular:hover,
.package-preview.featured.tier-popular:hover {
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.4),
    0 16px 36px rgba(245, 184, 0, 0.4) !important;
  transform: translateY(-6px);
}
.package-preview.tier-business:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-4px);
}

/* ─── Why Rural Roots (home) 3-card grid — same scheme ─── */
#home-why-grid > .service-card:nth-child(1),
#home-why-grid > .service-card:nth-child(2),
#home-why-grid > .service-card:nth-child(3) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  color: #fff !important;
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}
#home-why-grid > .service-card:nth-child(1) {
  border: 2.5px solid var(--green) !important;
}
#home-why-grid > .service-card:nth-child(2) {
  border: 3px solid var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.2),
    0 10px 26px rgba(245, 184, 0, 0.25) !important;
}
#home-why-grid > .service-card:nth-child(3) {
  border: 2.5px solid #fff !important;
}

/* Text on all 3 — white */
#home-why-grid > .service-card:nth-child(1) h4,
#home-why-grid > .service-card:nth-child(1) p,
#home-why-grid > .service-card:nth-child(1) .service-icon svg,
#home-why-grid > .service-card:nth-child(2) h4,
#home-why-grid > .service-card:nth-child(2) p,
#home-why-grid > .service-card:nth-child(2) .service-icon svg,
#home-why-grid > .service-card:nth-child(3) h4,
#home-why-grid > .service-card:nth-child(3) p,
#home-why-grid > .service-card:nth-child(3) .service-icon svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* Icon container — subtle overlay matching the border color */
#home-why-grid > .service-card:nth-child(1) .service-icon {
  background: rgba(52, 122, 82, 0.15) !important;
}
#home-why-grid > .service-card:nth-child(2) .service-icon {
  background: rgba(245, 184, 0, 0.15) !important;
}
#home-why-grid > .service-card:nth-child(3) .service-icon {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Hover — border brightens */
#home-why-grid > .service-card:nth-child(1):hover {
  border-color: #4ade80 !important;
  box-shadow: 0 12px 30px rgba(52, 122, 82, 0.35) !important;
  transform: translateY(-4px);
}
#home-why-grid > .service-card:nth-child(2):hover {
  box-shadow:
    0 0 0 1px rgba(245, 184, 0, 0.4),
    0 14px 34px rgba(245, 184, 0, 0.4) !important;
  transform: translateY(-4px);
}
#home-why-grid > .service-card:nth-child(3):hover {
  border-color: var(--gold) !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-4px);
}

/* ═══════════════════════════════════════════════════════════════
 * v3.45 — Mobile: disable fade-in-stagger animations
 * On mobile, the staggered opacity animations can leave content
 * looking "missing" if the user scrolls quickly (items still at
 * opacity:0 when they scroll past). Just show everything.
 * Also respects prefers-reduced-motion at any breakpoint.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale,
  .fade-in-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale,
  .fade-in-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * v3.46 — Deals page: image-poster grid
 * Simple grid of promo poster images. Click any → full-size lightbox.
 * Placeholder shows if an image slot hasn't been uploaded yet.
 * ═══════════════════════════════════════════════════════════════ */
.deals-poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 2rem auto 0;
}
@media (max-width: 780px) {
  .deals-poster-grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 500px; }
}
.deals-poster-tile {
  display: block;
  aspect-ratio: 4 / 5;   /* portrait — matches typical promo poster shape */
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  box-shadow: 0 0 0 1px rgba(245,184,0,0.15), 0 10px 26px rgba(0,0,0,0.5);
  cursor: zoom-in;
  transition: transform 0.22s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
}
.deals-poster-tile:hover {
  transform: translateY(-6px);
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.35), 0 18px 40px rgba(245,184,0,0.3);
}
.deals-poster-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.deals-poster-tile .deals-poster-placeholder {
  display: none;   /* shown only when img fails via .deals-poster-tile--empty */
}
.deals-poster-tile--empty .deals-poster-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  color: var(--gold);
  text-align: center;
  padding: 2rem;
}
.deals-poster-tile--empty .deals-poster-flame {
  font-size: 5rem;
  line-height: 1;
}
.deals-poster-tile--empty .deals-poster-placeholder span:last-child {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  line-height: 1.4;
}
.deals-poster-cta {
  text-align: center;
  margin-top: 3rem;
}

/* v3.46 — Footer opening hours line-2 subtle */
.site-footer li small {
  display: block;
  margin-top: 2px;
  margin-left: 24px;   /* align under the "M" (clock icon + space) */
  font-size: 0.85em;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.47 — Client feedback pass
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Task 1: Marketplace "Coming Soon" placeholder ─── */
.marketplace-coming-soon {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 2.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 700px;
  margin: 2rem auto 0;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.15), 0 10px 26px rgba(0,0,0,0.5);
}
.marketplace-coming-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.marketplace-coming-soon h3 {
  color: #fff !important;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.marketplace-coming-soon p {
  color: rgba(255,255,255,0.8) !important;
  font-size: 1.05rem;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ─── Task 3: Featured Solar Packages entry tag — text WHITE ─── */
.package-preview.tier-entry .package-preview-tag {
  border: 1.5px solid var(--green) !important;
  color: #fff !important;   /* was green — now white */
  background: transparent !important;
}

/* ─── Task 4: About Who We Are — 1 wide card ─── */
.about-1col {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.5rem;
  max-width: 1000px;
  margin: 2rem auto 0;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.12), 0 8px 20px rgba(0,0,0,0.4);
}
.about-1col:hover {
  transform: translateY(-3px);
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.3), 0 14px 32px rgba(245,184,0,0.22);
}
.about-1col p { color: #fff !important; }
@media (max-width: 720px) {
  .about-1col { padding: 1.5rem 1.25rem; }
}

/* ─── Task 5: Mission / Vision — bigger heading text ─── */
.mv-grid .mv-card h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
}
/* Also enlarge the "OUR MISSION" / "OUR VISION" eyebrow — Lee's actual ask */
.mv-grid .mv-card .eyebrow {
  font-size: 1.1rem !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
  color: var(--gold) !important;
}

/* ─── Task 8: ROOTS — black bg with colored borders (not colored bgs) ─── */
#about-core-values .grid-3 > .service-card {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(1) {
  border: 2.5px solid var(--green) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(2) {
  border: 2.5px solid var(--gold) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(3) {
  border: 2.5px solid #2563a8 !important;
}
#about-core-values .grid-3 > .service-card:nth-child(4) {
  border: 2.5px solid #14a196 !important;
}
#about-core-values .grid-3 > .service-card:nth-child(5) {
  border: 2.5px solid #7a3f6b !important;
}
/* All text white on all cards */
#about-core-values .grid-3 > .service-card h4,
#about-core-values .grid-3 > .service-card p {
  color: #fff !important;
}
/* Letter badge — matches border color */
#about-core-values .grid-3 > .service-card:nth-child(1) .letter-badge {
  background: rgba(52,122,82,0.2) !important; color: var(--green) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(2) .letter-badge {
  background: rgba(245,184,0,0.15) !important; color: var(--gold) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(3) .letter-badge {
  background: rgba(37,99,168,0.2) !important; color: #6ba3e5 !important;
}
#about-core-values .grid-3 > .service-card:nth-child(4) .letter-badge {
  background: rgba(20,161,150,0.2) !important; color: #4dd4c7 !important;
}
#about-core-values .grid-3 > .service-card:nth-child(5) .letter-badge {
  background: rgba(122,63,107,0.25) !important; color: #c88bb8 !important;
}

/* v3.47 override — match v3.41 specificity to actually beat colored bg on ROOTS */
#about-core-values .grid-3 > .service-card:nth-child(1),
#about-core-values .grid-3 > .service-card:nth-child(2),
#about-core-values .grid-3 > .service-card:nth-child(3),
#about-core-values .grid-3 > .service-card:nth-child(4),
#about-core-values .grid-3 > .service-card:nth-child(5) {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}
#about-core-values .grid-3 > .service-card:nth-child(1) { border: 2.5px solid var(--green) !important; }
#about-core-values .grid-3 > .service-card:nth-child(2) { border: 2.5px solid var(--gold) !important; }
#about-core-values .grid-3 > .service-card:nth-child(3) { border: 2.5px solid #2563a8 !important; }
#about-core-values .grid-3 > .service-card:nth-child(4) { border: 2.5px solid #14a196 !important; }
#about-core-values .grid-3 > .service-card:nth-child(5) { border: 2.5px solid #7a3f6b !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.48 — Deals uncrop + ROOTS opportunity fix + footer hours align
 * ═══════════════════════════════════════════════════════════════ */

/* Task 1 — Deals posters: show full image instead of cropping.
   Was aspect-ratio: 4/5 with object-fit: cover which cut poster tops/bottoms.
   Now: no forced ratio, image at natural aspect, contained within the tile. */
.deals-poster-tile {
  aspect-ratio: auto !important;
  min-height: 300px;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deals-poster-tile img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* Task 2 — ROOTS "Opportunity" card (2nd) text must be white now
   (was ink because bg used to be gold; bg is now black in v3.47). */
#about-core-values .grid-3 > .service-card:nth-child(2) h4,
#about-core-values .grid-3 > .service-card:nth-child(2) p {
  color: #fff !important;
}

/* Task 3 — Footer opening hours: align 2nd line under "Mon", not indented,
   and use "8:00 AM – 5:00 PM" format (updated below in HTML). */
.site-footer li small {
  display: block;
  margin-top: 2px;
  margin-left: 0 !important;   /* was 24px — remove indent so it aligns with "Mon" */
  font-size: 0.85em;
}
/* Actually the icon+text is in flex — the <span> wrapper is a flex child;
   inside it, both lines should align to the same left edge. */
.footer-contact-list li span {
  display: block;
}
.footer-contact-list li span small {
  display: block;
  margin-top: 2px;
  margin-left: 0;
  font-size: 0.85em;
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.49 — Solar Solutions cards: truer black bg (was too gray)
 * Old rule at line 6546 (#packages .package-card) had higher specificity
 * than plain .package-card, so we scope to #packages / #care-plans here.
 * ═══════════════════════════════════════════════════════════════ */

#packages .package-card,
#packages [class*="package"].package-card {
  background: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
}
#packages .package-card.featured {
  background: #050505 !important;
  border-width: 3px !important;
}

#care-plans .care-plan-card,
#care-plans [class*="plan"].care-plan-card,
#care-plans [class*="care"].care-plan-card {
  background: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
}
#care-plans .care-plan-card.platinum {
  background: #050505 !important;
  border-width: 3px !important;
}

/* v3.49 — bulletproof override for package + care-plan card bg
   Uses double-ID + attribute specificity so no earlier rule can beat it. */
body #packages article.package-card,
body #packages article[id][class*="package"] {
  background-color: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
}
body #packages article.package-card.featured {
  background-color: #050505 !important;
}
body #care-plans article.care-plan-card,
body #care-plans article[class*="care"] {
  background-color: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
}
body #care-plans article.care-plan-card.platinum {
  background-color: #050505 !important;
}

/* v3.49 bulletproof override — real reason the previous attempts failed:
   the "killer" rule at line 6658 uses `:not(.X):not(.Y)` which contributes
   TWO class-level specificity points (from the :not args), making it
   (0,1,3,0). My earlier selectors only reached (0,1,2,0). This rule uses
   a compound of 4 class-level selectors + the ID for specificity (0,1,4,0),
   which beats the killer cleanly. */
#packages article.package-card[id][class*="package"],
#packages article.package-card.fade-in[id] {
  background-color: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
}
#packages article.package-card.featured[id][class*="package"] {
  background-color: #050505 !important;
}

#care-plans article.care-plan-card[class*="care"],
#care-plans article.care-plan-card.fade-in {
  background-color: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
}
#care-plans article.care-plan-card.platinum[class*="care"] {
  background-color: #050505 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.50 — Solar Solutions cards: nuke all gray inner surfaces
 *   + Irrigation single-card blocks + drip-hose chip legibility
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Package cards: remove every gray interior ─── */
#packages .package-card .package-specs li,
#care-plans .care-plan-card .care-plan-includes li {
  border-bottom: 1px solid rgba(245, 184, 0, 0.15) !important;   /* faint gold divider, not gray */
}
#packages .package-card .package-specs li:last-child,
#care-plans .care-plan-card .care-plan-includes li:last-child {
  border-bottom: 0 !important;
}
/* TYPICALLY SUPPORTS box — transparent, no gray plate */
#packages .package-card .package-support {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(245, 184, 0, 0.2) !important;
  border-radius: 0 !important;
  padding: 1rem 0 0.85rem !important;
  margin: 0.5rem 0 1.25rem !important;
}
/* Outline (WhatsApp) button — gold border, no gray */
#packages .package-card .package-actions .btn-outline,
#care-plans .care-plan-card .btn-outline {
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
  background: transparent !important;
}
#packages .package-card .package-actions .btn-outline:hover,
#care-plans .care-plan-card .btn-outline:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
/* Spec icon squares (☀ ⚡ 🔋) — transparent, no gray box */
#packages .package-card .package-specs li span[style*="background"] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Any generic .card-bg / inner panel inside packages */
#packages .package-card [style*="background:rgba"],
#packages .package-card [style*="background: rgba"] {
  background: transparent !important;
}

/* ─── Care plan cards: same treatment ─── */
#care-plans .care-plan-card .care-plan-includes li::before {
  color: var(--gold) !important;
}
#care-plans .care-plan-card [class*="badge"],
#care-plans .care-plan-card .care-plan-badge {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}

/* Kill the generic v3.43 info-block bg on single-card sections that Lee
   flagged as "gray" — force pure black + gold border. */
#main-hose .info-block,
#mulch-film .info-block,
#weed-mat .info-block {
  background: #000 !important;
  background-image: none !important;
  border: 2.5px solid var(--gold) !important;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.15), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#main-hose .info-block *,
#mulch-film .info-block *,
#weed-mat .info-block * {
  color: #fff !important;
}
#main-hose .info-block h4,
#mulch-film .info-block h4,
#weed-mat .info-block h4 {
  color: #fff !important;
}
#main-hose .info-block .size-chip,
#mulch-film .info-block .size-chip,
#weed-mat .info-block .size-chip {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 0 !important;
}

/* ─── 12mm Drip Hose pills — force ink text on gold pills for legibility ─── */
/* v3.43's rule set .size-chip color:var(--ink) but a later rule was flipping
   to white. Nail it down explicitly at high specificity. */
#drip-hose .grid-2 > .info-block:nth-child(1) .size-chip,
#drip-tape .grid-2 > .info-block:nth-child(1) .size-chip {
  background: var(--gold) !important;
  color: #000 !important;   /* pure black — no ambiguity */
  font-weight: 700 !important;
  border: 0 !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2) .size-chip,
#drip-tape .grid-2 > .info-block:nth-child(2) .size-chip {
  background: #000 !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
}

/* v3.50 nuke — force ALL descendants of package/care-plan cards to have
   transparent bg. Only the card itself keeps its black bg + gold border.
   The eyebrow pill and hover states re-add specific backgrounds below. */
#packages .package-card > *,
#packages .package-card > * > *,
#packages .package-card ul,
#packages .package-card ul li,
#packages .package-card ul li *,
#packages .package-card .package-support,
#packages .package-card .package-support *,
#care-plans .care-plan-card > *,
#care-plans .care-plan-card > * > *,
#care-plans .care-plan-card ul,
#care-plans .care-plan-card ul li,
#care-plans .care-plan-card ul li * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Re-add ONLY the eyebrow pill's tinted bg */
#packages .package-card .package-eyebrow {
  background: rgba(245, 184, 0, 0.12) !important;
  border: 1px solid rgba(245, 184, 0, 0.35) !important;
}
#packages .package-card.featured .package-eyebrow {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
/* Care plan badge same treatment */
#care-plans .care-plan-card .care-plan-badge {
  background: rgba(245, 184, 0, 0.12) !important;
  border: 1px solid rgba(245, 184, 0, 0.35) !important;
  color: var(--gold) !important;
}
#care-plans .care-plan-card.platinum .care-plan-badge {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
/* Buttons keep their intended bg */
#packages .package-card .btn-primary,
#packages .package-card .btn-gold,
#care-plans .care-plan-card .btn-primary,
#care-plans .care-plan-card .btn-gold {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
#packages .package-card .btn-outline,
#care-plans .care-plan-card .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
/* Restore specs list dividers */
#packages .package-card .package-specs li {
  border-bottom: 1px solid rgba(245, 184, 0, 0.15) !important;
}
#packages .package-card .package-specs li:last-child {
  border-bottom: 0 !important;
}
/* Restore "typically supports" top divider */
#packages .package-card .package-support {
  border-top: 1px solid rgba(245, 184, 0, 0.2) !important;
  padding-top: 0.85rem !important;
}

/* v3.50 — REAL nuke. The killer rule uses :not(.X):not(.Y) which is (0,1,3,0).
   I need to beat that with (0,1,3,1) or higher. */
body #packages article.package-card > *,
body #packages article.package-card > * > *,
body #packages article.package-card ul,
body #packages article.package-card ul li,
body #packages article.package-card [class*="package"],
body #care-plans article.care-plan-card > *,
body #care-plans article.care-plan-card > * > *,
body #care-plans article.care-plan-card ul,
body #care-plans article.care-plan-card ul li,
body #care-plans article.care-plan-card [class*="care"],
body #care-plans article.care-plan-card [class*="plan"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}

/* Re-apply the specific bits that SHOULD have bg / border */
body #packages article.package-card .package-eyebrow {
  background: rgba(245,184,0,0.12) !important;
  border: 1px solid rgba(245,184,0,0.35) !important;
  color: var(--gold) !important;
}
body #packages article.package-card.featured .package-eyebrow {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
body #packages article.package-card .package-specs li {
  border-bottom: 1px solid rgba(245,184,0,0.15) !important;
}
body #packages article.package-card .package-specs li:last-child {
  border-bottom: 0 !important;
}
body #packages article.package-card .package-support {
  border-top: 1px solid rgba(245,184,0,0.2) !important;
  padding-top: 0.85rem !important;
}
body #packages article.package-card .btn-primary,
body #packages article.package-card .btn-gold {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
body #packages article.package-card .btn-outline {
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
body #packages article.package-card .btn-outline:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* Care plans equivalent */
body #care-plans article.care-plan-card .care-plan-badge {
  background: rgba(245,184,0,0.12) !important;
  border: 1px solid rgba(245,184,0,0.35) !important;
  color: var(--gold) !important;
}
body #care-plans article.care-plan-card.platinum .care-plan-badge {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
body #care-plans article.care-plan-card .care-plan-includes li {
  border-bottom: 1px solid rgba(245,184,0,0.15) !important;
}
body #care-plans article.care-plan-card .care-plan-includes li:last-child {
  border-bottom: 0 !important;
}
body #care-plans article.care-plan-card .btn-primary {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* v3.50 — FINAL nuke with computed specificity (0,1,4,0) which beats the
   killer's (0,1,3,0) cleanly. Uses [class][id] chain on the parent to boost
   the specificity budget. */
#packages article.package-card[id][class*="package"] > *,
#packages article.package-card[id][class*="package"] > * > *,
#packages article.package-card[id][class*="package"] .package-eyebrow,
#packages article.package-card[id][class*="package"] .package-title,
#packages article.package-card[id][class*="package"] .package-tagline,
#packages article.package-card[id][class*="package"] .package-specs,
#packages article.package-card[id][class*="package"] .package-specs li,
#packages article.package-card[id][class*="package"] .package-specs li *,
#packages article.package-card[id][class*="package"] .package-support,
#packages article.package-card[id][class*="package"] .package-support *,
#packages article.package-card[id][class*="package"] .package-actions,
#care-plans article.care-plan-card[class*="care"] > *,
#care-plans article.care-plan-card[class*="care"] .care-plan-includes,
#care-plans article.care-plan-card[class*="care"] .care-plan-includes li,
#care-plans article.care-plan-card[class*="care"] .care-plan-badge {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Re-add the eyebrow pill's tinted background at the same specificity */
#packages article.package-card[id][class*="package"] .package-eyebrow {
  background-color: rgba(245,184,0,0.12) !important;
  border: 1px solid rgba(245,184,0,0.35) !important;
}
#packages article.package-card.featured[id][class*="package"] .package-eyebrow {
  background-color: rgba(8, 117, 16, 0.15) !important;
  color: var(--green) !important;
  border-color: rgba(8, 117, 16, 0.4) !important;
}
#care-plans article.care-plan-card[class*="care"] .care-plan-badge {
  background-color: rgba(245,184,0,0.12) !important;
  border: 1px solid rgba(245,184,0,0.35) !important;
  color: var(--gold) !important;
}
#care-plans article.care-plan-card.platinum[class*="care"] .care-plan-badge {
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
/* Restore buttons */
#packages article.package-card[id][class*="package"] .btn-primary,
#packages article.package-card[id][class*="package"] .btn-gold,
#care-plans article.care-plan-card[class*="care"] .btn-primary,
#care-plans article.care-plan-card[class*="care"] .btn-gold {
  background-color: var(--gold) !important;
  color: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.51 — Footer payment methods row (Scotia merchant compliance)
 * ═══════════════════════════════════════════════════════════════ */
.footer-payments {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-payments-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6rem;
}
.footer-payments-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 4px;
  background: transparent;
  transition: transform 0.15s;
}
.pm-icon:hover { transform: translateY(-2px); }
.pm-icon svg {
  height: 26px;
  width: 40px;
  display: block;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.55 — Irrigation drip-hose/tape + merged mulch-weed:
 *   Match the "black bg + colored border" treatment used elsewhere
 *   (was green/gold FILLED cards; too colorful per client).
 * ═══════════════════════════════════════════════════════════════ */

/* Kill filled bg on drip-hose + drip-tape 2-col cards; keep colored borders. */
#drip-hose .grid-2 > .info-block:nth-child(1),
#drip-tape .grid-2 > .info-block:nth-child(1) {
  background: #000 !important;
  background-image: none !important;
  border: 3px solid var(--green) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(52,122,82,0.18), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2),
#drip-tape .grid-2 > .info-block:nth-child(2) {
  background: #000 !important;
  background-image: none !important;
  border: 3px solid var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.18), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#drip-hose .grid-2 > .info-block *,
#drip-tape .grid-2 > .info-block * {
  color: #fff !important;
}
/* Chips: gold pill with black text on card 1 (green border), and
   green pill with black text on card 2 (gold border) — for contrast. */
#drip-hose .grid-2 > .info-block:nth-child(1) .size-chip,
#drip-tape .grid-2 > .info-block:nth-child(1) .size-chip {
  background: var(--gold) !important;
  color: #000 !important;
  border: 0 !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2) .size-chip,
#drip-tape .grid-2 > .info-block:nth-child(2) .size-chip {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
}

/* Merged mulch-weed 2-col section: black bg + gold border (left) + green border (right) */
#mulch-weed .grid-2 {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 780px) {
  #mulch-weed .grid-2 { grid-template-columns: 1fr; }
}
#mulch-weed .grid-2 > .info-block {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
  padding: 2rem !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.15), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#mulch-weed .grid-2 > .info-block:nth-child(1) {
  border: 3px solid var(--gold) !important;
}
#mulch-weed .grid-2 > .info-block:nth-child(2) {
  border: 3px solid var(--green) !important;
}
#mulch-weed .grid-2 > .info-block * {
  color: #fff !important;
}
#mulch-weed .grid-2 > .info-block h4 {
  color: #fff !important;
  font-size: 1.35rem !important;
  margin-bottom: 0.75rem !important;
}
#mulch-weed .grid-2 > .info-block .feature-list li {
  border: 0 !important;
  color: #fff !important;
}
#mulch-weed .grid-2 > .info-block .btn-group {
  margin-top: auto !important;
  padding-top: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.56 — AC page: brand pill, FAQ dark cards, Solar+AC bigger header
 *   + Solar Solutions FAQ styling (mirrors main faq.html look)
 * ═══════════════════════════════════════════════════════════════ */

/* "Available in Two Brands — Windy & Signature" pill above AC packages.
   Not a box/square — a rounded gold pill with a live pulse dot. */
.ac-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 1.5rem auto 0.5rem;
  padding: 0.65rem 1.5rem;
  background: linear-gradient(135deg, var(--gold), #E5AA00);
  color: #1a1a1a;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(245,184,0,0.35), 0 0 0 3px rgba(245,184,0,0.15);
  animation: acPillPop 0.4s ease-out;
}
.ac-brand-pill em {
  font-style: normal;
  font-weight: 800;
  color: #000;
  background: rgba(255,255,255,0.35);
  padding: 2px 8px;
  border-radius: 999px;
}
.ac-brand-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d32f2f;
  box-shadow: 0 0 0 0 rgba(211,47,47,0.6);
  animation: acPulse 1.6s infinite;
}
@keyframes acPulse {
  0%   { box-shadow: 0 0 0 0 rgba(211,47,47,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(211,47,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(211,47,47,0); }
}
@keyframes acPillPop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Solar + AC header — bigger + more standout */
#solar-ac-combo .solar-ac-eyebrow {
  display: inline-block;
  font-size: 0.9rem !important;
  padding: 0.45rem 1.1rem;
  background: linear-gradient(135deg, var(--gold), #E5AA00);
  color: #1a1a1a !important;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
#solar-ac-combo .solar-ac-headline {
  font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c5c3f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-top: 1rem !important;
}

/* ─── FAQ boxes: black bg, gold border, white text — matches other cards ─── */
#ac-faq .faq-item,
#solar-faq .faq-item,
#irrigation-faq .faq-item {
  background: #000 !important;
  border: 2px solid rgba(245,184,0,0.55) !important;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s;
}
#ac-faq .faq-item[open],
#solar-faq .faq-item[open],
#irrigation-faq .faq-item[open] {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,184,0,0.2);
}
#ac-faq .faq-item summary,
#solar-faq .faq-item summary,
#irrigation-faq .faq-item summary {
  padding: 1.1rem 1.35rem;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
#ac-faq .faq-item summary::-webkit-details-marker,
#solar-faq .faq-item summary::-webkit-details-marker,
#irrigation-faq .faq-item summary::-webkit-details-marker { display: none; }
#ac-faq .faq-item summary::after,
#solar-faq .faq-item summary::after,
#irrigation-faq .faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 700;
  transition: transform 0.2s;
}
#ac-faq .faq-item[open] summary::after,
#solar-faq .faq-item[open] summary::after,
#irrigation-faq .faq-item[open] summary::after {
  content: '–';
}
#ac-faq .faq-answer,
#solar-faq .faq-answer,
#irrigation-faq .faq-answer {
  padding: 0 1.35rem 1.25rem;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.7;
  font-size: 0.98rem;
}
#ac-faq .faq-answer a,
#solar-faq .faq-answer a,
#irrigation-faq .faq-answer a {
  color: var(--gold);
  text-decoration: underline;
}

/* Also the section background of #ac-faq should be dark so the black cards contrast */
#ac-faq {
  background: linear-gradient(rgba(15,15,15,0.98), rgba(15,15,15,0.98));
}

/* ═══════════════════════════════════════════════════════════════
 * v3.57 — SITEWIDE gray → black+gold-border sweep + Services/Contact
 * ═══════════════════════════════════════════════════════════════ */

/* Convert every default card surface across the site to pure black + gold
   border. Tier-colored cards (with .tier-color-* classes, or explicit
   backgrounds set inline) are excluded so they keep their tier color. */
.info-block:not(.tier-color-green):not(.tier-color-gold):not(.tier-color-blue):not(.tier-color-teal):not(.tier-color-plum):not(.tier-color-ink),
.service-card:not(.tier-color-green):not(.tier-color-gold):not(.tier-color-blue):not(.tier-color-teal):not(.tier-color-plum):not(.tier-color-ink),
.value-card:not(.tier-color-green):not(.tier-color-gold):not(.tier-color-blue):not(.tier-color-teal):not(.tier-color-plum):not(.tier-color-ink),
.promise-card:not(.tier-color-green):not(.tier-color-gold):not(.tier-color-blue):not(.tier-color-teal):not(.tier-color-plum):not(.tier-color-ink),
.contact-info-card,
.feature-card:not(.tier-color-green):not(.tier-color-gold):not(.tier-color-blue):not(.tier-color-teal):not(.tier-color-plum):not(.tier-color-ink),
.experience-card,
.about-card,
.why-card,
.brand-value,
.info-card {
  background: #000 !important;
  background-image: none !important;
  border: 2px solid rgba(245, 184, 0, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.15), 0 6px 18px rgba(0,0,0,0.45) !important;
}
/* Ensure white text on every child of the black cards */
.info-block:not([class*="tier-color"]) h2,
.info-block:not([class*="tier-color"]) h3,
.info-block:not([class*="tier-color"]) h4,
.info-block:not([class*="tier-color"]) h5,
.info-block:not([class*="tier-color"]) p,
.info-block:not([class*="tier-color"]) li,
.service-card:not([class*="tier-color"]) h2,
.service-card:not([class*="tier-color"]) h3,
.service-card:not([class*="tier-color"]) h4,
.service-card:not([class*="tier-color"]) h5,
.service-card:not([class*="tier-color"]) p,
.service-card:not([class*="tier-color"]) li {
  color: #fff !important;
}
/* Hyperlinks INSIDE any card must be gold so they stand out on black */
.info-block a:not(.btn),
.service-card a:not(.btn),
.value-card a:not(.btn),
.contact-info-card a:not(.btn) {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(245,184,0,0.5) !important;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.info-block a:not(.btn):hover,
.service-card a:not(.btn):hover,
.value-card a:not(.btn):hover,
.contact-info-card a:not(.btn):hover {
  color: #FFD255 !important;
  text-decoration-color: #FFD255 !important;
}
/* icon-list icons: white check on black card */
.info-block .icon-list-icon,
.service-card .icon-list-icon {
  background: rgba(245,184,0,0.15) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(245,184,0,0.35) !important;
}

/* ─── Services page: request form section dark treatment ─── */
#service-request {
  background: linear-gradient(rgba(15,15,15,0.98), rgba(15,15,15,0.98));
}
#service-request .form-wrap {
  background: #000 !important;
  border: 2px solid rgba(245,184,0,0.35) !important;
  color: #fff !important;
}
#service-request .form-wrap label,
#service-request .form-wrap p,
#service-request .form-wrap legend,
#service-request .form-wrap h3,
#service-request .form-wrap h4,
#service-request .form-wrap .section-header * {
  color: #fff !important;
}
#service-request .form-wrap input,
#service-request .form-wrap textarea,
#service-request .form-wrap select {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(245,184,0,0.3) !important;
}
#service-request .form-wrap input::placeholder,
#service-request .form-wrap textarea::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

/* ─── Contact page: 3 icon cards — pop with black bg + gold border + colored icons ─── */
.contact-cards-pop .service-card {
  background: #000 !important;
  border: 2px solid var(--gold) !important;
  color: #fff !important;
  padding: 2.25rem 1.5rem !important;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.2), 0 8px 24px rgba(0,0,0,0.5);
}
.contact-cards-pop .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px rgba(245,184,0,0.4), 0 14px 32px rgba(0,0,0,0.6);
}
.contact-cards-pop .service-card h4 {
  color: #fff !important;
  font-size: 1.35rem;
  margin: 0.75rem 0 0.5rem;
}
.contact-cards-pop .service-card p {
  color: rgba(255,255,255,0.75) !important;
}
.contact-cards-pop .service-card .service-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--gold), #E5AA00) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem !important;
  box-shadow: 0 6px 18px rgba(245,184,0,0.4);
}
.contact-cards-pop .service-card .service-icon svg {
  width: 32px;
  height: 32px;
}
/* Card 2 (WhatsApp) — keep its WhatsApp green */
.contact-cards-pop .service-card:nth-child(2) .service-icon {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(37,211,102,0.5);
}
.contact-cards-pop .service-card .btn-primary {
  background: var(--gold) !important;
  color: #1a1a1a !important;
  border: 0 !important;
  font-weight: 700 !important;
}
.contact-cards-pop .service-card:nth-child(2) .btn-primary {
  background: #25D366 !important;
  color: #fff !important;
}

/* v3.57 fixup — override any older nth-child tier colors on contact-cards-pop */
#contact-cards-grid.contact-cards-pop .service-card,
#contact-cards-grid.contact-cards-pop .service-card:nth-child(1),
#contact-cards-grid.contact-cards-pop .service-card:nth-child(2),
#contact-cards-grid.contact-cards-pop .service-card:nth-child(3) {
  background: #000 !important;
  background-image: none !important;
  border: 2px solid var(--gold) !important;
  color: #fff !important;
}
#contact-cards-grid.contact-cards-pop .service-card h4,
#contact-cards-grid.contact-cards-pop .service-card p {
  color: #fff !important;
}

/* btn-outline visibility on black cards — force gold border + gold text */
.info-block .btn-outline,
.service-card .btn-outline,
.value-card .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
.info-block .btn-outline:hover,
.service-card .btn-outline:hover,
.value-card .btn-outline:hover {
  background: var(--gold) !important;
  color: #1a1a1a !important;
}

/* Force ALL headings + text inside default .info-block / .service-card to white
   with high specificity to beat any tier color rules from older CSS */
.info-block:not([class*="tier-color"]) *:not(a):not(.btn):not(.eyebrow),
.service-card:not([class*="tier-color"]) *:not(a):not(.btn):not(.eyebrow) {
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.58 — Footer social icons pop + bot fallback readability
 * ═══════════════════════════════════════════════════════════════ */

/* Footer social icons — gold circle bg + brand colors on hover */
.site-footer .footer-social a,
.contact-info-card .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold) !important;
  color: #1a1a1a !important;
  margin-right: 8px;
  transition: transform 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 12px rgba(245,184,0,0.35);
}
.site-footer .footer-social a svg,
.contact-info-card .footer-social a svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: inherit;
}
.site-footer .footer-social a:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 18px rgba(245,184,0,0.55);
}
/* Brand colors on hover — Facebook blue, Instagram gradient, TikTok cyan, X black */
.site-footer .footer-social a[aria-label="Facebook"]:hover { background: #1877F2 !important; color: #fff !important; }
.site-footer .footer-social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: #fff !important; }
.site-footer .footer-social a[aria-label="TikTok"]:hover { background: #000 !important; color: #fff !important; }
.site-footer .footer-social a[aria-label="X"]:hover { background: #000 !important; color: #fff !important; }

/* v3.58 — bot fallback text readability (was fading against light bg) */
.ezyr-m.ezyr-bot {
  color: #1a1a1a !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.60 — AC tiers: black cards + colored borders (was filled)
 *   + Solar gallery: uniform grid + auto-carousel when many
 * ═══════════════════════════════════════════════════════════════ */

/* Neutralize old filled-color rules on AC BTU cards. Same color per tier,
   now applied as border only. Black bg + colored ring. */
#ac-range .grid-3 > .ac-tier,
#ac-range .grid-3 > .ac-tier:nth-child(1),
#ac-range .grid-3 > .ac-tier:nth-child(2),
#ac-range .grid-3 > .ac-tier:nth-child(3),
#ac-range .grid-3 > .ac-tier:nth-child(4),
#ac-range .grid-3 > .ac-tier:nth-child(5) {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(1) {
  border: 3px solid var(--green) !important;
  box-shadow: 0 0 0 1px rgba(8,117,16,0.2), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) {
  border: 3px solid var(--gold) !important;
  box-shadow: 0 0 0 1px rgba(245,184,0,0.2), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(3) {
  border: 3px solid #2563a8 !important;
  box-shadow: 0 0 0 1px rgba(37,99,168,0.2), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(4) {
  border: 3px solid #14a196 !important;
  box-shadow: 0 0 0 1px rgba(20,161,150,0.2), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(5) {
  border: 3px solid #7a3f6b !important;
  box-shadow: 0 0 0 1px rgba(122,63,107,0.2), 0 8px 20px rgba(0,0,0,0.5) !important;
}
#ac-range .grid-3 > .ac-tier * { color: #fff !important; }
#ac-range .grid-3 > .ac-tier .ac-btu { color: var(--gold) !important; }

/* ═══ Solar gallery: uniform grid + carousel when > 3 images ═══ */
.install-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 uniform columns */
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .install-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .install-gallery { grid-template-columns: 1fr; }
}
.install-gallery .install-tile {
  grid-column: auto !important; /* kill any span-2 from install-tile-large */
  grid-row: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  position: relative;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  border: 2px solid rgba(245,184,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.install-gallery .install-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  border-color: var(--gold);
}
.install-gallery .install-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Carousel mode (auto-added by JS when tile count > 3) */
.install-gallery[data-gallery-mode="carousel"] {
  display: flex;
  overflow-x: hidden;
  scroll-behavior: smooth;
  grid-template-columns: none;
  gap: 1.25rem;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
}
.install-gallery[data-gallery-mode="carousel"] .install-tile {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .install-gallery[data-gallery-mode="carousel"] .install-tile {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
}
@media (max-width: 560px) {
  .install-gallery[data-gallery-mode="carousel"] .install-tile {
    flex: 0 0 100%;
  }
}
.install-gallery-carousel-wrap {
  position: relative;
}
.install-gallery-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 1rem;
}
.install-gallery-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.install-gallery-dots button.active {
  background: var(--gold);
  transform: scale(1.3);
}

/* v3.60 fixup — middle AC card text was dark (designed for gold fill).
   Since we're now black bg, force white text at highest specificity. */
#ac-range .grid-3 > .ac-tier:nth-child(2),
#ac-range .grid-3 > .ac-tier:nth-child(2) *,
#ac-range .grid-3 > .ac-tier:nth-child(2) h4,
#ac-range .grid-3 > .ac-tier:nth-child(2) p,
#ac-range .grid-3 > .ac-tier:nth-child(2) li,
#ac-range .grid-3 > .ac-tier:nth-child(2) em {
  color: #fff !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu {
  color: var(--gold) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu-unit {
  color: rgba(255,255,255,0.75) !important;
}
/* Buttons: primary should be gold on all AC cards */
#ac-range .grid-3 > .ac-tier .btn-primary {
  background: var(--gold) !important;
  color: #1a1a1a !important;
  border: none !important;
}
#ac-range .grid-3 > .ac-tier .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.61 — Home Featured Products grid (fetched from Ezy Cart)
 * ═══════════════════════════════════════════════════════════════ */
.featured-products-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
/* Default 3 cols; overridden by data-cols */
.featured-products-grid { grid-template-columns: repeat(3, 1fr); }
.featured-products-grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.featured-products-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .featured-products-grid,
  .featured-products-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .featured-products-grid,
  .featured-products-grid[data-cols="2"],
  .featured-products-grid[data-cols="4"] { grid-template-columns: 1fr; max-width: none; }
}
.featured-products-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-soft);
  font-style: italic;
}
.fp-card {
  display: flex;
  flex-direction: column;
  background: #000;
  border: 2px solid rgba(245,184,0,0.4);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.fp-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.fp-card-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #111;
}
.fp-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.fp-card-title {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.fp-card-price {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.1rem;
}
.fp-card-cta {
  margin-top: auto;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.62 — Marketplace mega menu + clean category selector
 * ═══════════════════════════════════════════════════════════════ */

/* Mega menu: wider panel, 2-col grid of category links */
.nav-megamenu {
  min-width: 420px !important;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  padding: 1rem 1.25rem 0.75rem !important;
}
li:hover > .nav-megamenu,
.nav-megamenu:hover {
  display: grid !important;
}
.nav-megamenu .megamenu-heading {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.25rem 0.75rem 0.5rem;
  pointer-events: none;
}
.nav-megamenu .megamenu-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0.5rem 0.75rem;
  pointer-events: none;
}
.nav-megamenu > li > a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-megamenu > li > a:hover {
  background: rgba(245,184,0,0.12);
  color: var(--gold);
}
.nav-megamenu .dropdown-cta {
  grid-column: 1 / -1;
  text-align: center;
}
@media (max-width: 1100px) {
  .nav-megamenu { min-width: 340px !important; }
}

/* Clean category selector (replaces pills) */
.shop-toolbar-clean {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.shop-cat-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.shop-cat-wrap {
  position: relative;
}
.shop-cat-wrap::after {
  content: '▾';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
  font-size: 0.85rem;
}
.shop-cat-select {
  appearance: none;
  -webkit-appearance: none;
  background: #000;
  color: #fff;
  border: 2px solid rgba(245,184,0,0.5);
  border-radius: 10px;
  padding: 0.7rem 2.6rem 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 220px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.shop-cat-select:hover,
.shop-cat-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.15);
  outline: none;
}
.shop-results {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
@media (max-width: 560px) {
  .shop-toolbar-clean { gap: 0.6rem; }
  .shop-cat-select { min-width: 0; flex: 1; width: 100%; }
  .shop-cat-wrap { flex: 1 1 100%; }
  .shop-results { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
 * v3.66 — Dark-theme the commerce UI (cards + product detail) +
 *   richer marketplace mega menu. The shop was built light-theme
 *   (--white/--ink) which rendered near-invisible on the dark site.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Product cards (marketplace + shop grids) ─── */
.product-card {
  background: #000 !important;
  border: 2px solid rgba(245,184,0,0.4) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
}
.product-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.6) !important;
}
.product-image {
  background: #0a0a0a !important;
}
.product-image-ph {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  font-size: 3rem;
  background: linear-gradient(135deg, #111, #0a0a0a);
  color: rgba(245,184,0,0.5);
}
.product-name,
.product-name a { color: #fff !important; }
.product-name a:hover { color: var(--gold) !important; }
.product-price { color: var(--gold) !important; }
.product-price-old { color: rgba(255,255,255,0.4) !important; }
.product-category { color: var(--gold) !important; }
.product-stock { color: #4ade80 !important; }
.product-card .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
.product-card .btn-outline:hover { background: var(--gold) !important; color: #1a1a1a !important; }

/* ─── Product detail page — dark plate ─── */
.pd-media {
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%) !important;
  border: 2px solid rgba(245,184,0,0.3) !important;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}
.pd-media img { mix-blend-mode: normal !important; }
.pd-info h1 { color: #fff !important; }
.pd-price { color: var(--gold) !important; }
.pd-desc { color: rgba(255,255,255,0.8) !important; }
.pd-cats, .pd-cats a { color: var(--gold) !important; }
.pd-perk { color: rgba(255,255,255,0.85) !important; }
.pd-qty {
  border: 1.5px solid rgba(245,184,0,0.4) !important;
  border-radius: 10px;
}
.pd-qty button { color: var(--gold) !important; background: transparent !important; }
.pd-qty b { color: #fff !important; }
.pd-notfound h2 { color: #fff !important; }
/* Force the product page's own <main>/section onto the dark bg */
#pdRoot, .pd-layout { color: #fff; }

/* ═══ Richer marketplace mega menu (desktop) ═══ */
.nav-megamenu {
  min-width: 540px !important;
  padding: 1.25rem 1.5rem 1rem !important;
  gap: 0.15rem 2rem !important;
}
.nav-megamenu .megamenu-heading {
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(245,184,0,0.25);
  margin-bottom: 0.5rem;
  padding-bottom: 0.6rem;
}
.nav-megamenu > li > a {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-megamenu > li > a::before {
  content: '›';
  color: var(--gold);
  font-weight: 700;
  opacity: 0.6;
}
.nav-megamenu > li > a:hover::before { opacity: 1; }
.nav-megamenu .dropdown-cta::before { content: none; }

/* ═══════════════════════════════════════════════════════════════
 * v3.69 — PRODUCT DETAIL: single authoritative layout (supersedes the
 *   4 earlier conflicting .pd-* blocks). Fixes mobile where the info
 *   column (title/price/buy) was collapsing/pushed off after the image.
 * ═══════════════════════════════════════════════════════════════ */
.pd-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* mobile: stack */
  gap: 1.75rem !important;
  padding: 1rem 0 3rem !important;
  align-items: start !important;
}
@media (min-width: 900px) {
  .pd-layout { grid-template-columns: 1fr 1fr !important; }
}
.pd-media {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%) !important;
  border: 2px solid rgba(245,184,0,0.3) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.pd-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}
/* The info column must always be visible + full-width in its cell */
.pd-info {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  color: #fff !important;
}
.pd-info h1 { color: #fff !important; font-size: clamp(1.5rem, 5vw, 2.2rem) !important; margin: 0 0 0.75rem !important; }
.pd-price { color: var(--gold) !important; font-size: 1.75rem !important; font-weight: 800 !important; margin: 0 0 1rem !important; }
.pd-desc { color: rgba(255,255,255,0.82) !important; margin-bottom: 1.5rem !important; }
.pd-buy-row { display: flex !important; gap: 0.75rem !important; align-items: center !important; flex-wrap: wrap !important; margin-bottom: 0.75rem !important; }
.pd-qty { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; border: 1.5px solid rgba(245,184,0,0.4) !important; border-radius: 10px !important; padding: 0.25rem 0.5rem !important; }
.pd-qty button { background: transparent !important; color: var(--gold) !important; border: 0 !important; font-size: 1.3rem !important; cursor: pointer !important; width: 32px !important; }
.pd-qty b { color: #fff !important; min-width: 20px !important; text-align: center !important; }
.pd-perks { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; margin-top: 1rem !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.69 — PRODUCT CARDS authoritative (marketplace + shop grids).
 *   Fixes: black empty image area, clipped names, missing price/buttons
 *   on mobile. One block that wins over the earlier light-theme rules.
 * ═══════════════════════════════════════════════════════════════ */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.85rem !important; }
}
@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr !important; }
}
.product-card {
  background: #000 !important;
  border: 2px solid rgba(245,184,0,0.4) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;               /* never fixed — let content define height */
  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
}
.product-card .product-image,
.product-card .product-image-link {
  display: block !important;
  width: 100% !important;
}
.product-card .product-image {
  aspect-ratio: 1 / 1 !important;
  background: #0d0d0d !important;
  overflow: hidden !important;
}
.product-card .product-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.product-card .product-image-ph {
  display: grid !important; place-items: center !important;
  width: 100% !important; height: 100% !important;
  font-size: 2.5rem !important;
  background: linear-gradient(135deg, #141414, #0a0a0a) !important;
  color: rgba(245,184,0,0.45) !important;
}
.product-card .product-body {
  display: flex !important; flex-direction: column !important;
  gap: 0.4rem !important; padding: 1rem !important; flex: 1 !important;
}
.product-card .product-category { color: var(--gold) !important; font-size: 0.68rem !important; }
.product-card .product-name,
.product-card .product-name a {
  color: #fff !important;
  font-size: 0.98rem !important;
  line-height: 1.3 !important;
  min-height: 0 !important;              /* was 2.6em — could clip on mobile */
  display: block !important;
  white-space: normal !important;        /* allow wrapping — fixes "Male Dua…" cut */
  overflow: visible !important;
}
.product-card .product-price { color: var(--gold) !important; font-size: 1.2rem !important; }
.product-card .product-price-old { color: rgba(255,255,255,0.4) !important; }
.product-card .product-stock { color: #4ade80 !important; font-size: 0.78rem !important; }
.product-card .product-actions {
  display: flex !important; flex-direction: column !important; gap: 0.5rem !important;
  margin-top: auto !important; padding-top: 0.5rem !important;
}
.product-card .product-actions .btn { width: 100% !important; }
.product-card .btn-primary { background: var(--gold) !important; color: #1a1a1a !important; border: 0 !important; }
.product-card .btn-outline { background: transparent !important; border: 1.5px solid var(--gold) !important; color: var(--gold) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.70 — Marketplace grid, ID-scoped so it cannot be overridden by
 *   any of the older .product-grid/.product-card class blocks. Fixes
 *   the desktop single-column overlap seen after v3.69.
 * ═══════════════════════════════════════════════════════════════ */
#shopGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (max-width: 1100px) { #shopGrid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 820px)  { #shopGrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 480px)  { #shopGrid { grid-template-columns: 1fr !important; } }








#shopGrid .product-category { color: var(--gold) !important; }
#shopGrid .product-price { color: var(--gold) !important; font-size: 1.2rem !important; }
#shopGrid .product-price-old { color: rgba(255,255,255,0.4) !important; }
#shopGrid .product-stock { color: #4ade80 !important; }
#shopGrid .product-badge { background: var(--gold) !important; color: #1a1a1a !important; }


#shopGrid .btn-primary { background: var(--gold) !important; color: #1a1a1a !important; border: 0 !important; }
#shopGrid .btn-outline { background: transparent !important; border: 1.5px solid var(--gold) !important; color: var(--gold) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.71 — Solar Solutions polish:
 *   1. #recent-installs overlay stronger (bright panel bleeding through)
 *   2. #solar-assessment heading fits one line
 *   3. #solar-faq gets an id-targetable subtle bg slot (Image Manager)
 * ═══════════════════════════════════════════════════════════════ */

/* Stronger, guaranteed-dark overlay on the installs gallery section so the
   background photo (when present) stays subtle and text/tiles pop. Also caps
   the empty-space feel by tightening vertical padding. */
#recent-installs {
  background:
    linear-gradient(rgba(15,15,15,0.96), rgba(15,15,15,0.96)),
    url('/images/29-bg-solar-installs.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

/* "Get a Tailored Solar Recommendation" — keep on one line on desktop */
#solar-assessment h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
@media (max-width: 640px) {
  /* allow wrap on small screens so it never overflows the viewport */
  #solar-assessment h2 { white-space: normal !important; }
}

/* Solar FAQ — id-targetable subtle background slot for Ezy Image Manager.
   Defaults to a plain dark panel; Image Manager can point #solar-faq at a
   real photo via this same rule (slot key 31-bg-solar-faq). */
#solar-faq {
  background:
    linear-gradient(rgba(15,15,15,0.97), rgba(15,15,15,0.97)),
    url('/images/45-bg-solar-faq.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#solar-faq h2, #solar-faq .eyebrow { color: #fff !important; }
#solar-faq .eyebrow { color: var(--gold) !important; }
#solar-faq p { color: rgba(255,255,255,0.8) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.72 — Irrigation Mulch Film & Weed Mat: product image tiles on
 *   each card + id-targetable subtle section background.
 * ═══════════════════════════════════════════════════════════════ */
.mw-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: #0d0d0d;              /* placeholder until image uploaded */
  margin-bottom: 1.25rem;
  border: 1px solid rgba(245,184,0,0.25);
}
/* Section background slot (Ezy Image Manager → slot 48) */
#mulch-weed {
  background:
    linear-gradient(rgba(15,15,15,0.96), rgba(15,15,15,0.96)),
    url('/images/48-bg-mulch-weed.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#mulch-weed h2 { color: #fff !important; }
#mulch-weed .section-header .eyebrow { color: var(--gold) !important; }
#mulch-weed .section-header p { color: rgba(255,255,255,0.8) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.73 — Form wrappers: pure black + gold border (match card standard)
 *   across contact, services, warranty, order-tracking, all quote pages,
 *   and the home newsletter. Inputs dark with readable white text.
 * ═══════════════════════════════════════════════════════════════ */
.form-wrap,
.newsletter-form-wrap,
#newsletter .form-wrap,
.form-wrap[style*="white"],
.form-wrap[style*="#fff"],
.form-wrap[style*="var(--white)"] {
  background: #000 !important;
  border: 2px solid rgba(245,184,0,0.4) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
  color: #fff !important;
}
/* All text inside forms readable on black */
.form-wrap *,
.newsletter-form-wrap *,
.wizard-form *,
.lead-form * {
  color: #fff;
}
.form-wrap label,
.newsletter-form-wrap label,
.wizard-form label,
.lead-form label {
  color: #fff !important;
  font-weight: 600 !important;
}
.form-wrap h1, .form-wrap h2, .form-wrap h3, .form-wrap h4, .form-wrap h5,
.form-wrap .form-section-heading,
.wizard-step h3, .wizard-step h4 {
  color: #fff !important;
}
.form-wrap p, .form-wrap .form-hint, .form-wrap small,
.newsletter-form-wrap p {
  color: rgba(255,255,255,0.75) !important;
}
/* Inputs / selects / textareas — dark fields, white text, gold focus */
.form-wrap input,
.form-wrap select,
.form-wrap textarea,
.newsletter-form-wrap input,
.newsletter-form-wrap select,
.newsletter-form-wrap textarea,
.lead-form input,
.lead-form select,
.lead-form textarea,
.wizard-form input,
.wizard-form select,
.wizard-form textarea {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(245,184,0,0.3) !important;
  border-radius: 8px !important;
}
.form-wrap input::placeholder,
.form-wrap textarea::placeholder,
.newsletter-form-wrap input::placeholder,
.lead-form input::placeholder,
.lead-form textarea::placeholder,
.wizard-form input::placeholder,
.wizard-form textarea::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus,
.newsletter-form-wrap input:focus,
.lead-form input:focus,
.lead-form textarea:focus,
.wizard-form input:focus,
.wizard-form textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(245,184,0,0.15) !important;
  outline: none !important;
}
/* Select dropdown option text (renders in OS colors on some browsers) */
.form-wrap select option,
.lead-form select option,
.wizard-form select option {
  background: #1a1a1a !important;
  color: #fff !important;
}
/* Radios/checkboxes labels + fieldset legends */
.form-wrap fieldset,
.lead-form fieldset { border-color: rgba(245,184,0,0.2) !important; }
.form-wrap legend,
.lead-form legend { color: var(--gold) !important; font-weight: 700 !important; }
/* Wizard step chips/progress readable */
.wizard-step { color: #fff !important; }
.wizard-progress, .wizard-progress * { color: rgba(255,255,255,0.8) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.74 — Services page: wire section background slots (36–42) that
 *   were in the manifest but never bound in CSS. Now Image Manager
 *   can actually place subtle backgrounds. + uniform checkmarks +
 *   guaranteed-visible btn-outline.
 * ═══════════════════════════════════════════════════════════════ */
#solar-install {
  background: linear-gradient(rgba(15,15,15,0.96),rgba(15,15,15,0.96)), url('/images/36-bg-svc-solar-install.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#irrigation-install {
  background: linear-gradient(rgba(15,15,15,0.96),rgba(15,15,15,0.96)), url('/images/37-bg-svc-irrigation-install.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#ac-install {
  background: linear-gradient(rgba(15,15,15,0.96),rgba(15,15,15,0.96)), url('/images/38-bg-svc-ac-install.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#billboard {
  background: linear-gradient(rgba(15,15,15,0.96),rgba(15,15,15,0.96)), url('/images/39-bg-svc-billboard.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#special-orders {
  background: linear-gradient(rgba(15,15,15,0.96),rgba(15,15,15,0.96)), url('/images/40-bg-svc-special-orders.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#event-space {
  background: linear-gradient(rgba(15,15,15,0.96),rgba(15,15,15,0.96)), url('/images/41-bg-svc-event-space.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#service-request {
  background: linear-gradient(rgba(15,15,15,0.97),rgba(15,15,15,0.97)), url('/images/42-bg-svc-request.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
/* Keep all services section text readable on the dark backgrounds */
#solar-install, #irrigation-install, #ac-install, #billboard, #special-orders, #event-space, #service-request { color: #fff; }
#solar-install h2, #irrigation-install h2, #ac-install h2, #billboard h2, #special-orders h2, #event-space h2, #service-request h2 { color: #fff !important; }
#solar-install .eyebrow, #irrigation-install .eyebrow, #ac-install .eyebrow, #billboard .eyebrow, #special-orders .eyebrow, #event-space .eyebrow, #service-request .eyebrow { color: var(--gold) !important; }

/* Uniform checkmark list (matches the inline ✓ used elsewhere) */
#solar-install .check-list strong { color: #fff !important; }

/* btn-outline on services cards — force visible gold border + gold text */
#solar-install .btn-outline,
#irrigation-install .btn-outline,
#ac-install .btn-outline,
.service-card .btn-outline,
.info-block .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
#solar-install .btn-outline:hover,
#irrigation-install .btn-outline:hover,
#ac-install .btn-outline:hover,
.service-card .btn-outline:hover,
.info-block .btn-outline:hover {
  background: var(--gold) !important;
  color: #1a1a1a !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.76 — MOBILE DRAWER modern dark revamp. Supersedes the earlier
 *   light-theme drawer (white bg + black text on grey). Now: deep
 *   black glass, white text, gold accents, smooth submenu reveals.
 * ═══════════════════════════════════════════════════════════════ */
.drawer {
  background: linear-gradient(180deg, #0d0d0d 0%, #000 100%) !important;
  box-shadow: -12px 0 48px rgba(0,0,0,0.6) !important;
  border-left: 1px solid rgba(245,184,0,0.15) !important;
}
.drawer-header {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(245,184,0,0.03) !important;
}
.drawer-close {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.drawer-close:hover { background: var(--gold) !important; color: #1a1a1a !important; }

/* Top-level nav items */
.drawer-nav li,
.drawer-nav-item.has-submenu > .drawer-nav-row,
.drawer-nav-item.has-submenu > .drawer-nav-row {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.drawer-nav a {
  color: #fff !important;
  font-weight: 500 !important;
}
.drawer-nav a:hover,
.drawer-nav a.active {
  background: rgba(245,184,0,0.1) !important;
  color: var(--gold) !important;
}
.drawer-nav a.active {
  border-left: 3px solid var(--gold) !important;
}
.drawer-nav a::after { color: var(--gold) !important; }

/* Submenu toggle (+/−) */
.drawer-submenu-toggle {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
}
.drawer-submenu-toggle[aria-expanded="true"] { color: var(--gold) !important; }
.drawer-submenu-toggle:hover {
  background: rgba(245,184,0,0.12) !important;
  color: var(--gold) !important;
}

/* Submenu panel — slightly inset dark, gold left rail */
.drawer-submenu {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 3px 0 0 rgba(245,184,0,0.4) !important;
}
.drawer-submenu li { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.drawer-submenu a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.925rem !important;
}
.drawer-submenu a:hover { color: var(--gold) !important; background: rgba(245,184,0,0.08) !important; }
.drawer-submenu-heading,
.drawer-submenu .drawer-submenu-heading {
  color: var(--gold) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.5rem 0.4rem 2.75rem !important;
  font-weight: 700 !important;
}

/* CTA + social footer inside drawer */
.drawer-cta {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(245,184,0,0.03) !important;
}
.drawer-social {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
.drawer-social a {
  background: var(--gold) !important;
  color: #1a1a1a !important;
  border: none !important;
}
.drawer-social a:hover { background: #fff !important; color: #1a1a1a !important; transform: translateY(-2px); }

/* Backdrop a touch darker for the glass feel */
.drawer-backdrop { background: rgba(0,0,0,0.6) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.79 — Mobile drawer account section dark (was black text):
 *   My Account header + Sign In / Create Account / Track My Order.
 * ═══════════════════════════════════════════════════════════════ */
.drawer-account-section {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.drawer-account-header {
  color: var(--gold) !important;
}
.drawer-account-item {
  color: #fff !important;
}
.drawer-account-item svg { color: var(--gold) !important; stroke: var(--gold) !important; }
.drawer-account-item:hover {
  color: var(--gold) !important;
  background: rgba(245,184,0,0.08) !important;
  padding-left: 0.5rem !important;
  border-radius: 6px;
}
.drawer-account-item:hover svg { color: var(--gold) !important; stroke: var(--gold) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.80 — Batch fixes: AC headline size, AC tier text, irrigation
 *   fittings bullets, solar gallery spacing + bg. Cache-bust forced.
 * ═══════════════════════════════════════════════════════════════ */

/* AC "Cool Your Home. Cut Your Light Bill." — one line, sane size, visible */
#solar-ac-combo .solar-ac-headline {
  font-size: clamp(1.4rem, 3vw, 2.1rem) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  /* kill the gradient-clip that can render invisible on some setups */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
@media (min-width: 700px) {
  #solar-ac-combo .solar-ac-headline { white-space: nowrap !important; }
}

/* AC BTU tier cards — force ALL text white (middle gold-border card was dark) */
#ac-range .grid-3 > .ac-tier,
#ac-range .grid-3 > .ac-tier * {
  color: #fff !important;
}
#ac-range .grid-3 > .ac-tier .ac-btu { color: var(--gold) !important; }
#ac-range .grid-3 > .ac-tier .ac-btu-unit { color: rgba(255,255,255,0.75) !important; }
#ac-range .grid-3 > .ac-tier .btn-primary { background: var(--gold) !important; color: #1a1a1a !important; }
#ac-range .grid-3 > .ac-tier .btn-outline { background: transparent !important; border: 1.5px solid var(--gold) !important; color: var(--gold) !important; }

/* Irrigation #fittings / #main-hose card white bullets — the size-chip lists */
#fittings .info-block li,
#fittings .info-block .feature-list li,
#main-hose .info-block li,
#drip-hose .info-block li,
#drip-tape .info-block li {
  color: #fff !important;
}
#fittings .info-block h4,
#main-hose .info-block h4 { color: #fff !important; }

/* Solar gallery: images shouldn't touch — add gap; tighten empty space below */
#recent-installs .install-gallery { gap: 1.25rem !important; }
#recent-installs { padding-bottom: 2.5rem !important; }
#recent-installs .install-gallery + .text-center,
#recent-installs .text-center { margin-top: 1.5rem !important; }

/* Solar assessment CTA — make the subtle bg a touch more visible + tighten */
#solar-assessment {
  background:
    linear-gradient(rgba(20,20,20,0.88), rgba(20,20,20,0.88)),
    url('/images/30-bg-solar-assessment.jpg') center/cover no-repeat !important;
  background-color: #141414 !important;
}

/* v3.80b — AC middle card (nth-child 2) list items were still dark. Max override. */
#ac-range .grid-3 > .ac-tier:nth-child(2) li,
#ac-range .grid-3 > .ac-tier:nth-child(2) ul li,
#ac-range .grid-3 > .ac-tier:nth-child(2) p,
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-features li,
#ac-range .grid-3 > .ac-tier:nth-child(2) * {
  color: #fff !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu { color: #1a1a1a !important; }
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu-unit { color: rgba(0,0,0,0.6) !important; }
/* Wait — 18000 is the gold-border BLACK card, so BTU number should be gold not dark */
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu { color: var(--gold) !important; }
#ac-range .grid-3 > .ac-tier:nth-child(2) .ac-btu-unit { color: rgba(255,255,255,0.75) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.81 — CRITICAL FIX: JS-injected commerce content (marketplace
 *   grid cards, single product page) was inheriting the global
 *   `.fade-in { opacity: 0 }` and never getting `.visible` (the
 *   IntersectionObserver ran before the cards were injected). Result:
 *   content flashed then vanished. Force these always-visible.
 * ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
 * v3.82 — Home Featured Packages: PowerElite 12 (Most Popular) →
 *   green treatment to stand out (was gold). Black card + green
 *   border + green pill + green View Details.
 * ═══════════════════════════════════════════════════════════════ */
.package-preview.featured.tier-popular,
.package-preview.tier-popular {
  background: #000 !important;
  background-image: none !important;
  border: 3px solid var(--green) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(8,117,16,0.25), 0 12px 30px rgba(8,117,16,0.25) !important;
}
.package-preview.tier-popular h3,
.package-preview.tier-popular > p,
.package-preview.tier-popular ul li {
  color: #fff !important;
}
.package-preview.tier-popular ul {
  border-top-color: rgba(255,255,255,0.15) !important;
}
/* "Most Popular" pill — green */
.package-preview.tier-popular .package-preview-tag,
.package-preview .package-preview-tag.popular {
  background: var(--green) !important;
  color: #fff !important;
}
/* View Details — green */
.package-preview.tier-popular .package-preview-cta {
  color: var(--green) !important;
  font-weight: 700 !important;
}
.package-preview.tier-popular:hover {
  transform: translateY(-6px);
  border-color: #0a9c14 !important;
  box-shadow: 0 0 0 1px rgba(8,117,16,0.4), 0 20px 42px rgba(8,117,16,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.82 — About "Rooted in Community" images: the first image was
 *   badly cropped by object-fit:cover at 16:10. Use a taller ratio +
 *   top-positioned cover so faces/subjects aren't cut off.
 * ═══════════════════════════════════════════════════════════════ */
#about-rooted-community .community-card-image,
.community-card-image {
  aspect-ratio: 4 / 3 !important;      /* taller frame shows more of each photo */
  background: #0d0d0d !important;
}
.community-card-image img {
  object-fit: cover !important;
  object-position: center 30% !important;  /* bias toward the top so heads aren't cropped */
}

/* v3.82b — PowerElite pill green, beat the earlier !important gold rule */
.package-preview.tier-popular .package-preview-tag.popular,
.package-preview.featured.tier-popular .package-preview-tag,
a.package-preview.tier-popular .package-preview-tag {
  background: var(--green) !important;
  color: #fff !important;
}

/* v3.82c — PowerElite View Details CTA green */
.package-preview.tier-popular .package-preview-cta,
.package-preview.featured.tier-popular .package-preview-cta,
a.package-preview.tier-popular .package-preview-cta {
  color: var(--green) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.83 — CRITICAL marketplace card action buttons. The #shopGrid ID
 *   rules (v3.70) outranked the .product-grid mobile rules, so the
 *   Add to Cart / View Details buttons rendered as one giant broken
 *   stack. Define the actions fully under #shopGrid so it's correct
 *   at every width.
 * ═══════════════════════════════════════════════════════════════ */




/* Kill any decorative ::before cart-icon pseudo that older rules injected
   (that's what ballooned the button in the screenshot) */

/* On phones, hide the secondary View Details (image + name already link to it),
   keep Add to Cart full width and normal height. */
@media (max-width: 600px) {
  
  
}

/* v3.83 — PowerStart entry card: black + gold border (was green), so only
   PowerElite (popular) is green + stands out. Entry pill + CTA gold. */
.package-preview.tier-entry {
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2.5px solid var(--gold) !important;
  color: #fff !important;
}
.package-preview.tier-entry .package-preview-tag {
  background: var(--gold) !important;
  color: #1a1a1a !important;
}
.package-preview.tier-entry .package-preview-cta {
  color: var(--gold) !important;
}
.package-preview.tier-entry h3,
.package-preview.tier-entry > p,
.package-preview.tier-entry ul li { color: #fff !important; }

/* CTA button spacing — the two buttons below featured packages were too tight */
.package-preview-grid + .text-center .btn-group,
.package-preview-grid ~ .text-center .btn-group,
#featured-solar .btn-group,
.section-cta .btn-group {
  gap: 1rem !important;
  flex-wrap: wrap !important;
  row-gap: 1rem !important;
}
.package-preview-grid + .text-center,
.package-preview-grid ~ .text-center { margin-top: 2rem !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.84 — Solar Packages: PowerElite 12 "Most Popular" pill.
 *   Was solid gold bg. Make it match the OTHER cards' subtle pill
 *   style, but with GREEN text so it still stands out as popular.
 * ═══════════════════════════════════════════════════════════════ */
#packages .package-card.featured .package-eyebrow,
.package-card.featured .package-eyebrow,
article.package-card.featured .package-eyebrow {
  background: rgba(8, 117, 16, 0.15) !important;
  color: var(--green) !important;
  border-color: rgba(8, 117, 16, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.84 — "Our Work" gallery: kill the empty-space gap. The section
 *   had a full-bleed bg leaving a huge void; images touched. Now a
 *   tidy fixed-height carousel with the CTA right below.
 * ═══════════════════════════════════════════════════════════════ */
#recent-installs { padding-top: 3rem !important; padding-bottom: 2.5rem !important; }

/* Grid mode (2–3 images, no carousel yet): even gaps, capped height */
#recent-installs .install-gallery[data-gallery-mode="grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
}
@media (max-width: 900px) { #recent-installs .install-gallery[data-gallery-mode="grid"] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { #recent-installs .install-gallery[data-gallery-mode="grid"] { grid-template-columns: 1fr !important; } }

/* Every tile: fixed 4:3 frame, never taller than needed */
#recent-installs .install-tile {
  aspect-ratio: 4 / 3 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 2px solid rgba(245,184,0,0.3) !important;
  margin: 0 !important;
}
#recent-installs .install-tile img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}

/* Carousel mode: horizontal scroller, one page visible, snap */
#recent-installs .install-gallery[data-gallery-mode="carousel"] {
  display: flex !important;
  overflow-x: hidden !important;
  gap: 1.25rem !important;
  scroll-snap-type: x mandatory !important;
  grid-template-columns: none !important;
}
#recent-installs .install-gallery[data-gallery-mode="carousel"] .install-tile {
  flex: 0 0 calc((100% - 2.5rem) / 3) !important;
  scroll-snap-align: start !important;
}
@media (max-width: 900px) {
  #recent-installs .install-gallery[data-gallery-mode="carousel"] .install-tile { flex: 0 0 calc((100% - 1.25rem) / 2) !important; }
}
@media (max-width: 560px) {
  #recent-installs .install-gallery[data-gallery-mode="carousel"] .install-tile { flex: 0 0 100% !important; }
}
.install-gallery-carousel-wrap { position: relative; }
.install-gallery-dots { display: flex; gap: 7px; justify-content: center; margin-top: 1.25rem; }
.install-gallery-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.3); transition: background 0.2s, transform 0.2s;
}
.install-gallery-dots button.active { background: var(--gold); transform: scale(1.3); }

/* CTA right below the gallery — no huge gap */
#recent-installs .install-gallery + .text-center,
#recent-installs .install-gallery-carousel-wrap + .text-center,
#recent-installs .text-center { margin-top: 1.75rem !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.85 — Drip Hose + Drip Tape card pills/buttons match their border:
 *   LEFT card (green border) → GREEN pills, green Get-a-Quote, green
 *     WhatsApp border, green FREE-kit badge.
 *   RIGHT card (gold border) → GOLD pills, gold buttons, gold badge.
 *   Text kept legible on each.
 * ═══════════════════════════════════════════════════════════════ */

/* LEFT card = green treatment */
#drip-hose .grid-2 > .info-block:nth-child(1) .size-chip,
#drip-tape .grid-2 > .info-block:nth-child(1) .size-chip {
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
}
#drip-hose .grid-2 > .info-block:nth-child(1) .btn-primary,
#drip-tape .grid-2 > .info-block:nth-child(1) .btn-primary {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
}
#drip-hose .grid-2 > .info-block:nth-child(1) .btn-outline,
#drip-tape .grid-2 > .info-block:nth-child(1) .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--green) !important;
  color: var(--green) !important;
}
#drip-hose .grid-2 > .info-block:nth-child(1) .free-badge {
  background: rgba(8,117,16,0.12) !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
}
#drip-hose .grid-2 > .info-block:nth-child(1) .free-badge svg { color: var(--green) !important; stroke: var(--green) !important; }

/* RIGHT card = gold treatment */
#drip-hose .grid-2 > .info-block:nth-child(2) .size-chip,
#drip-tape .grid-2 > .info-block:nth-child(2) .size-chip {
  background: var(--gold) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border: 0 !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2) .btn-primary,
#drip-tape .grid-2 > .info-block:nth-child(2) .btn-primary {
  background: var(--gold) !important;
  color: #1a1a1a !important;
  border: 0 !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2) .btn-outline,
#drip-tape .grid-2 > .info-block:nth-child(2) .btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2) .free-badge {
  background: rgba(245,184,0,0.12) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
}
#drip-hose .grid-2 > .info-block:nth-child(2) .free-badge svg { color: var(--gold) !important; stroke: var(--gold) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.86 — AC page: brand pill → black bg, 18000 card WhatsApp button
 *   legible, Solar+AC heading centered + visible + subtle bg lighter.
 * ═══════════════════════════════════════════════════════════════ */

/* Brand pill: black bg + gold border, legible white/gold text */
.ac-brand-pill {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,184,0,0.2) !important;
}
.ac-brand-pill em {
  color: #1a1a1a !important;
  background: var(--gold) !important;
  font-weight: 800 !important;
}
.ac-brand-pill strong { color: var(--gold) !important; }

/* 18,000 BTU card (nth-child 2, gold-border black card): the WhatsApp
   "About This" outline button had gold text on... issue = invisible.
   Force gold border + gold text so it reads on the black card. */
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline,
#ac-range .grid-3 > .ac-tier:nth-child(2) a.btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline svg,
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline path {
  fill: var(--gold) !important;
  color: var(--gold) !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline:hover {
  background: var(--gold) !important;
  color: #1a1a1a !important;
}
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline:hover svg,
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn-outline:hover path {
  fill: #1a1a1a !important;
}

/* Solar + AC section: center the heading + make it visible; lighten the
   subtle background so it actually shows through. */
#solar-ac-combo {
  background:
    linear-gradient(rgba(20,20,20,0.82), rgba(20,20,20,0.82)),
    url('/images/33-bg-solar-ac.jpg') center/cover no-repeat !important;
  background-color: #141414 !important;
  text-align: center !important;
}
#solar-ac-combo .container-narrow,
#solar-ac-combo .container { text-align: center !important; }
#solar-ac-combo .solar-ac-headline,
#solar-ac-combo h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem) !important;
  line-height: 1.2 !important;
}
#solar-ac-combo .solar-ac-eyebrow,
#solar-ac-combo .eyebrow { color: var(--gold) !important; }
#solar-ac-combo p { color: rgba(255,255,255,0.9) !important; }

/* ═══════════════════════════════════════════════════════════════
 * v3.87 — Support page card icons visible on black cards + section
 *   background slots for customer-care pages + mega menu overhaul.
 * ═══════════════════════════════════════════════════════════════ */

/* Support (and any sitewide black service-card) icons: gold circle,
   dark icon — visible on the black card treatment. */
.service-card .service-icon {
  background: linear-gradient(135deg, var(--gold), #E5AA00) !important;
  color: #1a1a1a !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(245,184,0,0.35) !important;
}
.service-card .service-icon svg {
  color: #1a1a1a !important;
  stroke: #1a1a1a !important;
}
/* keep tier-colored cards' own icon colors (they set white/ink explicitly) */
.tier-color-green .service-icon,
.tier-color-blue .service-icon,
.tier-color-teal .service-icon,
.tier-color-plum .service-icon,
.tier-color-ink .service-icon { border-radius: var(--radius) !important; }

/* ─── Customer-care page section backgrounds (Ezy Image Manager slots) ─── */
#order-tracking-main, .order-tracking-section,
#delivery-main, #warranty-main, #refunds-main, #faq-main, #support-main {
  background:
    linear-gradient(rgba(15,15,15,0.96), rgba(15,15,15,0.96)),
    var(--page-bg-image, none) center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}

/* v3.87 — Customer-care page hero backgrounds (Ezy Image Manager slots 49–54) */
#track-hero {
  background: linear-gradient(rgba(15,15,15,0.9),rgba(15,15,15,0.9)), url('/images/49-bg-track-order.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#delivery-hero {
  background: linear-gradient(rgba(15,15,15,0.9),rgba(15,15,15,0.9)), url('/images/50-bg-delivery.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#warranty-hero {
  background: linear-gradient(rgba(15,15,15,0.9),rgba(15,15,15,0.9)), url('/images/51-bg-warranty.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#refunds-hero {
  background: linear-gradient(rgba(15,15,15,0.9),rgba(15,15,15,0.9)), url('/images/52-bg-refunds.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#faq-hero {
  background: linear-gradient(rgba(15,15,15,0.9),rgba(15,15,15,0.9)), url('/images/53-bg-faq.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}
#support-hero {
  background: linear-gradient(rgba(15,15,15,0.9),rgba(15,15,15,0.9)), url('/images/54-bg-support.jpg') center/cover no-repeat !important;
  background-color: #0f0f0f !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.87 — Marketplace MEGA MENU overhaul: premium 2-panel dropdown
 *   (category columns + featured deals panel). Replaces the plain list.
 * ═══════════════════════════════════════════════════════════════ */
.nav-megamenu {
  min-width: 620px !important;
  max-width: 720px !important;
  padding: 0 !important;
  display: none;
  border: 1px solid rgba(245,184,0,0.2) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  background: #0d0d0d !important;
}
li:hover > .nav-megamenu,
.nav-megamenu:hover { display: block !important; }

.nav-megamenu .mm-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
}
.nav-megamenu .mm-cats { padding: 1.5rem 1.5rem 1.5rem 1.75rem; }
.nav-megamenu .mm-heading {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.85rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-megamenu .mm-cat-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
.nav-megamenu .mm-cat {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.nav-megamenu .mm-cat::before {
  content: '›';
  color: var(--gold);
  font-weight: 700;
  margin-right: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.nav-megamenu .mm-cat:hover {
  background: rgba(245,184,0,0.1);
  color: var(--gold);
  padding-left: 1rem;
}
.nav-megamenu .mm-cat:hover::before { opacity: 1; }
.nav-megamenu .mm-cat-all { color: #fff; font-weight: 700; }

/* Featured panel (right side) */
.nav-megamenu .mm-feature {
  background: linear-gradient(155deg, #14401f 0%, #0a2412 100%);
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(245,184,0,0.15);
}
.nav-megamenu .mm-feature-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.nav-megamenu .mm-feature-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.nav-megamenu .mm-feature-text {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.nav-megamenu .mm-feature-btn {
  display: inline-block;
  background: var(--gold);
  color: #1a1a1a !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-bottom: 0.75rem;
}
.nav-megamenu .mm-feature-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,184,0,0.35);
}
.nav-megamenu .mm-feature-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
}
.nav-megamenu .mm-feature-link:hover { color: var(--gold) !important; }

@media (max-width: 1150px) {
  .nav-megamenu { min-width: 520px !important; }
  .nav-megamenu .mm-panel { grid-template-columns: 1.4fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
 * v3.91 — Solar packages, PowerElite 12 corrections:
 *   - eyebrow pill text back to GOLD (same look as Commercial pill)
 *   - "MOST POPULAR" ribbon at top → GREEN background
 *   Care plans: Platinum card → green border, green pill, green button.
 * ═══════════════════════════════════════════════════════════════ */

/* Eyebrow pill: identical to the other cards (gold text, subtle gold tint) */
#packages article.package-card.featured[id][class*="package"] .package-eyebrow,
#packages .package-card.featured .package-eyebrow,
body #packages article.package-card.featured .package-eyebrow,
.package-card.featured .package-eyebrow {
  background: rgba(245, 184, 0, 0.15) !important;
  background-color: rgba(245, 184, 0, 0.15) !important;
  color: var(--gold) !important;
  border-color: rgba(245, 184, 0, 0.4) !important;
}

/* "MOST POPULAR" ribbon → green */
.package-card.featured::before,
#packages .package-card.featured::before,
body #packages article.package-card.featured::before {
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(8, 117, 16, 0.45) !important;
}

/* ─── Care plans: Platinum = green treatment ─── */
#care-plans article.care-plan-card.platinum,
body #care-plans article.care-plan-card.platinum {
  border: 3px solid var(--green) !important;
  box-shadow: 0 0 0 1px rgba(8,117,16,0.25), 0 12px 30px rgba(8,117,16,0.25) !important;
}
#care-plans article.care-plan-card.platinum .care-plan-badge,
#care-plans article.care-plan-card[class*="care"].platinum .care-plan-badge,
body #care-plans article.care-plan-card.platinum .care-plan-badge {
  background: var(--green) !important;
  background-color: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}
#care-plans article.care-plan-card.platinum .btn,
#care-plans article.care-plan-card.platinum .btn-primary,
#care-plans article.care-plan-card.platinum .btn-gold,
body #care-plans article.care-plan-card.platinum .btn {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
}
#care-plans article.care-plan-card.platinum .btn:hover {
  background: #0a9c14 !important;
}

/* v3.91b — care plan cards are <div>, not <article>. Correct selectors. */
#care-plans .care-plan-card.platinum,
#care-plans div.care-plan-card.platinum,
body #care-plans .care-plan-card.platinum {
  border: 3px solid var(--green) !important;
  box-shadow: 0 0 0 1px rgba(8,117,16,0.25), 0 12px 30px rgba(8,117,16,0.25) !important;
}
#care-plans .care-plan-card.platinum .care-plan-badge,
body #care-plans .care-plan-card.platinum .care-plan-badge {
  background: var(--green) !important;
  background-color: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}
#care-plans .care-plan-card.platinum .btn,
#care-plans .care-plan-card.platinum .btn-gold,
body #care-plans .care-plan-card.platinum .btn-gold {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
}
#care-plans .care-plan-card.platinum .btn:hover { background: #0a9c14 !important; }
/* v3.91c — Platinum corner ribbon (::before "PREMIUM") → green too */
#care-plans .care-plan-card.platinum::before,
body #care-plans .care-plan-card.platinum::before {
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(8,117,16,0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.99 — Mobile responsiveness hardening. Prevent ALL horizontal
 *   overflow (the "not mobile friendly" complaint). Global guard +
 *   fixes for About grids and Solar gallery tiles.
 * ═══════════════════════════════════════════════════════════════ */

/* Global: never allow horizontal scroll on the page */
html, body { max-width: 100%; overflow-x: hidden; }

/* Any grid collapses to a single column on phones (belt-and-braces —
   some grid rules used min-width columns that could overflow) */
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  /* division/service/value cards full width, no fixed min */
  .division-card, .service-card, .value-card, .info-block, .care-plan-card, .package-card, .ac-tier {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* images never exceed their container */
  img { max-width: 100% !important; height: auto; }
  /* buttons wrap instead of pushing width */
  .btn-group { flex-wrap: wrap !important; }
  .btn { max-width: 100% !important; }
}

/* Solar gallery tiles: constrain to grid cell so they can't overflow */
#recent-installs .install-tile,
#recent-installs .install-tile img {
  max-width: 100% !important;
}
#recent-installs .install-gallery[data-gallery-mode="carousel"] .install-tile {
  min-width: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * v4.26 — Mobile polish
 *   1. Sticky header on mobile (overflow-x:hidden on html/body kills
 *      position:sticky — use clip instead, which does NOT break sticky)
 *   2. About "What We Offer": nth-child color tiers were forcing tall
 *      vertical cards on mobile — normalize all 5 cards
 *   3. About R.O.O.T.S.: 5 tall cards stacked vertically on mobile →
 *      compact horizontal rows (badge left, text right)
 * ═══════════════════════════════════════════════════════════════ */

/* 1 — sticky header: overflow-x:clip keeps the no-sideways-scroll guard
   WITHOUT disabling sticky (overflow:hidden does disable it). */
html, body { overflow-x: clip !important; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden !important; } }
.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
@media (max-width: 900px) {
  /* Smart header: compact on mobile so it doesn't eat the screen */
  .site-header .container { padding-top: .35rem !important; padding-bottom: .35rem !important; }
  .site-header .logo img, .site-header .nav-logo img { height: 48px !important; width: auto !important; }
  .site-header.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,.45) !important; }
}

/* 2 — About "What We Offer": keep the 5 tier colours, just fix heights.
   Cards are natural height (no stretch) and single-column on phones so the
   blue Irrigation + gold Marketplace cards stop rendering tall & vertical. */
#wwo-grid { align-items: start !important; }
#wwo-grid .division-card {
  min-height: 0 !important; height: auto !important; aspect-ratio: auto !important;
  display: flex !important; flex-direction: column !important;
}
#wwo-grid .division-card-body { padding: 1.25rem !important; }
#wwo-grid .division-card p { flex: 0 0 auto !important; margin-bottom: 0 !important; }
#wwo-grid .division-card .btn-group { margin-top: 1rem !important; }
@media (max-width: 760px) {
  #wwo-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  #wwo-grid > article:nth-child(5) { grid-column: 1 !important; }   /* no 2-col span on phones */
  #wwo-grid .division-card-body { padding: 1.1rem !important; }
  #wwo-grid .division-card .btn { width: 100% !important; text-align: center !important; }
}

/* 3 — About R.O.O.T.S.: compact horizontal rows on mobile */
@media (max-width: 700px) {
  #about-roots .grid-3,
  .roots-grid,
  #about-core-values .grid-3 { grid-template-columns: 1fr !important; gap: .75rem !important; }
  #about-roots .service-card,
  #about-core-values .service-card,
  .roots-grid .service-card {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    align-items: center !important;
    gap: .9rem !important;
    text-align: left !important;
    padding: .9rem 1rem !important;
    min-height: 0 !important;
  }
  #about-roots .service-card .letter-badge,
  #about-core-values .service-card .letter-badge,
  .roots-grid .service-card .letter-badge {
    width: 52px !important; height: 52px !important;
    margin: 0 !important; grid-row: 1 / 3 !important;
    font-size: 1.5rem !important;
  }
  #about-roots .service-card h4,
  #about-core-values .service-card h4,
  .roots-grid .service-card h4 { margin: 0 !important; grid-column: 2 !important; }
  #about-roots .service-card p,
  #about-core-values .service-card p,
  .roots-grid .service-card p { margin: .2rem 0 0 !important; grid-column: 2 !important; font-size: .9rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * v4.27 — Commerce dark-theme sweep: product page, cart, checkout.
 *   Kills every white/cream/black-text leftover so all text reads on dark.
 * ═══════════════════════════════════════════════════════════════ */

/* ── PRODUCT PAGE ── */
/* Quantity box: was white bg + white text (invisible number) */
.pd-qty { background: #0d0d0d !important; border: 1.5px solid rgba(245,184,0,.5) !important; }
.pd-qty button { background: #1a1a1a !important; color: var(--gold) !important; border: 1px solid rgba(245,184,0,.35) !important; }
.pd-qty button:hover { background: var(--gold) !important; color: #1a1a1a !important; }
.pd-qty b, #pdQtyDisplay { color: #fff !important; background: transparent !important; font-weight: 800 !important; }
/* Info panel: remove the lighter grey plate — blend with page background */
#pdWrap .pd-info, .pd-info { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.pd-cats, .pd-cats a { color: var(--gold) !important; }
.pd-desc, .pd-desc p, .pd-desc li { color: rgba(255,255,255,.85) !important; }
.pd-perk { background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.9) !important; border: 1px solid rgba(245,184,0,.2) !important; }

/* ── CART PAGE ── */
.cart-layout, .cart-items-wrap { color: #fff !important; }
.cart-item { background: #000 !important; border: 1.5px solid rgba(245,184,0,.35) !important; color: #fff !important; }
.cart-item-name, .cart-item-name a { color: #fff !important; }
.cart-item-meta, .cart-item-price { color: rgba(255,255,255,.8) !important; }
.cart-item-img { background: #0d0d0d center/cover no-repeat !important; color: rgba(245,184,0,.5) !important; }
/* Quantity stepper in cart: number was invisible */
.cart-qty, .qty-stepper, .cart-item-qty { background: #0d0d0d !important; border: 1.5px solid rgba(245,184,0,.5) !important; border-radius: 10px !important; color: #fff !important; }
.cart-qty button, .qty-stepper button, .cart-item-qty button { background: #1a1a1a !important; color: var(--gold) !important; border: 1px solid rgba(245,184,0,.35) !important; }
.cart-qty button:hover, .qty-stepper button:hover, .cart-item-qty button:hover { background: var(--gold) !important; color: #1a1a1a !important; }
.cart-qty b, .cart-qty span, .cart-qty input, .qty-stepper b, .qty-stepper span, .qty-stepper input,
.cart-item-qty b, .cart-item-qty span, .cart-item-qty input { color: #fff !important; background: transparent !important; font-weight: 800 !important; }
.cart-remove, .cart-item-remove { color: #ff8a80 !important; }
/* Order summary */
.cart-summary { background: #000 !important; border: 2px solid rgba(245,184,0,.45) !important; color: #fff !important; }
.cart-summary h3, .cart-summary h4 { color: #fff !important; }
.cart-summary .sum-row, .cart-summary .sum-row span { color: rgba(255,255,255,.85) !important; }
.cart-summary .sum-row.total, .cart-summary .sum-row.total span, #sumTotal { color: #fff !important; font-weight: 800 !important; }
#sumTotal { color: var(--gold) !important; }
.cart-summary .btn-gold, .cart-summary .btn-primary { background: var(--gold) !important; color: #1a1a1a !important; }
.cart-empty, .cart-empty h3, .cart-empty p { color: #fff !important; }

/* ── CHECKOUT PAGE ── */
.checkout-layout, .checkout-form, .co-form, .checkout-section { color: #fff !important; }
.checkout-layout label, .checkout-form label, .co-form label { color: #fff !important; font-weight: 600 !important; }
.checkout-layout h1, .checkout-layout h2, .checkout-layout h3, .checkout-layout h4,
.checkout-form h2, .checkout-form h3, .co-form h2, .co-form h3 { color: #fff !important; }
.checkout-layout p, .checkout-form p, .co-form p, .checkout-layout small, .co-form small { color: rgba(255,255,255,.8) !important; }
.checkout-layout input, .checkout-layout select, .checkout-layout textarea,
.checkout-form input, .checkout-form select, .checkout-form textarea,
.co-form input, .co-form select, .co-form textarea {
  background: rgba(255,255,255,.06) !important; color: #fff !important;
  border: 1px solid rgba(245,184,0,.3) !important; border-radius: 8px !important;
}
.checkout-layout input::placeholder, .co-form input::placeholder, .checkout-form input::placeholder { color: rgba(255,255,255,.45) !important; }
.checkout-layout select option, .co-form select option { background: #1a1a1a !important; color: #fff !important; }
/* Delivery / pickup options + payment options */
.ship-opt, .pay-opt, .delivery-opt, .pickup-opt {
  background: #000 !important; border: 1.5px solid rgba(245,184,0,.3) !important; color: #fff !important; border-radius: 10px !important;
}
.ship-opt.sel, .pay-opt.sel, .delivery-opt.sel, .pickup-opt.sel { border-color: var(--gold) !important; background: rgba(245,184,0,.08) !important; }
.ship-opt b, .pay-opt b, .delivery-opt b, .pickup-opt b, .ship-opt span, .pay-opt span, .delivery-opt span, .pickup-opt span { color: #fff !important; }
.ship-opt small, .pay-opt small, .delivery-opt small, .pickup-opt small { color: rgba(255,255,255,.7) !important; }
/* Bank details box */
#bankBox, .bank-box { background: #0d0d0d !important; border: 1.5px solid rgba(245,184,0,.35) !important; color: #fff !important; }
#bankBox *, .bank-box * { color: #fff !important; }
#bankBox b, .bank-box b { color: var(--gold) !important; }
/* Checkout order summary + totals */
.co-summary, .checkout-summary, #coSummary { background: #000 !important; border: 2px solid rgba(245,184,0,.45) !important; color: #fff !important; }
.co-summary *, .checkout-summary *, #coSummary * { color: #fff !important; }
.co-summary .total, .checkout-summary .total, #coTotal, .co-total, .sum-row.total span:last-child { color: var(--gold) !important; font-weight: 800 !important; }
/* Place Order + any secondary button under the form */
#coBtn, .checkout-layout .btn-gold, .checkout-layout .btn-primary { background: var(--gold) !important; color: #1a1a1a !important; border: 0 !important; }
.checkout-layout .btn-outline, .checkout-layout .btn-secondary, .checkout-layout .btn-ghost {
  background: transparent !important; border: 1.5px solid var(--gold) !important; color: var(--gold) !important;
}
.checkout-layout .btn:disabled { opacity: .6 !important; }
/* Generic: any dark-on-dark leftover text inside these three pages */
body.page-cart *, body.page-checkout *, body.page-product * { --ink: #fff; }

/* v4.27 — global add-to-cart toast (main.js rrToast) */
.rr-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#0b7a1c;color:#fff;padding:.85rem 1.4rem;border-radius:999px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:2147483000;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;font-size:.95rem;display:flex;gap:.6rem;align-items:center;max-width:92vw;line-height:1.3}
.rr-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.rr-toast.err{background:#b71c1c}
.rr-toast a{color:#F5B800;text-decoration:underline;font-weight:800;white-space:nowrap}
@media (max-width:600px){.rr-toast{bottom:84px;font-size:.9rem;padding:.75rem 1.1rem}}

/* v4.27 — Cart + Checkout hero backgrounds (Ezy Image Manager slots 64/65) */
#cart-hero{background:linear-gradient(rgba(15,15,15,.9),rgba(15,15,15,.9)),url('/images/64-bg-cart.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#checkout-hero{background:linear-gradient(rgba(15,15,15,.9),rgba(15,15,15,.9)),url('/images/65-bg-checkout.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#cart-hero h1,#checkout-hero h1{color:#fff !important}
#cart-hero p,#checkout-hero p{color:rgba(255,255,255,.85) !important}

/* v4.27b — cart qty-controls (the real class) + checkout ship-opt/summary text */
.cart-item .qty-controls{display:inline-flex;align-items:center;gap:.5rem;background:#0d0d0d !important;border:1.5px solid rgba(245,184,0,.5) !important;border-radius:10px;padding:.2rem .4rem}
.cart-item .qty-controls button{background:#1a1a1a !important;color:var(--gold) !important;border:1px solid rgba(245,184,0,.35) !important;width:30px;height:30px;border-radius:50%;font-weight:800;cursor:pointer}
.cart-item .qty-controls button:hover{background:var(--gold) !important;color:#1a1a1a !important}
.cart-item .qty-controls b{color:#fff !important;min-width:22px;text-align:center;font-weight:800 !important}
.cart-item .cart-item-price{color:var(--gold) !important;font-weight:800}
/* checkout: the shipping/pickup option rows + summary rows */
.co-form .ship-opt, .co-form label.ship-opt, [class*="ship-opt"]{background:#000 !important;border:1.5px solid rgba(245,184,0,.3) !important;color:#fff !important}
[class*="ship-opt"].sel{border-color:var(--gold) !important;background:rgba(245,184,0,.08) !important}
[class*="ship-opt"] b,[class*="ship-opt"] span{color:#fff !important}
[class*="ship-opt"] small{color:rgba(255,255,255,.7) !important}
.co-summary .sum-row span{color:rgba(255,255,255,.85) !important}
.co-summary .sum-row.total span{color:#fff !important;font-weight:800}
#coTotal{color:var(--gold) !important}

/* v4.28 — Free Solar Assessment page: header image slot + no grey around the form */
#solar-quote-hero{background:linear-gradient(rgba(15,15,15,.82),rgba(15,15,15,.88)),url('/images/66-bg-solar-quote.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#solar-quote-hero h1,#solar-quote-hero .eyebrow{color:#fff !important}
#solar-quote-hero .eyebrow{color:var(--gold) !important}
#solar-quote-hero p{color:rgba(255,255,255,.85) !important}
/* the section wrapping the wizard: same colour as the form (pure black) so no grey band */
#solar-quote-form{background:#000 !important}
#solar-quote-form .form-wrap{background:#000 !important;box-shadow:none !important;border:2px solid rgba(245,184,0,.4) !important}
#ac-quote-form,#irrigation-quote-form{background:#000 !important}
#ac-quote-form .form-wrap,#irrigation-quote-form .form-wrap{background:#000 !important;box-shadow:none !important}

/* v4.29 — Services page: hero-image feature panels for the 3 install sections
   (reuse the Solar / Irrigation / AC hero images so they stay in sync via Image Manager) */
.svc-feature{margin:0 0 2rem;border-radius:16px;overflow:hidden;border:2px solid rgba(245,184,0,.4);background:#000;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.svc-feature-img{width:100%;aspect-ratio:21/9;background:#0d0d0d center/cover no-repeat;display:block}
.svc-feature figcaption{padding:.9rem 1.25rem;color:rgba(255,255,255,.85);font-size:.95rem;border-top:1px solid rgba(245,184,0,.2);background:#000}
@media (max-width:700px){.svc-feature-img{aspect-ratio:16/10}.svc-feature figcaption{font-size:.9rem;padding:.8rem 1rem}}

/* ═══════════════════════════════════════════════════════════════
 * v4.30 — MINI-CART SLIDE-OUT DRAWER (modern add-to-cart feedback)
 * ═══════════════════════════════════════════════════════════════ */
.mini-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:99990}
.mini-cart-overlay.open{opacity:1;pointer-events:auto}
.mini-cart{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);background:#0d0d0d;color:#fff;border-left:2px solid rgba(245,184,0,.45);box-shadow:-16px 0 48px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:99991;display:flex;flex-direction:column}
.mini-cart.open{transform:translateX(0)}
body.mini-cart-open{overflow:hidden}
.mini-cart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);background:#000}
.mini-cart-added{color:#4ade80;font-weight:800;font-size:.95rem;letter-spacing:.02em}
.mini-cart-added-name{color:rgba(255,255,255,.85);font-size:.9rem;margin-top:.2rem;line-height:1.3}
.mini-cart-close{background:rgba(255,255,255,.08);color:#fff;border:0;width:38px;height:38px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;flex:none}
.mini-cart-close:hover{background:var(--gold);color:#1a1a1a}
.mini-cart-items{flex:1;overflow-y:auto;padding:.75rem 1.25rem}
.mc-item{display:grid;grid-template-columns:64px 1fr;gap:.8rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mc-item.just-added{background:rgba(74,222,128,.06);margin:0 -.75rem;padding:.75rem;border-radius:10px;border-bottom:0}
.mc-item-img{width:64px;height:64px;border-radius:10px;background:#1a1a1a center/cover no-repeat;display:grid;place-items:center;font-size:1.6rem;color:rgba(245,184,0,.5);border:1px solid rgba(245,184,0,.2)}
.mc-item-name{color:#fff;font-weight:700;font-size:.92rem;line-height:1.3}
.mc-item-meta{display:flex;justify-content:space-between;margin-top:.35rem;font-size:.85rem}
.mc-item-qty{color:rgba(255,255,255,.65)}
.mc-item-price{color:var(--gold);font-weight:800}
.mini-cart-empty{padding:2rem 1.25rem;color:rgba(255,255,255,.6);text-align:center}
.mini-cart-foot{padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);background:#000;display:grid;gap:.6rem}
.mini-cart-sub{display:flex;justify-content:space-between;align-items:center;font-size:1rem;margin-bottom:.25rem}
.mini-cart-sub span{color:rgba(255,255,255,.75)}
.mini-cart-sub b{color:var(--gold);font-size:1.15rem}
.mini-cart-btn{width:100%;text-align:center;padding:.8rem 1rem;border-radius:10px;font-weight:700}
.mini-cart .btn-gold{background:var(--gold) !important;color:#1a1a1a !important;border:0 !important}
.mini-cart .btn-outline{background:transparent !important;border:1.5px solid var(--gold) !important;color:var(--gold) !important}
.mini-cart-continue{background:none;border:0;color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.9rem;padding:.4rem}
.mini-cart-continue:hover{color:#fff}

/* Knutsford office dropdown on checkout */
.ship-opt-knutsford span{display:block}
.knutsford-select{display:block;width:100%;margin-top:.6rem;background:#000;color:#fff;border:1.5px solid rgba(245,184,0,.5);border-radius:10px;padding:.7rem .9rem;font-size:.95rem}
.knutsford-select optgroup{color:var(--gold);font-weight:800;background:#0d0d0d}
.knutsford-select option{color:#fff;background:#0d0d0d;font-weight:400}

/* ═══════════════════════════════════════════════════════════════
 * v4.31 — Marketplace search + filter toolbar
 * ═══════════════════════════════════════════════════════════════ */
.shop-tools{display:grid;gap:.9rem;margin-bottom:1.5rem}
.shop-search{position:relative;display:flex;align-items:center;background:#000;border:2px solid rgba(245,184,0,.5);border-radius:14px;padding:0 .9rem;transition:border-color .2s,box-shadow .2s}
.shop-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,184,0,.15)}
.shop-search svg{width:20px;height:20px;color:var(--gold);flex:none}
.shop-search input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:1rem;padding:.95rem .75rem;min-width:0}
.shop-search input::placeholder{color:rgba(255,255,255,.45)}
.shop-search input::-webkit-search-cancel-button{display:none}
.shop-search-clear{background:rgba(255,255,255,.1);color:#fff;border:0;width:28px;height:28px;border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer}
.shop-search-clear:hover{background:var(--gold);color:#1a1a1a}
.shop-filters{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:end}
.shop-filter{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9aa0a6;min-width:150px;flex:1 1 150px}
.shop-filter select{appearance:none;-webkit-appearance:none;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23F5B800'/%3E%3C/svg%3E") no-repeat right .9rem center;color:#fff;border:1.5px solid rgba(245,184,0,.45);border-radius:10px;padding:.65rem 2.2rem .65rem .9rem;font:600 .92rem/1.2 inherit;letter-spacing:0;text-transform:none;cursor:pointer}
.shop-filter select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,184,0,.15)}
.shop-filter select option{background:#0d0d0d;color:#fff}
.shop-filter-check{flex-direction:row;align-items:center;gap:.5rem;flex:0 0 auto;min-width:0;padding:.65rem .9rem;background:#000;border:1.5px solid rgba(245,184,0,.45);border-radius:10px;cursor:pointer;color:#fff;letter-spacing:.02em;text-transform:none;font-size:.9rem;font-weight:600}
.shop-filter-check input{accent-color:var(--gold);width:16px;height:16px;margin:0}
.shop-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;min-height:28px}
.shop-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.shop-chip{background:rgba(245,184,0,.12);color:#fff;border:1px solid rgba(245,184,0,.45);border-radius:999px;padding:.35rem .75rem;font-size:.82rem;font-weight:600;cursor:pointer;display:inline-flex;gap:.4rem;align-items:center}
.shop-chip span{color:var(--gold);font-weight:800}
.shop-chip:hover{background:rgba(245,184,0,.22)}
.shop-chip-clearall{background:transparent;border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75)}
.shop-results{color:#9aa0a6;font-size:.9rem;margin-left:auto}
@media (max-width:700px){
  .shop-filter{min-width:calc(50% - .45rem);flex-basis:calc(50% - .45rem)}
  .shop-filter-check{flex-basis:calc(50% - .45rem);justify-content:center}
  .shop-status{flex-direction:column;align-items:flex-start}
  .shop-results{margin-left:0}
}

/* v4.32 — Marketplace hero image (Image Manager slot 07-marketplace-hero.jpg) */
#marketplace-hero{background:linear-gradient(rgba(15,15,15,.78),rgba(15,15,15,.86)),url('/images/07-marketplace-hero.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#marketplace-hero h1{color:#fff !important}#marketplace-hero .eyebrow{color:var(--gold) !important}#marketplace-hero p{color:rgba(255,255,255,.85) !important}

/* v4.32 — Knutsford office picker (modern) + confirmation pickup line */
.kx-picker{margin:.25rem 0 1rem;background:#000;border:1.5px solid rgba(245,184,0,.45);border-radius:14px;overflow:hidden}
.kx-search{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);background:#0d0d0d}
.kx-search svg{width:18px;height:18px;color:var(--gold);flex:none}
.kx-search input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:.95rem;min-width:0}
.kx-search input::placeholder{color:rgba(255,255,255,.45)}
.kx-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.kx-list{max-height:280px;overflow-y:auto;padding:.4rem;scrollbar-width:thin;scrollbar-color:rgba(245,184,0,.5) transparent}
.kx-parish{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:.6rem .6rem .3rem}
.kx-office{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;text-align:left;background:transparent;border:1.5px solid transparent;border-radius:10px;padding:.6rem .75rem;color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.kx-office:hover{background:rgba(245,184,0,.08);border-color:rgba(245,184,0,.3)}
.kx-office.sel{background:rgba(245,184,0,.14);border-color:var(--gold)}
.kx-office.sel .kx-office-name::before{content:'✓ ';color:var(--gold)}
.kx-office-name{font-weight:700;font-size:.95rem}
.kx-office-addr{font-size:.8rem;color:rgba(255,255,255,.6)}
.kx-none{padding:1rem;color:rgba(255,255,255,.6);text-align:center;font-size:.9rem}
.kx-chosen{padding:.75rem .9rem;background:rgba(74,222,128,.1);border-top:1px solid rgba(74,222,128,.3);color:#4ade80;font-size:.9rem}
.kx-chosen b{color:#fff}
.oc-ship{margin:1rem auto 0;max-width:520px;background:#000;border:1.5px solid rgba(245,184,0,.45);border-radius:12px;padding:.9rem 1.1rem;color:#fff;text-align:left;line-height:1.5}
.oc-ship small{color:rgba(255,255,255,.7)}

/* v4.33 — Marketplace: white search bar + true-colour product images */
.shop-search{background:#fff !important;border:2px solid var(--gold) !important}
.shop-search:focus-within{box-shadow:0 0 0 4px rgba(245,184,0,.25) !important}
.shop-search svg{color:#1a1a1a !important}
.shop-search input{color:#111 !important;font-weight:600}
.shop-search input::placeholder{color:#777 !important;font-weight:400}
.shop-search-clear{background:#eee !important;color:#111 !important}
.shop-search-clear:hover{background:var(--gold) !important}
/* product photos: no blend/overlay/dimming anywhere in the grid */
#shopGrid .product-image, #shopGrid .product-image-link{position:relative}
#shopGrid .product-image::before, #shopGrid .product-image::after, #shopGrid .product-image-link::before, #shopGrid .product-image-link::after{content:none !important;display:none !important}
#shopGrid .product-image img{mix-blend-mode:normal !important;filter:none !important;opacity:1 !important}
#shopGrid .product-image{background:#fff !important}
/* v4.33b — white plate only behind REAL photos; placeholder stays dark */
#shopGrid .product-image:has(.product-image-ph){background:#0d0d0d !important}
#shopGrid .product-image-ph{color:rgba(245,184,0,.45) !important}

/* ═══════════════════════════════════════════════════════════════
 * v4.34 — BUTTON STANDARD: every call-to-action is solid gold + black text.
 *   No transparent / yellow-border buttons anywhere (except the quiet
 *   secondary "View cart" in the mini-cart and the wizard "Back").
 * ═══════════════════════════════════════════════════════════════ */
.btn-gold, .btn-primary,
.btn-outline:not(.mini-cart-btn):not(.wizard-back),
.btn-white, .btn-ghost, .btn-secondary,
.hero .btn, .home-hero-btns .btn, .cta-banner .btn, .package-card .btn, .division-card .btn,
.service-card .btn, .care-plan-card .btn, .division-4-card .btn, .btn-group .btn:not(.mini-cart-btn):not(.wizard-back) {
  background: var(--gold) !important;
  background-image: none !important;
  color: #1a1a1a !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 6px 18px rgba(245,184,0,.25) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.btn-gold:hover, .btn-primary:hover,
.btn-outline:not(.mini-cart-btn):not(.wizard-back):hover,
.btn-white:hover, .btn-ghost:hover, .btn-secondary:hover,
.hero .btn:hover, .home-hero-btns .btn:hover, .cta-banner .btn:hover, .package-card .btn:hover,
.btn-group .btn:not(.mini-cart-btn):not(.wizard-back):hover {
  background: #E5AA00 !important;
  border-color: #E5AA00 !important;
  color: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245,184,0,.35) !important;
}
/* icons inside gold buttons should be dark too */
.btn-gold svg, .btn-primary svg, .btn-group .btn svg { color: #1a1a1a !important; stroke: #1a1a1a !important; fill: currentColor; }
/* the two quiet secondaries stay as-is */
.mini-cart-btn.btn-outline { background: transparent !important; border: 1.5px solid var(--gold) !important; color: var(--gold) !important; box-shadow: none !important; }
.wizard-back { background: transparent !important; border: 1.5px solid rgba(255,255,255,.35) !important; color: #fff !important; box-shadow: none !important; }

/* v4.34b — catch page-specific overrides that still render as outline/transparent.
   Rule: any CTA with no solid background → gold+black. Deliberately-coloured solid
   buttons (green Platinum, green WhatsApp) keep their colour but must be solid. */
a.btn:not(.mini-cart-btn):not(.wizard-back):not(.btn-whatsapp):not(.btn-green):not(.care-plan-card.platinum .btn),
button.btn:not(.mini-cart-btn):not(.wizard-back):not(.btn-whatsapp):not(.btn-green) {
  background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important;
}
/* AC / irrigation "WhatsApp About This", "WhatsApp Order", "Get Recommendation", contact buttons */
.ac-tier .btn, .tier-card .btn, .product-tier .btn, .irrigation-card .btn, .contact-card .btn, .contact-info .btn,
#care-plans .care-plan-card:not(.platinum) .btn, .about-page .btn, [class*="tier-color"] .btn {
  background: var(--gold) !important; color: #1a1a1a !important; border: 2px solid var(--gold) !important;
}
/* keep the green Platinum plan button (client request) — solid green, white text */
#care-plans .care-plan-card.platinum .btn { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
/* WhatsApp-branded buttons: solid WhatsApp green, white text (still no outline) */
.btn-whatsapp, a.btn[href*="whatsapp"], a.btn[href*="wa.me"] { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }
.btn-whatsapp svg, a.btn[href*="whatsapp"] svg { color: #fff !important; stroke: #fff !important; }

/* v4.35 — WhatsApp bubble always visible (no reveal delay) + Deals/Contact hero slots */
.wa-float{opacity:1 !important;visibility:visible !important;transform:none !important;transition:none !important;pointer-events:auto !important}
.wa-float:not(.wa-revealed){opacity:1 !important;visibility:visible !important;transform:none !important}
#deals-hero{background:linear-gradient(rgba(15,15,15,.8),rgba(15,15,15,.88)),url('/images/67-bg-deals-hero.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#contact-hero{background:linear-gradient(rgba(15,15,15,.8),rgba(15,15,15,.88)),url('/images/68-bg-contact-hero.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#deals-hero h1,#contact-hero h1{color:#fff !important}#deals-hero .eyebrow,#contact-hero .eyebrow{color:var(--gold) !important}#deals-hero p,#contact-hero p{color:rgba(255,255,255,.85) !important}

/* v4.36 — Marketplace card buttons: side-by-side with a gap; never touching */
#shopGrid .product-actions{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;gap:10px !important;margin-top:auto !important;padding-top:.75rem !important;align-items:stretch !important}
#shopGrid .product-actions .btn{flex:1 1 calc(50% - 5px) !important;min-width:120px !important;margin:0 !important;text-align:center !important;padding:.7rem .6rem !important;font-size:.85rem !important;white-space:nowrap !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:.4rem !important;border-radius:10px !important}
#shopGrid .product-actions .btn svg{width:16px;height:16px;flex:none}
/* On 1-column phone cards there's room for both — keep them on one row */
@media (max-width:600px){
  #shopGrid .product-actions .btn{flex:1 1 calc(50% - 5px) !important;min-width:0 !important;font-size:.84rem !important;padding:.7rem .4rem !important}
}
/* On very narrow 2-column layouts, stack with the gap preserved */
@media (max-width:380px){
  #shopGrid .product-actions .btn{flex:1 1 100% !important}
}

/* ═══════════════════════════════════════════════════════════════
 * v4.37
 *  - WhatsApp buttons: SAME gold pill + black text as every other button;
 *    only the WhatsApp ICON is WhatsApp-green (#25D366). Overrides v4.34b.
 *  - Free Solar Assessment form: no border around the form wrapper
 * ═══════════════════════════════════════════════════════════════ */
a.btn[href*="whatsapp"], a.btn[href*="wa.me"], .btn-whatsapp {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #1a1a1a !important;
}
a.btn[href*="whatsapp"]:hover, a.btn[href*="wa.me"]:hover, .btn-whatsapp:hover { background: #E5AA00 !important; border-color: #E5AA00 !important; color: #1a1a1a !important; }
a.btn[href*="whatsapp"] svg, a.btn[href*="wa.me"] svg, .btn-whatsapp svg { color: #1a1a1a !important; fill: #1a1a1a !important; stroke: none !important; }
a.btn[href*="whatsapp"] svg path, a.btn[href*="wa.me"] svg path, .btn-whatsapp svg path { fill: #25D366 !important; }
/* the floating WhatsApp bubble stays WhatsApp-green with a white icon (brand) */
.wa-float { background: #25D366 !important; } .wa-float svg { color: #fff !important; fill: #fff !important; }
/* mobile dock WhatsApp tile: keep as designed */

/* Free Solar Assessment (and AC / Irrigation quote) forms: seamless, no border */
#solar-quote-form .form-wrap, #ac-quote-form .form-wrap, #irrigation-quote-form .form-wrap {
  border: 0 !important; box-shadow: none !important; background: #000 !important; border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v4.38 — Home featured packages + Care plans + quote heroes
 * ═══════════════════════════════════════════════════════════════ */

/* HOME — all package-preview pills: clear background, white border, white text (uniform) */
#featured-solar .package-preview-tag,
#featured-solar .package-preview.tier-entry .package-preview-tag,
#featured-solar .package-preview.tier-popular .package-preview-tag,
#featured-solar .package-preview.tier-business .package-preview-tag {
  background: transparent !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.85) !important; border-radius: 999px !important;
  font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  padding: .3rem .8rem !important; display: inline-block !important;
}
/* HOME PowerElite: "View Details" white (not green) */
#featured-solar .package-preview.tier-popular .package-preview-cta,
#featured-solar .package-preview.featured .package-preview-cta { color: #fff !important; }
/* HOME PowerElite: same green "MOST POPULAR" ribbon as the Solar Solutions page */
#featured-solar .package-preview.tier-popular { position: relative !important; overflow: visible !important; }
#featured-solar .package-preview.tier-popular::before {
  content: 'MOST POPULAR'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--green) !important; color: #fff !important; padding: 5px 16px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(8,117,16,.45); z-index: 2;
}
#featured-solar .package-preview-grid { padding-top: 16px; }

/* SOLAR CARE PLANS — Platinum card */
/* top ribbon "PREMIUM": centered at the top edge (was top-right corner) */
#care-plans .care-plan-card.platinum::before,
body #care-plans .care-plan-card.platinum::before {
  left: 50% !important; right: auto !important; top: -14px !important; transform: translateX(-50%) !important;
  border-radius: 999px !important; padding: 5px 16px !important;
  background: var(--green) !important; color: #fff !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .08em !important;
}
#care-plans .care-plan-card.platinum { overflow: visible !important; }
/* inside pill "Premium": clear background, green text + green border (no solid green fill) */
#care-plans .care-plan-card.platinum .care-plan-badge,
body #care-plans .care-plan-card.platinum .care-plan-badge {
  background: transparent !important; background-color: transparent !important;
  color: var(--green) !important; border: 1.5px solid var(--green) !important;
  font-weight: 800 !important;
}

/* QUOTE PAGE HEROES — Image Manager slots 66 (Solar), 69 (AC), 70 (Irrigation) */
#ac-quote-hero{background:linear-gradient(rgba(15,15,15,.82),rgba(15,15,15,.88)),url('/images/69-bg-ac-quote.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#irrigation-quote-hero{background:linear-gradient(rgba(15,15,15,.82),rgba(15,15,15,.88)),url('/images/70-bg-irrigation-quote.jpg') center/cover no-repeat !important;background-color:#0f0f0f !important}
#ac-quote-hero h1,#irrigation-quote-hero h1{color:#fff !important}#ac-quote-hero .eyebrow,#irrigation-quote-hero .eyebrow{color:var(--gold) !important}

/* ═══════════════════════════════════════════════════════════════
 * v4.39 — Irrigation page polish + sitewide CTA legibility
 * ═══════════════════════════════════════════════════════════════ */

/* Drip hose cards: "FREE Connector Kit Included" = solid pill matching each card's colour */
#drip-12mm .free-badge{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important;font-weight:800 !important}
#drip-12mm .free-badge svg{color:#fff !important;stroke:#fff !important}
#drip-16mm .free-badge{background:var(--gold) !important;border-color:var(--gold) !important;color:#1a1a1a !important;font-weight:800 !important}
#drip-16mm .free-badge svg{color:#1a1a1a !important;stroke:#1a1a1a !important}

/* Backbone of Your System + all CTA cards: buttons are gold w/ BLACK text (never white) */
.info-block .btn, .info-block .btn-primary, .info-block .btn-gold, .info-block .btn-sm,
.tier-card .btn, .product-tier .btn, .care-plan-card .btn:not(.platinum .btn), .package-card .btn, .division-card .btn {
  background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important;
}
/* WhatsApp buttons everywhere: gold pill, BLACK text, GREEN icon — legible on every card colour */
a.btn[href*="whatsapp"], a.btn[href*="wa.me"], .btn-whatsapp { background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important; }
a.btn[href*="whatsapp"] *, a.btn[href*="wa.me"] * { color: #1a1a1a !important; }
a.btn[href*="whatsapp"] svg, a.btn[href*="wa.me"] svg, a.btn[href*="whatsapp"] svg path, a.btn[href*="wa.me"] svg path { color: #1a1a1a !important; fill: #1a1a1a !important; }

/* Fittings: combined stock card + kit card */
.fittings-grid .info-block{display:flex;flex-direction:column}
.fit-sub{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:.25rem 0 .5rem}
.fit-types{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .75rem}
.fit-types li{position:relative;padding-left:1.4rem;color:#fff}
.fit-types li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:800}
.kit-card{text-align:center;align-items:center;justify-content:center;border-color:var(--gold) !important}
.kit-card .fit-types{grid-template-columns:1fr;text-align:left;display:inline-grid}
.kit-icon{width:64px;height:64px;border-radius:50%;background:rgba(245,184,0,.15);border:2px solid var(--gold);display:grid;place-items:center;margin:0 auto 1rem;color:var(--gold)}
.kit-icon svg{width:30px;height:30px}
.kit-btn{background:var(--gold) !important;color:#1a1a1a !important;border-color:var(--gold) !important;font-weight:800 !important;margin-top:auto}
@media (max-width:760px){.fittings-grid{grid-template-columns:1fr !important}.fit-types{grid-template-columns:1fr}}

/* v4.39b — ROOT FIX: --ink is white on this dark theme, so any "color:var(--ink)" button rule
   rendered WHITE text on gold. Pin all gold-button text to literal near-black. */
.btn, a.btn, button.btn, .btn-primary, .btn-gold, .btn-sm, .btn-lg,
[class*="tier-color"] .btn, [class*="tier-color"] .btn-primary, .tier-color-gold .btn-primary,
.info-block .btn, .info-block .btn-primary, .info-block .btn-gold,
.section-header .btn, .cta-banner .btn, .text-center .btn {
  color: #1a1a1a !important;
}
.btn:not(.mini-cart-btn):not(.wizard-back):not(.care-plan-card.platinum .btn):not([class*="platinum"] .btn) {
  background: var(--gold) !important; border-color: var(--gold) !important;
}
/* keep the two deliberate exceptions */
#care-plans .care-plan-card.platinum .btn { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.mini-cart-btn.btn-outline { background: transparent !important; color: var(--gold) !important; }
.wizard-back { background: transparent !important; color: #fff !important; }
/* WhatsApp icon stays green even under the black-text rule */
a.btn[href*="whatsapp"] svg, a.btn[href*="whatsapp"] svg path, a.btn[href*="wa.me"] svg, a.btn[href*="wa.me"] svg path { color: #1a1a1a !important; fill: #1a1a1a !important; }

/* Drip cards: SOLID kit pills (beat the tinted .free-badge rule) */
#drip-12mm .free-badge, #drip-12mm div.free-badge { background: var(--green) !important; background-color: var(--green) !important; border: 1.5px solid var(--green) !important; color: #fff !important; }
#drip-12mm .free-badge svg { color: #fff !important; stroke: #fff !important; }
#drip-16mm .free-badge, #drip-16mm div.free-badge { background: var(--gold) !important; background-color: var(--gold) !important; border: 1.5px solid var(--gold) !important; color: #1a1a1a !important; }
#drip-16mm .free-badge svg { color: #1a1a1a !important; stroke: #1a1a1a !important; }

/* v4.39c — buttons inside every id-scoped 'all-white text' card rule: black text on gold (WA icon green) */
#ac-range .grid-3 > .ac-tier .btn:not(.mini-cart-btn):not(.wizard-back),
#ac-range .grid-3 > .ac-tier a.btn:not(.mini-cart-btn):not(.wizard-back),
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn:not(.mini-cart-btn):not(.wizard-back),
#ac-range .grid-3 > .ac-tier:nth-child(2) a.btn:not(.mini-cart-btn):not(.wizard-back),
#bankBox .btn:not(.mini-cart-btn):not(.wizard-back),
#bankBox a.btn:not(.mini-cart-btn):not(.wizard-back),
#coSummary .btn:not(.mini-cart-btn):not(.wizard-back),
#coSummary a.btn:not(.mini-cart-btn):not(.wizard-back),
#contact-cards-grid > *:nth-child(1) .btn:not(.mini-cart-btn):not(.wizard-back),
#contact-cards-grid > *:nth-child(1) a.btn:not(.mini-cart-btn):not(.wizard-back),
#contact-cards-grid > *:nth-child(2) .btn:not(.mini-cart-btn):not(.wizard-back),
#contact-cards-grid > *:nth-child(2) a.btn:not(.mini-cart-btn):not(.wizard-back),
#contact-cards-grid > *:nth-child(3) .btn:not(.mini-cart-btn):not(.wizard-back),
#contact-cards-grid > *:nth-child(3) a.btn:not(.mini-cart-btn):not(.wizard-back),
#drip-hose .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back),
#drip-hose .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back),
#drip-tape .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back),
#drip-tape .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back),
#main-hose .info-block .btn:not(.mini-cart-btn):not(.wizard-back),
#main-hose .info-block a.btn:not(.mini-cart-btn):not(.wizard-back),
#mulch-film .info-block .btn:not(.mini-cart-btn):not(.wizard-back),
#mulch-film .info-block a.btn:not(.mini-cart-btn):not(.wizard-back),
#mulch-weed .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back),
#mulch-weed .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back),
#service-request .form-wrap .section-header .btn:not(.mini-cart-btn):not(.wizard-back),
#service-request .form-wrap .section-header a.btn:not(.mini-cart-btn):not(.wizard-back),
#weed-mat .info-block .btn:not(.mini-cart-btn):not(.wizard-back),
#weed-mat .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) {
  color: #1a1a1a !important; background: var(--gold) !important; border-color: var(--gold) !important;
}
#ac-range .grid-3 > .ac-tier .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier:nth-child(2) a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#bankBox .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#bankBox a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#coSummary .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#coSummary a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(1) .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(1) a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(2) .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(2) a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(3) .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(3) a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-hose .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-hose .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-tape .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-tape .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#main-hose .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#main-hose .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-film .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-film .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-weed .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-weed .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#service-request .form-wrap .section-header .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#service-request .form-wrap .section-header a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#weed-mat .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg,
#weed-mat .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#ac-range .grid-3 > .ac-tier a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#ac-range .grid-3 > .ac-tier:nth-child(2) a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#bankBox .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#bankBox a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#coSummary .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#coSummary a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(1) .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(1) a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(2) .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(2) a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(3) .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(3) a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-hose .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-hose .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-tape .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-tape .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#main-hose .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#main-hose .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-film .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-film .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-weed .grid-2 > .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-weed .grid-2 > .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#service-request .form-wrap .section-header .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#service-request .form-wrap .section-header a.btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#weed-mat .info-block .btn:not(.mini-cart-btn):not(.wizard-back) svg path,
#weed-mat .info-block a.btn:not(.mini-cart-btn):not(.wizard-back) svg path {
  color: #1a1a1a !important; fill: #1a1a1a !important;
}
#ac-range .grid-3 > .ac-tier .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier:nth-child(2) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#bankBox .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#bankBox a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#coSummary .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#coSummary a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(1) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(1) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(2) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(2) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(3) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#contact-cards-grid > *:nth-child(3) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-hose .grid-2 > .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-hose .grid-2 > .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-tape .grid-2 > .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#drip-tape .grid-2 > .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#main-hose .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#main-hose .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-film .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-film .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-weed .grid-2 > .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#mulch-weed .grid-2 > .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#service-request .form-wrap .section-header .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#service-request .form-wrap .section-header a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#weed-mat .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#weed-mat .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg,
#ac-range .grid-3 > .ac-tier .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#ac-range .grid-3 > .ac-tier a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#ac-range .grid-3 > .ac-tier:nth-child(2) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#bankBox .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#bankBox a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#coSummary .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#coSummary a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(1) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(1) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(2) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(2) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(3) .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#contact-cards-grid > *:nth-child(3) a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-hose .grid-2 > .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-hose .grid-2 > .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-tape .grid-2 > .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#drip-tape .grid-2 > .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#main-hose .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#main-hose .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-film .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-film .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-weed .grid-2 > .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#mulch-weed .grid-2 > .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#service-request .form-wrap .section-header .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#service-request .form-wrap .section-header a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#weed-mat .info-block .btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path,
#weed-mat .info-block a.btn[href*="whatsapp"]:not(.mini-cart-btn):not(.wizard-back) svg path {
  color: #1a1a1a !important; fill: #1a1a1a !important;
}
#care-plans .care-plan-card.platinum .btn, #care-plans .care-plan-card.platinum a.btn { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }

/* v4.39d — beat the id+nth-child rules on the drip kit pills + the About marketplace card button */
#drip-hose .grid-2 > .info-block:nth-child(1) .free-badge, #drip-hose .grid-2 > #drip-12mm .free-badge { background: var(--green) !important; background-color: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
#drip-hose .grid-2 > .info-block:nth-child(1) .free-badge svg { color: #fff !important; stroke: #fff !important; }
#drip-hose .grid-2 > .info-block:nth-child(2) .free-badge, #drip-hose .grid-2 > #drip-16mm .free-badge { background: var(--gold) !important; background-color: var(--gold) !important; border-color: var(--gold) !important; color: #1a1a1a !important; }
#drip-hose .grid-2 > .info-block:nth-child(2) .free-badge svg { color: #1a1a1a !important; stroke: #1a1a1a !important; }
#wwo-grid > article .btn, #wwo-grid > article:nth-child(n) .btn, #wwo-grid > article:nth-child(n) a.btn, #wwo-grid > article:nth-child(n) .division-card-body .btn { background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important; }
#wwo-grid > article:nth-child(n) .btn[style] { color: #1a1a1a !important; }

/* v4.40 — AC page + Contact cards */
/* 18,000 BTU tier (2nd card) "Get Recommendation": gold, not black */
#ac-range .grid-3 > .ac-tier:nth-child(2) .btn, #ac-range .grid-3 > .ac-tier:nth-child(2) .btn-primary, #ac-range .ac-tier .btn {
  background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important;
}
/* Solar + AC section: eyebrow legible (white pill w/ dark text), heading centered */
#solar-ac-combo .solar-ac-eyebrow, #solar-ac-combo .eyebrow {
  display: inline-block; background: rgba(255,255,255,.12) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px; padding: .35rem .9rem;
  letter-spacing: .12em; font-weight: 800;
}
#solar-ac-combo .solar-ac-headline, #solar-ac-combo h2 { text-align: center !important; color: #fff !important; margin-left: auto; margin-right: auto; }
#solar-ac-combo .container-narrow { text-align: center !important; }
/* Contact cards: equal height, button pinned to the same baseline on all 3 */
#contact-cards-grid { align-items: stretch !important; }
#contact-cards-grid > * { display: flex !important; flex-direction: column !important; }
#contact-cards-grid > * .btn { margin-top: auto !important; align-self: center !important; background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important; }
#contact-cards-grid > *:nth-child(2) .btn { background: var(--gold) !important; color: #1a1a1a !important; }
#contact-cards-grid > * p:last-of-type { margin-bottom: 1rem; }

/* ═══════════════════════════════════════════════════════════════
 * v4.41 — WhatsApp icon BLACK inside gold buttons (sitewide) + AC combo cards
 * ═══════════════════════════════════════════════════════════════ */
a.btn[href*="whatsapp"] svg, a.btn[href*="wa.me"] svg, .btn-whatsapp svg,
a.btn[href*="whatsapp"] svg path, a.btn[href*="wa.me"] svg path, .btn-whatsapp svg path,
.btn svg[viewBox="0 0 24 24"][fill="currentColor"] { color: #1a1a1a !important; fill: #1a1a1a !important; }
/* (the floating bubble + mobile dock tile keep their green/white brand look) */
.wa-float svg, .mobile-action-bar .mab-item svg { fill: currentColor !important; }
.wa-float svg { color: #fff !important; fill: #fff !important; }

/* AC combo: two equal cards */
.ac-combo-grid { align-items: stretch; gap: 2rem; }
.ac-combo-card { display: flex; flex-direction: column; text-align: center; align-items: center; padding: 2rem 1.75rem !important; }
.ac-combo-card .eyebrow { display: inline-block; background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .35rem .9rem; letter-spacing: .12em; font-weight: 800; margin-bottom: .9rem; }
.ac-combo-card h2 { color: #fff !important; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .9rem; text-align: center; }
.ac-combo-card p { color: rgba(255,255,255,.85); line-height: 1.75; margin: 0 0 1.5rem; flex: 1; }
.ac-combo-card .btn { margin-top: auto; }
@media (max-width: 760px) { .ac-combo-grid { grid-template-columns: 1fr !important; } }
/* v4.41b — irrigation cards: WhatsApp icon black too (beats the id-scoped green rule) */
#drip-hose .grid-2 > .info-block a.btn svg, #drip-hose .grid-2 > .info-block a.btn svg path,
#drip-tape .grid-2 > .info-block a.btn svg, #drip-tape .grid-2 > .info-block a.btn svg path,
#main-hose .info-block a.btn svg, #main-hose .info-block a.btn svg path,
#mulch-weed .grid-2 > .info-block a.btn svg, #mulch-weed .grid-2 > .info-block a.btn svg path,
#mulch-film .info-block a.btn svg, #weed-mat .info-block a.btn svg,
#ac-range .grid-3 > .ac-tier a.btn svg, #ac-range .grid-3 > .ac-tier a.btn svg path,
[id] .info-block a.btn[href*="whatsapp"] svg, [id] .info-block a.btn[href*="whatsapp"] svg path,
[id] a.btn[href*="whatsapp"] svg path, [id] a.btn[href*="wa.me"] svg path { color: #1a1a1a !important; fill: #1a1a1a !important; }
.ac-combo-card h2, .ac-combo-card .solar-ac-headline { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: clamp(1.3rem, 2vw, 1.7rem) !important; line-height: 1.25 !important; }

/* v4.43 — Fittings section: kit card left-aligned (no centering), size chips black text */
.kit-card, .fittings-grid .kit-card { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
.kit-card h4 { text-align: left !important; }
.kit-card p { text-align: left !important; }
.kit-card .fit-types { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; text-align: left !important; margin: 0 0 1.25rem !important; }
.kit-card .fit-types li { text-align: left; }
.kit-card .kit-btn { align-self: flex-start !important; }
#fittings-stock .size-chip, .fittings-grid .size-chip, #fittings .size-chip { background: var(--gold) !important; color: #1a1a1a !important; border-color: var(--gold) !important; font-weight: 800 !important; }
/* v4.46 — AC combo card headings: wrap normally, never overflow the card */
.ac-combo-card .combo-headline{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;font-size:clamp(1.25rem,2vw,1.65rem) !important;line-height:1.25 !important;word-break:normal;overflow-wrap:break-word;max-width:100%;color:#fff !important;text-align:center;margin:0 0 .9rem}
.ac-combo-card{overflow:hidden}