/* ==========================================================================
   NRGPAL — Brand Kit v2 global styles
   Section B of the Week 1 build. Single source of truth for brand tokens.

   Source: NRGPAL-Brand-Kit-v2.pdf
     §2.1 Colour  §3 Typography  §4.3 Components

   OVERRIDE ON RECORD: Brand Kit §4.2 corner radius (pills 100px, cards 12px,
   inputs 8px, sections 16px, badges 100px) is DEPRECATED by Zak.
   Everything is square — radius 0 throughout. Do not reintroduce radius
   without a written decision.

   Loaded after divi-style and the child style.css so plain element and
   Divi-default rules are beaten on load order. Where Divi's customizer
   emits high-specificity rules we match its selector shape rather than
   reaching for !important, so per-module builder settings still win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  (§2.1)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --nrg-blue:            #1676BA;  /* links, secondary UI, inverter */
  --nrg-green:           #009341;  /* success, eco/rebate, battery */
  --nrg-orange:          #F7921A;  /* primary CTA only */

  /* Brand — interaction states (derived, not in the Brand Kit) */
  --nrg-blue-hover:      #12629A;
  --nrg-green-hover:     #007A36;
  --nrg-orange-hover:    #D97C0C;

  /* Accent — product families */
  --nrg-gold:            #F3BD36;  /* solar */
  --nrg-sky:             #23ACE6;  /* EV */
  --nrg-teal:            #00A79D;  /* air conditioning */
  --nrg-leaf:            #2AB762;
  --nrg-lime:            #8CC63C;  /* never a background */

  /* Ink */
  --nrg-ink:             #101613;
  --nrg-ink-2:           #5B6B78;
  --nrg-ink-muted:       #8A938E;

  /* Surface */
  --nrg-surface-page:    #F1F3F1;
  --nrg-surface-card:    #FFFFFF;
  --nrg-surface-subtle:  #EAF3DE;
  --nrg-border:          #E5E9EA;
  --nrg-rule:            #DCE3E2;

  /* Dark */
  --nrg-dark-1:          #0F1A20;
  --nrg-dark-2:          #101613;
  --nrg-dark-3:          #0A1712;  /* footer */
  --nrg-dark-text:       #8A97A0;
  --nrg-dark-rule:       #26332C;

  /* Rebate callout text (§4.3) */
  --nrg-rebate-text:     #3A6B1E;

  /* Secondary button border (§4.3) */
  --nrg-btn-secondary-border: #C7CDC9;

  /* Type */
  --nrg-font-display:    'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nrg-font-body:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Geometry — Zak's override */
  --nrg-radius:          0;

  /* Rhythm (§4.3) */
  --nrg-section-y:       80px;
  --nrg-section-y-mob:   48px;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY  (§3)
   `html` prefix lifts specificity just above Divi's customizer output
   (`body { ... }`, `h1 { ... }`) without resorting to !important.
   -------------------------------------------------------------------------- */
html body,
html input,
html textarea,
html select,
html button {
  font-family: var(--nrg-font-body);
}

html body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--nrg-ink);
  background-color: var(--nrg-surface-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html h1, html h2, html h3, html h4, html h5, html h6,
html .et_pb_module h1, html .et_pb_module h2,
html .et_pb_module h3, html .et_pb_module h4 {
  font-family: var(--nrg-font-display);
  color: var(--nrg-ink);
}

html h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

html h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

html h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

html h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

html h5 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

html h6 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

html p {
  font-size: 16px;
  line-height: 1.7;
}

html a {
  color: var(--nrg-blue);
  text-decoration: none;
  transition: color .15s ease;
}

html a:hover {
  color: var(--nrg-blue-hover);
}

html strong,
html b {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. TYPE UTILITIES  (§3)
   Apply via the Divi module "CSS Class" field.
   -------------------------------------------------------------------------- */
.nrg-body-lg,
.nrg-body-lg p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--nrg-ink-2);
}

.nrg-eyebrow,
.nrg-eyebrow p {
  font-family: var(--nrg-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--nrg-ink-2);
}

.nrg-caption,
.nrg-caption p {
  font-family: var(--nrg-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--nrg-ink-muted);
}

.nrg-stat,
.nrg-stat p {
  font-family: var(--nrg-font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--nrg-ink);
}

.nrg-muted,
.nrg-muted p { color: var(--nrg-ink-muted); }

.nrg-secondary-text,
.nrg-secondary-text p { color: var(--nrg-ink-2); }

/* --------------------------------------------------------------------------
   4. BUTTONS  (§4.3)
   Divi's customizer emits `body #page-container .et_pb_section .et_pb_button`,
   so that selector shape is matched here. Radius 0 per Zak's override.
   -------------------------------------------------------------------------- */
.et_pb_button,
body #page-container .et_pb_section .et_pb_button,
body #page-container .et_pb_section .et_pb_button:hover {
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
  padding: 14px 26px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--nrg-radius);
  text-transform: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Divi appends an arrow glyph on hover and shifts the padding to make room.
   The Brand Kit has no arrow, so the glyph and the padding shift are removed. */
.et_pb_button:after,
body #page-container .et_pb_section .et_pb_button:after {
  display: none;
  content: none;
}

/* Primary — orange, white text. Orange is CTA-only (§2.1). */
.et_pb_button,
body #page-container .et_pb_section .et_pb_button {
  background-color: var(--nrg-orange);
  border-color: var(--nrg-orange);
  color: #FFFFFF;
}

.et_pb_button:hover,
body #page-container .et_pb_section .et_pb_button:hover {
  background-color: var(--nrg-orange-hover);
  border-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}

/* Secondary — transparent, 1px #C7CDC9, ink text. */
.et_pb_button.nrg-btn-secondary,
body #page-container .et_pb_section .et_pb_button.nrg-btn-secondary {
  background-color: transparent;
  border-color: var(--nrg-btn-secondary-border);
  color: var(--nrg-ink);
}

.et_pb_button.nrg-btn-secondary:hover,
body #page-container .et_pb_section .et_pb_button.nrg-btn-secondary:hover {
  background-color: transparent;
  border-color: var(--nrg-ink);
  color: var(--nrg-ink);
}

/* Tertiary — white on dark sections. */
.et_pb_button.nrg-btn-tertiary,
body #page-container .et_pb_section .et_pb_button.nrg-btn-tertiary {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--nrg-ink);
}

.et_pb_button.nrg-btn-tertiary:hover,
body #page-container .et_pb_section .et_pb_button.nrg-btn-tertiary:hover {
  background-color: var(--nrg-surface-page);
  border-color: var(--nrg-surface-page);
  color: var(--nrg-ink);
}

/* --------------------------------------------------------------------------
   5. CARDS AND CALLOUTS  (§4.3)
   Cards carry NO shadow. Selected state is a 1.5px orange border.
   -------------------------------------------------------------------------- */
.nrg-card {
  background-color: var(--nrg-surface-card);
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  box-shadow: none;
  padding: 24px;
}

.nrg-card.is-selected,
.nrg-card--selected {
  border: 1.5px solid var(--nrg-orange);
}

.nrg-rebate-callout {
  background-color: var(--nrg-surface-subtle);
  color: var(--nrg-rebate-text);
  border-radius: var(--nrg-radius);
  padding: 16px 20px;
}

.nrg-rebate-callout p,
.nrg-rebate-callout li {
  color: var(--nrg-rebate-text);
}

.nrg-rebate-callout strong {
  color: var(--nrg-ink);
}

/* Divi blurbs used as cards pick this up via the CSS Class field. */
.nrg-card .et_pb_blurb_content,
.nrg-card .et_pb_module { box-shadow: none; }

/* --------------------------------------------------------------------------
   6. SURFACES AND RULES
   -------------------------------------------------------------------------- */
.nrg-surface-page   { background-color: var(--nrg-surface-page); }
.nrg-surface-subtle { background-color: var(--nrg-surface-subtle); }
.nrg-surface-card   { background-color: var(--nrg-surface-card); }

.nrg-dark,
.nrg-dark-1 { background-color: var(--nrg-dark-1); color: var(--nrg-dark-text); }
.nrg-dark-2 { background-color: var(--nrg-dark-2); color: var(--nrg-dark-text); }
.nrg-dark-3 { background-color: var(--nrg-dark-3); color: var(--nrg-dark-text); }

.nrg-dark h1, .nrg-dark h2, .nrg-dark h3, .nrg-dark h4,
.nrg-dark-1 h1, .nrg-dark-1 h2, .nrg-dark-1 h3, .nrg-dark-1 h4,
.nrg-dark-2 h1, .nrg-dark-2 h2, .nrg-dark-2 h3, .nrg-dark-2 h4,
.nrg-dark-3 h1, .nrg-dark-3 h2, .nrg-dark-3 h3, .nrg-dark-3 h4 {
  color: #FFFFFF;
}

.nrg-dark hr, .nrg-dark-1 hr, .nrg-dark-2 hr, .nrg-dark-3 hr,
.nrg-dark .et_pb_space, .nrg-dark-3 .et_pb_divider_internal {
  border-color: var(--nrg-dark-rule);
}

html hr,
.et_pb_divider:before {
  border-top-color: var(--nrg-rule);
}

/* --------------------------------------------------------------------------
   7. PRODUCT ACCENTS  (§2.1)
   Accents are for iconography, keylines and chips — not body text.
   Lime is never used as a background.
   -------------------------------------------------------------------------- */
.nrg-accent-solar  { color: var(--nrg-gold); }
.nrg-accent-ev     { color: var(--nrg-sky); }
.nrg-accent-hvac   { color: var(--nrg-teal); }
.nrg-accent-batt   { color: var(--nrg-green); }
.nrg-accent-inv    { color: var(--nrg-blue); }
.nrg-accent-leaf   { color: var(--nrg-leaf); }
.nrg-accent-lime   { color: var(--nrg-lime); }

.nrg-keyline-solar { border-left: 3px solid var(--nrg-gold); }
.nrg-keyline-ev    { border-left: 3px solid var(--nrg-sky); }
.nrg-keyline-hvac  { border-left: 3px solid var(--nrg-teal); }
.nrg-keyline-batt  { border-left: 3px solid var(--nrg-green); }
.nrg-keyline-inv   { border-left: 3px solid var(--nrg-blue); }

/* --------------------------------------------------------------------------
   8. SECTION RHYTHM  (§4.3)
   Divi's default is a percentage (4% 0). Fixed 80/48 per the Brand Kit.
   Modules with their own padding set in the builder still win.
   -------------------------------------------------------------------------- */
.et_pb_section {
  padding-top: var(--nrg-section-y);
  padding-bottom: var(--nrg-section-y);
}

.et_pb_row {
  padding-top: 0;
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. FORM CONTROLS — Divi + Fluent Forms  (§4.3, radius 0)
   -------------------------------------------------------------------------- */
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html input[type="url"],
html input[type="number"],
html input[type="password"],
html input[type="search"],
html textarea,
html select,
.fluentform .ff-el-form-control,
.et_pb_contact_field .input {
  font-family: var(--nrg-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--nrg-ink);
  background-color: var(--nrg-surface-card);
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color .15s ease;
}

html input[type="text"]:focus,
html input[type="email"]:focus,
html input[type="tel"]:focus,
html textarea:focus,
html select:focus,
.fluentform .ff-el-form-control:focus {
  border-color: var(--nrg-blue);
  outline: none;
}

html ::placeholder { color: var(--nrg-ink-muted); opacity: 1; }

.fluentform .ff-el-input--label label {
  font-family: var(--nrg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--nrg-ink);
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--nrg-ink-2);
}

.fluentform .ff-el-is-error .ff-el-form-control { border-color: #C62828; }
.fluentform .text-danger { color: #C62828; font-size: 13px; }

.fluentform .ff-btn-submit,
.fluentform .ff_btn_style {
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background-color: var(--nrg-orange);
  border: 1px solid var(--nrg-orange);
  border-radius: var(--nrg-radius);
  color: #FFFFFF;
  padding: 14px 26px;
  transition: background-color .18s ease, border-color .18s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover {
  background-color: var(--nrg-orange-hover);
  border-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   10. NAVIGATION  (§3 — nav is the button scale)
   -------------------------------------------------------------------------- */
html #top-menu li a,
html .et-menu li a,
html .et_mobile_menu li a {
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--nrg-ink);
}

html #top-menu li a:hover,
html .et-menu li a:hover {
  color: var(--nrg-blue);
  opacity: 1;
}

html #top-menu li.current-menu-item > a,
html .et-menu li.current-menu-item > a {
  color: var(--nrg-blue);
}

/* Header CTA.
   CURRENTLY UNUSED. "Book a Consultation" was removed from the Main Menu on
   16 Sep 2026 and rebuilt as a Divi Button module inside both Theme Builder
   header templates, where it is styled in the builder. These rules are kept
   only so a menu-item CTA still lands correctly if one is ever reinstated —
   add the class `nav-cta` to the menu item to use them. */
html #top-menu li.nav-cta > a,
html .et-menu li.nav-cta > a {
  background-color: var(--nrg-orange);
  border-radius: var(--nrg-radius);
  color: #FFFFFF;
  padding: 11px 20px !important;
  display: inline-block;
  line-height: 1.2;
}

html #top-menu li.nav-cta > a:hover,
html .et-menu li.nav-cta > a:hover {
  background-color: var(--nrg-orange-hover);
  color: #FFFFFF;
  opacity: 1;
}

html .et_mobile_menu li.nav-cta > a {
  color: var(--nrg-orange);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. SQUARE-CORNER SWEEP  (Zak's override of §4.2)
   Scoped to the elements that actually ship with a radius rather than a
   blanket reset, so nothing unrelated is flattened.

   Divi writes per-module design settings into a deferred stylesheet that
   loads AFTER this file (et-core-unified-*-deferred). Buttons configured
   with a radius in the builder — the Theme Builder header's "Book a call"
   pill at 50px, for one — therefore need !important to be squared off.
   It is confined to the radius property on buttons and form controls, so
   every other builder setting still wins as normal.
   -------------------------------------------------------------------------- */
.et_pb_button,
.et_pb_promo_button,
.et_pb_more_button,
.et_pb_contact_submit,
.et_pb_newsletter_button,
.et_pb_blurb_content img,
.et_pb_image_wrap,
.et_pb_tabs,
.et_pb_toggle,
.et_pb_pricing_table,
.et_pb_testimonial_portrait,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.fluentform .ff-btn,
.fluentform .ff-el-form-control,
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html textarea,
html select {
  border-radius: var(--nrg-radius) !important;
}

/* --------------------------------------------------------------------------
   12. WOOCOMMERCE BUTTONS — keep the brand CTA consistent
   -------------------------------------------------------------------------- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  background-color: var(--nrg-orange);
  border-radius: var(--nrg-radius);
  color: #FFFFFF;
  padding: 14px 26px;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   13. FOOTER  (Dark/3)

   This site uses a Divi Theme Builder footer template (et_footer_layout 160),
   so Divi's own #main-footer markup is not output on most pages. Its section
   background is already set to Dark/3 (#0A1712) inside that template, which
   is correct. The .et-l--footer rules below carry the type and link colours
   across so the footer matches without having to reopen the builder; the
   #main-footer rules stay as a fallback for any page the template misses.
   -------------------------------------------------------------------------- */
html .et-l--footer,
html .et-l--footer p,
html .et-l--footer li {
  color: var(--nrg-dark-text);
  font-size: 15px;
}

html .et-l--footer h1,
html .et-l--footer h2,
html .et-l--footer h3,
html .et-l--footer h4 {
  font-family: var(--nrg-font-display);
  color: #FFFFFF;
}

html .et-l--footer h4 { font-size: 17px; font-weight: 700; }

html .et-l--footer a,
html .et-l--footer .et-menu li a {
  color: var(--nrg-dark-text);
}

html .et-l--footer a:hover,
html .et-l--footer .et-menu li a:hover {
  color: #FFFFFF;
  opacity: 1;
}

html .et-l--footer hr,
html .et-l--footer .et_pb_divider:before {
  border-top-color: var(--nrg-dark-rule);
}

html .et-l--footer .nrg-caption,
html .et-l--footer .nrg-caption p {
  color: var(--nrg-dark-text);
  font-size: 13px;
}

html #main-footer {
  background-color: var(--nrg-dark-3);
  color: var(--nrg-dark-text);
}

html #main-footer .footer-widget h4,
html #main-footer h4.title {
  font-family: var(--nrg-font-display);
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
}

html #main-footer a,
html #main-footer li a {
  color: var(--nrg-dark-text);
  font-size: 15px;
}

html #main-footer a:hover,
html #main-footer li a:hover {
  color: #FFFFFF;
}

html #footer-bottom {
  background-color: var(--nrg-dark-3);
  border-top: 1px solid var(--nrg-dark-rule);
}

html #footer-info,
html #footer-bottom .et-social-icon a {
  color: var(--nrg-dark-text);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   14. COMPLIANCE NOTICE BLOCK
   Used by the VEU / rebate disclosure copy so the legally required text has
   one consistent, deliberately plain treatment across pages and forms.
   -------------------------------------------------------------------------- */
.nrg-notice {
  background-color: var(--nrg-surface-page);
  border-left: 3px solid var(--nrg-blue);
  border-radius: var(--nrg-radius);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nrg-ink-2);
}

.nrg-notice--veu {
  background-color: var(--nrg-surface-subtle);
  border-left-color: var(--nrg-green);
  color: var(--nrg-rebate-text);
}

.nrg-notice strong { color: var(--nrg-ink); }

/* Fluent Forms custom-HTML blocks carry the privacy and VEU disclosure copy.
   They were written as plain HTML with no inline styles (WP-CLI rejects the
   semicolons inline styles need), so the notice treatment is attached here by
   element instead. This keeps the legally required text visually distinct
   without another structural write to the form. */
.fluentform .ff-custom_html {
  background-color: var(--nrg-surface-page);
  border-left: 3px solid var(--nrg-blue);
  border-radius: var(--nrg-radius);
  padding: 16px 20px;
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nrg-ink-2);
}

.fluentform .ff-custom_html p { font-size: 14px; margin: 0 0 8px; }
.fluentform .ff-custom_html p:last-child { margin-bottom: 0; }
.fluentform .ff-custom_html strong { color: var(--nrg-ink); }
.fluentform .ff-custom_html a { color: var(--nrg-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. RESPONSIVE  (§3 mobile scale)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  html h1 { font-size: 36px; }
  html h2 { font-size: 28px; }
  html h3 { font-size: 20px; }

  .et_pb_section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 767px) {
  html h1 { font-size: 30px; line-height: 1.22; }
  html h2 { font-size: 24px; }
  html h3 { font-size: 19px; }
  html h4 { font-size: 16px; }
  html body, html p { font-size: 16px; }

  .nrg-stat, .nrg-stat p { font-size: 32px; }

  .et_pb_section {
    padding-top: var(--nrg-section-y-mob);
    padding-bottom: var(--nrg-section-y-mob);
  }

  .et_pb_button,
  body #page-container .et_pb_section .et_pb_button {
    padding: 13px 22px;
  }

  .nrg-card { padding: 20px; }
}

/* --------------------------------------------------------------------------
   16. ACCESSIBILITY
   -------------------------------------------------------------------------- */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
.et_pb_button:focus-visible {
  outline: 2px solid var(--nrg-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *:before,
  html *:after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. HOMEPAGE HERO SLIDER

   Divi's stock slider is a flat dark overlay, centred text and dot pagination.
   This rebuilds it as a modern editorial hero without replacing the module:

   - a directional gradient scrim instead of a flat overlay, so the photograph
     stays visible on the right while the type stays readable on the left
   - a slow Ken Burns push on the active slide only, via a pseudo-element that
     inherits the slide's own background-image, so nothing is duplicated
   - staggered entrance for eyebrow, headline, lede and button
   - dot pagination replaced with segment bars that fill in time with the
     autoplay, so the visitor can see how long a slide has left
   - a per-slide accent colour carried on a custom property

   The reduced-motion rule above already neutralises all of it: every animation
   here uses `forwards`, so at 0.01ms each one lands on its end state instantly.
   -------------------------------------------------------------------------- */

.nrg-hero,
.nrg-hero .et_pb_slider,
.nrg-hero .et_pb_slides { background-color: var(--nrg-dark-1); }

.nrg-hero .et_pb_slide {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 88vh;
  min-height: 88svh;
}

/* The moving layer. `inherit` picks up the background-image Divi writes inline
   on the slide, so the URL lives in exactly one place. */
.nrg-hero .et_pb_slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1.001);
}

.nrg-hero .et_pb_slide.et-pb-active-slide::before {
  animation: nrgKenBurns 16s ease-out forwards;
}

@keyframes nrgKenBurns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.08); }
}

/* Directional scrim. Heaviest where the words are, almost clear where the
   photograph earns its place. */
.nrg-hero .et_pb_slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(10, 23, 18, 0.94) 0%,
    rgba(10, 23, 18, 0.82) 36%,
    rgba(10, 23, 18, 0.34) 70%,
    rgba(10, 23, 18, 0.12) 100%);
}

.nrg-hero .et_pb_slide .et_pb_container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1440px;
}

.nrg-hero .et_pb_slide_description {
  text-align: left;
  padding: 0;
}

.nrg-slide__inner { max-width: 660px; }

.nrg-slide__eyebrow {
  font-family: var(--nrg-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--nrg-slide-accent, #8CC63C);
}

.nrg-slide__title {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.12;
  color: #FFFFFF;
  font-size: clamp(30px, 4.6vw, 56px);
  margin: 0 0 18px;
}

.nrg-slide__lede {
  font-family: var(--nrg-font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  color: #C9D4CE;
  margin: 0;
  max-width: 56ch;
}

/* Per-slide accent. Orange stays reserved for the call to action.

   Positional rather than class-based: Divi does not emit module_class onto
   et_pb_slide, so the intended .nrg-slide--* hooks never reach the DOM and
   every eyebrow fell back to one colour. Slide order is fixed and Divi emits
   no clones here, so nth-child is the reliable hook. If a slide is ever
   reordered in the builder, these four lines are what to update. */
.nrg-hero .et_pb_slide_0 { --nrg-slide-accent: #23ACE6; } /* Solutions  — Sky  */
.nrg-hero .et_pb_slide_1 { --nrg-slide-accent: #F3BD36; } /* Build      — Gold */
.nrg-hero .et_pb_slide_2 { --nrg-slide-accent: #2AB762; } /* Rebates    — Leaf */
.nrg-hero .et_pb_slide_3 { --nrg-slide-accent: #00A79D; } /* Commercial — Teal */

.nrg-hero .et_pb_slide .et_pb_button {
  display: inline-block;
  margin-top: 28px;
}

/* Staggered entrance, active slide only. */
.nrg-hero .et_pb_slide .nrg-slide__eyebrow,
.nrg-hero .et_pb_slide .nrg-slide__title,
.nrg-hero .et_pb_slide .nrg-slide__lede,
.nrg-hero .et_pb_slide .et_pb_button {
  opacity: 0;
  transform: translateY(14px);
}

.nrg-hero .et-pb-active-slide .nrg-slide__eyebrow { animation: nrgRise .6s .10s ease-out forwards; }
.nrg-hero .et-pb-active-slide .nrg-slide__title   { animation: nrgRise .6s .18s ease-out forwards; }
.nrg-hero .et-pb-active-slide .nrg-slide__lede    { animation: nrgRise .6s .26s ease-out forwards; }
.nrg-hero .et-pb-active-slide .et_pb_button       { animation: nrgRise .6s .34s ease-out forwards; }

@keyframes nrgRise {
  to { opacity: 1; transform: none; }
}

/* Pagination: segment bars that fill with the autoplay, not dots. */
.nrg-hero .et-pb-controllers {
  bottom: 44px;
  left: 5%;
  width: auto;
  max-width: 90%;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
}

.nrg-hero .et-pb-controllers a {
  width: 54px;
  height: 3px;
  margin: 0;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.28);
  text-indent: -9999px;
  opacity: 1;
  position: relative;
  overflow: hidden;
  transition: background-color .3s ease;
}

.nrg-hero .et-pb-controllers a:hover { background-color: rgba(255, 255, 255, 0.5); }

.nrg-hero .et-pb-controllers .et-pb-active-control {
  background-color: rgba(255, 255, 255, 0.28);
}

.nrg-hero .et-pb-controllers .et-pb-active-control::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #FFFFFF;
  transform-origin: left center;
  animation: nrgProgress 7s linear forwards;
}

@keyframes nrgProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Arrows: quiet until wanted, gone on touch. */
.nrg-hero .et-pb-slider-arrows .et-pb-arrow-prev,
.nrg-hero .et-pb-slider-arrows .et-pb-arrow-next {
  color: #FFFFFF;
  opacity: 0;
  transition: opacity .25s ease;
}

.nrg-hero:hover .et-pb-arrow-prev,
.nrg-hero:hover .et-pb-arrow-next { opacity: .85; }

@media (max-width: 980px) {
  .nrg-hero .et_pb_slide { min-height: 78vh; min-height: 78svh; }
  .nrg-hero .et-pb-arrow-prev,
  .nrg-hero .et-pb-arrow-next { display: none; }
  .nrg-hero .et-pb-controllers { bottom: 28px; left: 6%; }
  .nrg-hero .et-pb-controllers a { width: 38px; }
}

@media (max-width: 767px) {
  .nrg-slide__lede { font-size: 16px; }
  .nrg-hero .et_pb_slide .et_pb_button { margin-top: 22px; }
}

/* --------------------------------------------------------------------------
   18. BUILD YOUR SYSTEM — guided flow
   Rendered entirely by assets/js/build-your-system.js into #nrg-builder.
   -------------------------------------------------------------------------- */

#nrg-builder { max-width: 820px; }

.nrg-bys__progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
}

.nrg-bys__tick {
  width: 42px;
  height: 3px;
  background: var(--nrg-border);
  transition: background-color .3s ease;
}

.nrg-bys__tick.is-done { background: var(--nrg-green); }

.nrg-bys__count {
  margin-left: 10px;
  font-family: var(--nrg-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nrg-ink-muted);
}

.nrg-bys__eyebrow {
  font-family: var(--nrg-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nrg-green);
  margin: 0 0 10px;
}

.nrg-bys__question {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -0.4px;
  line-height: 1.25;
  color: var(--nrg-ink);
  margin: 0 0 10px;
}

.nrg-bys__help {
  font-family: var(--nrg-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--nrg-ink-2);
  margin: 0 0 24px;
  max-width: 52ch;
}

.nrg-bys__options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nrg-bys__option {
  flex: 1 1 210px;
  text-align: left;
  background: var(--nrg-surface-card);
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  padding: 20px 22px;
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--nrg-ink);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.nrg-bys__option:hover {
  border-color: var(--nrg-orange);
  background: #FFF9F1;
  transform: translateY(-2px);
}

.nrg-bys__back {
  margin-top: 22px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--nrg-font-body);
  font-size: 15px;
  color: var(--nrg-ink-2);
  text-decoration: underline;
  cursor: pointer;
}

.nrg-bys__note {
  background: var(--nrg-surface-subtle);
  border-left: 3px solid var(--nrg-green);
  padding: 14px 18px;
  font-family: var(--nrg-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--nrg-rebate-text);
  margin: 0 0 24px;
}

.nrg-bys__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  align-items: start;
}

.nrg-bys__card {
  background: var(--nrg-surface-card);
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  padding: 22px 20px;
}

.nrg-bys__card.is-primary { border: 1.5px solid var(--nrg-orange); }

.nrg-bys__cardlabel {
  font-family: var(--nrg-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nrg-ink-muted);
  margin: 0 0 12px;
}

.nrg-bys__card.is-primary .nrg-bys__cardlabel { color: var(--nrg-orange); }

.nrg-bys__cardimg {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.nrg-bys__cardspec {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--nrg-ink);
  margin: 0 0 6px;
}

.nrg-bys__cardname {
  font-family: var(--nrg-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--nrg-ink-muted);
  margin: 0 0 14px;
}

.nrg-bys__cardprice {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--nrg-ink);
  margin: 0 0 16px;
}

.nrg-bys__cardprice span {
  display: block;
  font-family: var(--nrg-font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--nrg-ink-muted);
  margin-top: 2px;
}

.nrg-bys__add {
  display: block;
  text-align: center;
  background: var(--nrg-orange);
  color: #FFFFFF;
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 14px 20px;
  border-radius: var(--nrg-radius);
  transition: background-color .18s ease;
}

.nrg-bys__add:hover { background: var(--nrg-orange-hover); color: #FFFFFF; }

.nrg-bys__detail {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: var(--nrg-font-body);
  font-size: 14px;
  color: var(--nrg-ink-2);
  text-decoration: underline;
}

.nrg-bys__disclaimer {
  font-family: var(--nrg-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--nrg-ink-muted);
  margin: 24px 0 0;
  max-width: 62ch;
}

.nrg-bys__restart {
  margin-top: 18px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--nrg-font-body);
  font-size: 15px;
  color: var(--nrg-ink-2);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 767px) {
  .nrg-bys__option { flex: 1 1 100%; padding: 18px 20px; font-size: 16px; }
  .nrg-bys__tick { width: 30px; }
}

/* --------------------------------------------------------------------------
   19. QUOTE BASKET  (Proposal §2.3)

   The site takes no money, so cart and checkout are a quote basket and a
   lead form. This styles the read-only selection block that sits above the
   Request My Quote form, and softens the WooCommerce cart table so it reads
   as a summary rather than a shop.
   -------------------------------------------------------------------------- */
.nrg-quote-summary {
  background: var(--nrg-surface-2, #F4F6F5);
  border: 1px solid var(--nrg-rule, #DCE1DF);
  padding: 28px 30px;
  margin: 0 0 36px;
}

.nrg-quote-summary__title {
  font-family: var(--nrg-font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--nrg-ink-1, #101613);
}

.nrg-quote-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nrg-quote-summary__item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nrg-rule, #DCE1DF);
  font-size: 16px;
  line-height: 1.45;
}

.nrg-quote-summary__name { flex: 1 1 auto; }
.nrg-quote-summary__name em { font-style: normal; color: var(--nrg-ink-2); }
.nrg-quote-summary__price { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }

.nrg-quote-summary__total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 18px 0 0;
  font-family: var(--nrg-font-display);
  font-size: 20px;
  font-weight: 700;
}

.nrg-quote-summary__note,
.nrg-quote-summary__empty {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nrg-ink-2);
  max-width: 62ch;
}

.nrg-quote-summary__edit { margin: 16px 0 0; font-size: 15px; }

/* WooCommerce cart, dressed down. It is a selection, not a storefront. */
.woocommerce .cart-collaterals .cross-sells,
.woocommerce .cart .coupon,
.woocommerce-cart .shipping,
.woocommerce-cart .cart-collaterals .shipping-calculator-button { display: none; }

.woocommerce-cart .cart_totals h2 { font-family: var(--nrg-font-display); }

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background-color: var(--nrg-orange) !important;
  color: #FFFFFF !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--nrg-orange-hover) !important;
}

@media (max-width: 767px) {
  .nrg-quote-summary { padding: 22px 20px; }
  .nrg-quote-summary__item { flex-direction: column; gap: 4px; }
}

/* --------------------------------------------------------------------------
   CATALOG (SHOP) PAGE — sidebar filters, toolbar, product grid view switcher.
   Section/row width itself (90% / max 100%) is set on the row in the
   builder — see the Catalog page build, September 2026.
   -------------------------------------------------------------------------- */
.nrg-shop-widget {
  padding: 24px 0;
  border-bottom: 1px solid var(--nrg-border);
}
.nrg-shop-widget:first-child { padding-top: 0; }

.nrg-shop-widget-title {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--nrg-ink);
  margin: 0 0 16px;
}

.nrg-shop-widget ul { list-style: none; margin: 0; padding: 0; font-family: var(--nrg-font-body); font-size: 14px; }
.nrg-shop-widget ul li { margin: 0 0 10px; }
.nrg-shop-widget ul li a {
  color: var(--nrg-ink);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.nrg-shop-widget ul li a:hover { color: var(--nrg-orange); }
.nrg-shop-widget .count { color: var(--nrg-ink-muted); }
.nrg-shop-widget .chosen a::before { content: "\2715  "; color: var(--nrg-orange); }

/* Price filter slider: the old rules that lived here (orange track and
   handles, orange Filter button) were superseded by nrgpal-template.css §25's
   full slider treatment (higher specificity, green, square handles) and were
   deleted in the 24 Sep 2026 cleanup (site-template-v1.md §15.5). */

/* Top Rated Products widget */
.nrg-shop-widget .product_list_widget { list-style: none; margin: 0; padding: 0; }
.nrg-shop-widget .product_list_widget li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.nrg-shop-widget .product_list_widget img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.nrg-shop-widget .product_list_widget .product-title { display: block; font-size: 13px; color: var(--nrg-ink); text-decoration: none; }
.nrg-shop-widget .product_list_widget .woocommerce-Price-amount { font-family: var(--nrg-font-display); font-weight: 700; font-size: 13px; color: var(--nrg-orange); }
.nrg-shop-widget .product_list_widget .star-rating { font-size: 12px; }

/* Toolbar: view switcher (list / 2 / 3 / 4 columns) */
.nrg-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--nrg-border);
}
.nrg-shop-toolbar__label {
  font-family: var(--nrg-font-body);
  font-size: 13px;
  color: var(--nrg-ink-muted);
  margin-right: 4px;
}
.nrg-view-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  background: #FFFFFF;
  color: var(--nrg-ink-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.nrg-view-btn:hover { border-color: var(--nrg-orange); color: var(--nrg-orange); }
.nrg-view-btn.is-active { border-color: var(--nrg-orange); color: var(--nrg-orange); background: var(--nrg-surface-page); }

/* Product grid — column count driven by the view-switcher's JS-added class */
.nrg-shop-grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px 24px !important;
  margin: 0 !important;
}
.nrg-shop-grid ul.products.nrg-cols-1 { grid-template-columns: 1fr !important; }
.nrg-shop-grid ul.products.nrg-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.nrg-shop-grid ul.products.nrg-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.nrg-shop-grid ul.products.nrg-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

.nrg-shop-grid ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border: 1px solid var(--nrg-border);
  padding: 16px;
}

/* List (inline) view: image left, details right */
.nrg-shop-grid ul.products.nrg-cols-1 li.product {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}
.nrg-shop-grid ul.products.nrg-cols-1 li.product img { width: 180px; flex-shrink: 0; }
.nrg-shop-grid ul.products.nrg-cols-1 li.product .price { display: block; }

@media (max-width: 980px) {
  .nrg-shop-grid ul.products.nrg-cols-3,
  .nrg-shop-grid ul.products.nrg-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .nrg-shop-grid ul.products { grid-template-columns: 1fr !important; }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product { flex-direction: column; }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product img { width: 100%; }
}

/* --------------------------------------------------------------------------
   SINGLE PRODUCT PAGE — WooCommerce Divi modules, brand-matched.
   -------------------------------------------------------------------------- */
.woocommerce-breadcrumb {
  font-family: var(--nrg-font-body);
  font-size: 13px;
  color: var(--nrg-ink-muted);
  margin-bottom: 20px;
}
.woocommerce-breadcrumb a { color: var(--nrg-ink-muted); }
.woocommerce-breadcrumb a:hover { color: var(--nrg-orange); }

.woocommerce div.product .product_title {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  color: var(--nrg-ink);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  color: var(--nrg-orange);
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  background-color: var(--nrg-orange) !important;
  color: #FFFFFF !important;
  border-radius: var(--nrg-radius) !important;
  font-family: var(--nrg-font-display);
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 14px 26px !important;
  border: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background-color: var(--nrg-orange-hover) !important; }

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  height: 48px;
  font-family: var(--nrg-font-body);
}

.woocommerce div.product .variations select {
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  font-family: var(--nrg-font-body);
  padding: 10px 12px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  font-family: var(--nrg-font-display);
  font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { color: var(--nrg-orange); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { border-radius: var(--nrg-radius); }

.woocommerce div.product .woocommerce-product-gallery { border: 1px solid var(--nrg-border); }

/* ==========================================================================
   Catalog (Shop) page
   ========================================================================== */

.nrg-shop-catalog {
  width: 90%;
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 0 80px;
}

/* The old .nrg-shop-breadcrumb and .nrg-shop-intro rules that lived here were
   deleted in the 24 Sep 2026 cleanup (site-template-v1.md §15.5): the
   breadcrumb renders inside the v1.2 catalog hero and is styled by
   nrgpal-template.css §24 at higher specificity, and the intro markup was
   replaced by the hero + .nrg-shop-notes split in template-shop-catalog.php
   (23 Sep) — .nrg-shop-intro no longer appears in any markup. */

/* Pricing / compliance note below the product grid. Deliberately not
   editable content — see the docblock in template-shop-catalog.php. */
.nrg-shop-note {
  margin-top: 56px;
  padding: 28px 30px;
  background: #F1F3F1;
  font-family: var(--nrg-font-body);
  color: #5B6B78;
  font-size: 15px;
  line-height: 1.75;
}
.nrg-shop-note h2 {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 20px;
  color: #101613;
  margin: 0 0 12px;
}
.nrg-shop-note p { margin: 0 0 12px; }
.nrg-shop-note p:last-child { margin-bottom: 0; }
.nrg-shop-note a { color: var(--nrg-orange); font-weight: 600; }

.nrg-shop-layout {
  display: flex;
  align-items: flex-start;
  gap: 5.5%;
}
.nrg-shop-sidebar { flex: 0 0 20.875%; max-width: 20.875%; }
.nrg-shop-main { flex: 1 1 auto; min-width: 0; }

@media (max-width: 980px) {
  .nrg-shop-layout { flex-direction: column; }
  .nrg-shop-sidebar,
  .nrg-shop-main { flex: 1 1 100%; max-width: 100%; }
}

/* Sidebar filter widgets */
.nrg-shop-widget {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--nrg-border);
}
.nrg-shop-widget:last-child { border-bottom: none; }
.nrg-shop-widget-title {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: var(--nrg-ink);
  margin: 0 0 14px;
}
.nrg-shop-widget .woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; }
.nrg-shop-widget .woocommerce-widget-layered-nav-list__item { margin-bottom: 8px; }
.nrg-shop-widget .woocommerce-widget-layered-nav-list__item a {
  color: var(--nrg-ink);
  text-decoration: none;
}
.nrg-shop-widget .woocommerce-widget-layered-nav-list__item a:hover { color: var(--nrg-orange); }
.nrg-shop-widget .woocommerce-widget-layered-nav-list__item .count { color: var(--nrg-ink-muted); font-size: 13px; }
/* The second, conflicting slider style that lived here — orange, with round
   handles that broke the radius-0 brand rule — was deleted in the 24 Sep 2026
   cleanup (site-template-v1.md §15.5); nrgpal-template.css §25 owns the price
   slider. */

/* View switcher toolbar */
.nrg-shop-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.nrg-shop-toolbar__label {
  font-family: var(--nrg-font-body);
  color: var(--nrg-ink-muted);
  font-size: 14px;
  margin-right: 4px;
}
.nrg-view-btn {
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  background: var(--nrg-surface-page);
  color: var(--nrg-ink-muted);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.nrg-view-btn:hover { border-color: var(--nrg-orange); color: var(--nrg-orange); }
.nrg-view-btn.is-active {
  background: var(--nrg-orange);
  border-color: var(--nrg-orange);
  color: #FFFFFF;
}

/* Product grid */
.nrg-shop-grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.nrg-shop-grid ul.products li.product {
  margin: 0 !important;
  padding: 16px;
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
}
.nrg-shop-grid ul.products.nrg-cols-1,
.nrg-shop-grid ul.products.nrg-cols-1.columns-4 { grid-template-columns: 1fr !important; }
.nrg-shop-grid ul.products.nrg-cols-1 li.product {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nrg-shop-grid ul.products.nrg-cols-1 li.product .et_shop_image,
.nrg-shop-grid ul.products.nrg-cols-1 li.product img { width: 180px; flex: 0 0 180px; }
.nrg-shop-grid ul.products.nrg-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.nrg-shop-grid ul.products.nrg-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.nrg-shop-grid ul.products.nrg-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.nrg-shop-grid ul.products li.product img { width: 100%; height: auto; border-radius: var(--nrg-radius); }
.nrg-shop-grid ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--nrg-font-display);
  font-size: 16px;
  margin: 12px 0 6px;
}
.nrg-shop-grid ul.products li.product .price {
  color: var(--nrg-orange);
  font-weight: 700;
  font-family: var(--nrg-font-display);
}

@media (max-width: 980px) {
  .nrg-shop-grid ul.products,
  .nrg-shop-grid ul.products.nrg-cols-3,
  .nrg-shop-grid ul.products.nrg-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .nrg-shop-grid ul.products,
  .nrg-shop-grid ul.products.nrg-cols-2,
  .nrg-shop-grid ul.products.nrg-cols-3,
  .nrg-shop-grid ul.products.nrg-cols-4 { grid-template-columns: 1fr !important; }
}