/* ==========================================================================
   NRGPAL — Site template layer
   v1.3 · 23 September 2026 · loads after nrgpal-brand.css
   (v1.1 adds §19–23 for the inner pages and fixes the box tag size;
    v1.2 adds §24, the Catalog hero; v1.3 gives the catalog the homepage
    product cards (§18) and adds §25, the catalog grid and price filter)

   The homepage (page 21) is the reference build for this file, and every
   other page follows it. Everything here is opt-in from the Divi
   "CSS Class" field, so nothing on a page changes until a module asks.

   WHERE THE DESIGN COMES FROM
   - The hero slider is the one Zak signed off. It is extended, not replaced.
   - Cards, program boxes, numbered steps and the parallax bands are
     adopted from Home Design 01.
   - Motion and type follow sentgine.com: character-reveal headings, a
     running marquee, a rotating circular badge, count-up numbers, and one
     accent colour doing the talking. Re-implemented from scratch — no code
     copied, no GSAP.

   BRAND RULES KEPT (originals in the nrgpal-brand.css header)
   - Radius 0 everywhere. The badge is lettering set on a circle around a
     square centre: there is no rounded container anywhere on the page.
   - Lime is never a background. It is accent text, keylines and glyphs
     only, and only on dark — it fails contrast on white (2.05:1), so light
     sections highlight in brand green instead (4.0:1, AA large).
   - Orange is reserved for calls to action. Decorative rules are green.
   - Cards carry no shadow.

   WHAT DIVI DOES NATIVELY, SO IT IS NOT HERE
   Row widths (90% / max 100%), entrance animations, number counters,
   fixed parallax, gradient overlays, per-device visibility. This file only
   covers what Divi cannot produce on its own.

   CLASS INDEX (Divi → Advanced → CSS Class)
   Section   nrg-on-dark           dark section: white type, lime accents
   Text      nrg-kicker            eyebrow with ✱ glyph
             nrg-display           large display heading (h1/h2 inside)
             nrg-reveal            character-reveal the heading inside
             nrg-lead              body intro, capped measure
             nrg-ghost             oversized vertical outline word
             nrg-step              numbered step with progress rule
             nrg-box  (+ --solar --batt --ev --hvac --inv)
   Blurb     nrg-scard (+ --solar --batt --ev --hvac)   image-top card
   Image     nrg-frame             offset block behind the photo
   Button    nrg-btn-arrow         button with a square arrow tile
             (+ nrg-btn-secondary / nrg-btn-tertiary, from the brand file)
   Code      nrg-badge-wrap, nrg-marquee   (markup in the module)
   Text      nrg-products          WooCommerce [products] shortcode as cards
             nrg-statement         one large paragraph (+ a smaller one after)
             nrg-list              checklist from a <ul>
             p.nrg-box__figure     headline number inside an nrg-box
   Section   nrg-page-hero         inner-page opener on a photo
   Column    nrg-btn-group         buttons side by side
   Inline    span.nrg-hl           highlighted words inside a heading

   CONTENTS
    1. Tokens          7. Proof band       13. Steps          19. Statement
    2. Section tone    8. Frame            14. Parallax band  20. Figure
    3. Type            9. Ghost word       15. Hero extensions 21. Checklist
    4. Split reveal   10. Badge            16. Responsive     22. Page hero
    5. Arrow button   11. Marquee          17. Reduced motion 23. Button group
    6. Stretched link 12. Cards & boxes    18. Product row      24. Catalog hero
                                                                25. Catalog grid
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   Derived values only. Brand colours come from nrgpal-brand.css.
   -------------------------------------------------------------------------- */
:root {
  --nrg-on-dark-lead:   #C9D4CE;   /* same as the hero lede, 11.6:1 on dark-1 */
  --nrg-on-dark-body:   #B9C4BE;
  --nrg-card-dark:      #131F25;   /* a step up from dark-1, so cards lift */
  --nrg-ease-out:       cubic-bezier(.2, .7, .2, 1);
  --nrg-reveal-dim:     .16;       /* resting opacity of an unrevealed letter */
}


/* --------------------------------------------------------------------------
   2. SECTION TONE
   Put nrg-on-dark on any dark section. Everything inside that reads as
   "accent" switches from green (light) to lime (dark) automatically.
   -------------------------------------------------------------------------- */
.nrg-on-dark {
  --nrg-accent:      var(--nrg-lime);
  --nrg-type:        #FFFFFF;
  --nrg-type-lead:   var(--nrg-on-dark-lead);
  --nrg-type-meta:   var(--nrg-dark-text);
  --nrg-line:        var(--nrg-dark-rule);
}

.et_pb_section {
  --nrg-accent:      var(--nrg-green);
  --nrg-type:        var(--nrg-ink);
  --nrg-type-lead:   var(--nrg-ink-2);
  --nrg-type-meta:   var(--nrg-ink-muted);
  --nrg-line:        var(--nrg-rule);
}

/* Specificity note: the dark rule must beat the plain .et_pb_section rule
   above, so it is restated with the section class. */
.et_pb_section.nrg-on-dark {
  --nrg-accent:      var(--nrg-lime);
  --nrg-type:        #FFFFFF;
  --nrg-type-lead:   var(--nrg-on-dark-lead);
  --nrg-type-meta:   var(--nrg-dark-text);
  --nrg-line:        var(--nrg-dark-rule);
}

/* Decorative overflow (ghost words, badges, frames) must never cause a
   horizontal scrollbar. clip, not hidden, so sticky children still work. */
.nrg-clip { overflow-x: clip; }


/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */

/* Kicker — the sentgine "✱ ABOUT US" eyebrow. */
.nrg-kicker p,
p.nrg-kicker {
  font-family: var(--nrg-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--nrg-type);
  margin: 0;
  padding: 0;
}

.nrg-kicker p::before,
p.nrg-kicker::before {
  content: "\2731";                        /* ✱ */
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  color: var(--nrg-accent);
  transform-origin: 50% 55%;
  transition: transform .9s var(--nrg-ease-out);
}

.nrg-js .nrg-kicker p::before { transform: rotate(-90deg) scale(.6); }
.nrg-js .nrg-kicker.is-in p::before { transform: none; }

/* Display heading — bigger and tighter than the brand h2, for section
   openers. Sora 800 is already loaded; no new weights. */
/* `html .et_pb_module.` prefix: the brand file colours every module heading
   ink at (0,1,2); a dark section needs white, so this must outrank it. */
html .et_pb_module.nrg-display h1,
html .et_pb_module.nrg-display h2,
html .et_pb_module.nrg-display h3 {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.3vw, 58px);
  line-height: 1.07;
  letter-spacing: -0.034em;
  color: var(--nrg-type);
  margin: 0;
  padding: 0;
  text-wrap: balance;
}

html .et_pb_module.nrg-display--xl h1,
html .et_pb_module.nrg-display--xl h2 {
  font-size: clamp(36px, 4.4vw, 76px);
  line-height: 1.02;
}

/* Highlighted words — the one-accent-colour idea from sentgine. */
.nrg-hl { color: var(--nrg-accent); }

/* Lead — capped at a comfortable measure, because rows now run 90% wide. */
.nrg-lead p {
  font-family: var(--nrg-font-body);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.72;
  color: var(--nrg-type-lead);
  max-width: 62ch;
  margin: 0 0 1em;
}
.nrg-lead p:last-child { margin-bottom: 0; }

/* Text link with an accent underline and arrow, for links inside copy
   (the numbered steps, the FAQ intro). The text stays ink or white rather
   than green: green is 4.0:1 on white, under AA for 14px type, so the
   accent goes in the underline instead. */
.et_pb_module a.nrg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 3px;
  font-family: var(--nrg-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nrg-type);
  text-decoration: none;
  border-bottom: 2px solid var(--nrg-accent);
  transition: gap .3s var(--nrg-ease-out);
}

.et_pb_module a.nrg-link::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.et_pb_module a.nrg-link:hover {
  gap: 12px;
  color: var(--nrg-type);
}


/* --------------------------------------------------------------------------
   4. SPLIT-TEXT REVEAL
   nrgpal-motion.js splits the heading into words and letters and adds
   `nrg-js` to <html>. Letters rest dim and brighten left to right when the
   heading scrolls into view. Without the script nothing is dimmed, so the
   heading is simply shown. The heading carries its words as an aria-label;
   the letters are aria-hidden, so the text is never in the page twice.
   -------------------------------------------------------------------------- */
.nrg-w {
  display: inline-block;
  white-space: nowrap;
}

.nrg-js .nrg-split .nrg-c {
  opacity: var(--nrg-reveal-dim);
  transition: opacity .6s var(--nrg-ease-out);
}

.nrg-js .nrg-split.is-in .nrg-c {
  opacity: 1;
  transition-delay: calc(var(--i) * var(--nrg-step, 22ms));
}


/* --------------------------------------------------------------------------
   5. ARROW BUTTON
   Sentgine pairs a pill with a round arrow button. Here it is one square
   button with a square arrow tile — same idea, radius 0.

   The tile is Divi's own button icon slot (:after). The shortcode sets
   button_use_icon="on" and button_on_hover="off", so Divi keeps the slot
   visible; this replaces the glyph with an exact arrow and turns the slot
   into a tile. Divi's per-module button CSS uses !important, so these
   selectors are built to outrank it: the wrapper class here, and on the
   hero a doubled .et_pb_slide (7 classes against Divi's 6).
   -------------------------------------------------------------------------- */
body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow,
body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow:hover {
  display: inline-flex !important;
  align-items: center;
  min-height: 54px;
  padding: 0 0 0 26px !important;
  line-height: 1 !important;
}

body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow:after,
body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow:hover:after {
  content: "" !important;
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  align-self: stretch;
  flex: 0 0 54px;
  width: 54px;
  margin: 0 0 0 24px !important;
  font-size: 0 !important;
  background-color: rgba(16, 22, 19, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
  transition: background-color .2s ease, background-position .3s var(--nrg-ease-out);
}

body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow:hover:after {
  background-color: rgba(16, 22, 19, .3);
  background-position: calc(50% + 3px) calc(50% - 3px);
}

/* Secondary (outline) and tertiary (white) buttons use an ink tile with a
   white arrow, so the tile always reads as solid. */
body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow.nrg-btn-secondary:after,
body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow.nrg-btn-tertiary:after {
  background-color: var(--nrg-ink);
}

body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow.nrg-btn-secondary:hover:after,
body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow.nrg-btn-tertiary:hover:after {
  background-color: #26332C;
}

/* Outline button on a dark section. */
body #page-container .et_pb_section.nrg-on-dark .et_pb_button_module_wrapper .et_pb_button.nrg-btn-secondary {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .35);
}
body #page-container .et_pb_section.nrg-on-dark .et_pb_button_module_wrapper .et_pb_button.nrg-btn-secondary:hover {
  border-color: #FFFFFF;
}
body #page-container .et_pb_section.nrg-on-dark .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow.nrg-btn-secondary:after {
  background-color: rgba(255, 255, 255, .1);
}


/* --------------------------------------------------------------------------
   6. STRETCHED LINK
   A blurb card links only its image and title by default. This makes the
   whole card the tap target — a much bigger target on a phone.
   -------------------------------------------------------------------------- */
.nrg-scard { position: relative; }

.nrg-scard .et_pb_module_header a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.nrg-scard:focus-within {
  outline: 2px solid var(--nrg-accent);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   7. PROOF BAND
   Four Divi number counters, then the credential line.
   -------------------------------------------------------------------------- */
.nrg-stat .percent { margin-bottom: 10px; }

.nrg-stat .percent p {
  font-feature-settings: "tnum" 1;
  line-height: 1 !important;
}

.nrg-creds p {
  margin: 0;
  font-family: var(--nrg-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 2;
  color: var(--nrg-type-meta);
}

.nrg-creds .nrg-sep {
  display: inline-block;
  margin: 0 16px;
  color: var(--nrg-accent);
}


/* --------------------------------------------------------------------------
   8. FRAME
   Home Design 01's offset block behind a photo, kept square.
   -------------------------------------------------------------------------- */
.nrg-frame {
  position: relative;
  isolation: isolate;
}

.nrg-frame .et_pb_image_wrap {
  position: relative;
  display: block;
  z-index: 1;
}

.nrg-frame .et_pb_image_wrap img {
  display: block;
  width: 100%;
}

.nrg-frame::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  right: -26px;
  bottom: -26px;
  z-index: 0;
  background-color: var(--nrg-surface-subtle);
  transition: transform .7s var(--nrg-ease-out);
}

.nrg-on-dark .nrg-frame::before {
  background-color: transparent;
  border: 1px solid var(--nrg-lime);
}

.nrg-frame:hover::before { transform: translate(-10px, -10px); }


/* --------------------------------------------------------------------------
   9. GHOST WORD
   Oversized vertical outline word beside a photo. It sits in the row's
   margin, outside the column, so it costs no layout.
   -------------------------------------------------------------------------- */
.nrg-ghost {
  position: absolute !important;
  top: 0;
  bottom: 0;
  right: 100%;
  margin: 0 !important;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 0;
}

/* Sized to fit the row's 5% left margin at every width above 1280px
   (at 5vw the rotated line box is ~4vw + 12px, inside 5vw), so the
   letter tops are never cut off by the edge of the screen. */
.nrg-ghost p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0 12px 0 0;
  padding: 0;
  white-space: nowrap;
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(56px, 5vw, 96px);
  line-height: .8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(16, 22, 19, .14);
}

.nrg-on-dark .nrg-ghost p { -webkit-text-stroke-color: rgba(255, 255, 255, .12); }


/* --------------------------------------------------------------------------
   10. BADGE
   Lettering set on a circle, rotating slowly, around a square centre.
   Markup lives in a Code module; width/height are also inline so it
   renders correctly even before this file loads.
   -------------------------------------------------------------------------- */
.nrg-badge {
  position: relative;
  width: 148px;
  height: 148px;
  color: #FFFFFF;
  display: grid;
  place-items: center;
}

.nrg-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: nrgSpin 24s linear infinite;
}

.nrg-badge__ring text {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  text-transform: uppercase;
  fill: currentColor;
}

.nrg-badge__core {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background-color: var(--nrg-ink);
  transition: transform .5s var(--nrg-ease-out);
}

.nrg-badge:hover .nrg-badge__core { transform: rotate(90deg); }

/* Square tiles behind the badge, for when it sits on a photograph. */
.nrg-badge--glass {
  background-color: rgba(10, 23, 18, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
}

.nrg-badge--paper {
  background-color: #FFFFFF;
  border: 1px solid var(--nrg-border);
  color: var(--nrg-ink);
}

@keyframes nrgSpin { to { transform: rotate(360deg); } }

/* Placement wrappers (the Code module carries the class). */
.nrg-badge-wrap { margin: 0 !important; }

/* top/left are cleared because the Visual Builder writes top:0; left:0 on
   every module, which would pin the badge over the logo while editing. */
.nrg-hero-badge {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 5%;
  bottom: 40px;
  z-index: 6;
}

.nrg-about-badge {
  position: absolute !important;
  top: -54px;
  right: -20px;
  z-index: 3;
}

/* Final call to action: larger, and set on the right edge of the grid.
   !important because the size is also inline, as the no-CSS fallback. */
.nrg-cta-badge .nrg-badge {
  width: 188px !important;
  height: 188px !important;
  margin-left: auto;
}
.nrg-cta-badge .nrg-badge__core {
  width: 70px !important;
  height: 70px !important;
}


/* --------------------------------------------------------------------------
   11. MARQUEE
   Sentgine runs its marquee on a lime band. Lime is never a background
   here, so it runs on dark: white lettering alternating with outline
   lettering, lime ✱ separators. The track is the item set twice, moved by
   exactly half its width, so the loop is seamless. Edges fade out, so the
   band still sits on the 90% grid.
   -------------------------------------------------------------------------- */
.nrg-marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.nrg-marquee__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: nrgMarquee 46s linear infinite;
  will-change: transform;
}

.nrg-marquee__group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.nrg-marquee:hover .nrg-marquee__track { animation-play-state: paused; }

.nrg-marquee__item {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  padding: 0 .55em;
}

.nrg-marquee__item.is-outline {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .72);
}

.nrg-marquee__sep {
  font-size: clamp(20px, 2vw, 34px);
  color: var(--nrg-lime);
  line-height: 1;
}

@keyframes nrgMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* --------------------------------------------------------------------------
   12. CARDS & BOXES
   -------------------------------------------------------------------------- */

/* Solution card — Home Design 01's image-top blurb, on dark. Border, fill
   and the 3px accent top rule are set natively on the Divi module; this
   adds the inner spacing Divi has no field for, the image crop and the
   hover. Accent follows the product families in the Brand Kit. */
.nrg-scard { height: 100%; transition: transform .45s var(--nrg-ease-out), border-color .3s ease; }
.nrg-scard--solar { --nrg-card-accent: var(--nrg-gold); }
.nrg-scard--batt  { --nrg-card-accent: var(--nrg-green); }
.nrg-scard--ev    { --nrg-card-accent: var(--nrg-sky); }
.nrg-scard--hvac  { --nrg-card-accent: var(--nrg-teal); }

.nrg-scard .et_pb_blurb_content { max-width: none; height: 100%; display: flex; flex-direction: column; }
.nrg-scard .et_pb_main_blurb_image { margin: 0; overflow: hidden; }
.nrg-scard .et_pb_main_blurb_image .et_pb_image_wrap { display: block; }

.nrg-scard .et_pb_main_blurb_image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1s var(--nrg-ease-out);
}

.nrg-scard .et_pb_blurb_container {
  padding: 24px 26px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.nrg-scard .et_pb_module_header { padding-bottom: 8px; }
.nrg-scard .et_pb_module_header a { color: inherit; }

/* "Learn more" affordance under the description. Same pattern as
   .nrg-link: the text takes the section's type colour and the accent goes
   in the underline — battery green is 4.2:1 on the dark card, under AA
   for 14px type. The arrow is ink by default and white on dark. */
.nrg-scard .et_pb_blurb_description::after {
  content: "Learn more";
  display: inline-block;
  margin-top: 18px;
  padding: 0 24px 3px 0;
  font-family: var(--nrg-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nrg-type);
  border-bottom: 2px solid var(--nrg-card-accent, var(--nrg-accent));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101613' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: 100% 50%;
  transition: background-position .3s var(--nrg-ease-out);
}

.nrg-on-dark .nrg-scard .et_pb_blurb_description::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}

.nrg-scard:hover { transform: translateY(-6px); border-color: var(--nrg-card-accent) !important; }
.nrg-scard:hover .et_pb_main_blurb_image img { transform: scale(1.07); }
.nrg-scard:hover .et_pb_blurb_description::after { background-position: calc(100% - 2px) calc(50% - 3px); }

/* Box — Home Design 01's program and credential boxes. Border, fill and
   padding are native on the Text module; this adds the accent rule that
   grows across the top on hover. */
.nrg-box {
  position: relative;
  height: 100%;
  transition: border-color .3s ease, transform .45s var(--nrg-ease-out);
}

.nrg-box--solar { --nrg-box-accent: var(--nrg-gold); }
.nrg-box--batt  { --nrg-box-accent: var(--nrg-green); }
.nrg-box--ev    { --nrg-box-accent: var(--nrg-sky); }
.nrg-box--hvac  { --nrg-box-accent: var(--nrg-teal); }
.nrg-box--inv   { --nrg-box-accent: var(--nrg-blue); }

.nrg-box::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background-color: var(--nrg-box-accent, var(--nrg-accent));
  transform: scaleX(.22);
  transform-origin: 0 50%;
  transition: transform .6s var(--nrg-ease-out);
}

.nrg-box:hover { transform: translateY(-4px); }
.nrg-box:hover::before { transform: scaleX(1); }

.nrg-box__tag {
  margin: 0 0 14px !important;
  font-family: var(--nrg-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nrg-type-meta);
}

html .et_pb_module.nrg-box h3 {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--nrg-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nrg-type);
}

html .et_pb_module.nrg-box p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--nrg-type-lead); }

/* The tag and the figure (§20) are paragraphs too, so they are restated at
   a higher weight than the box paragraph rule above to keep their size. */
html .et_pb_module.nrg-box p.nrg-box__tag {
  font-size: 11px;
  line-height: 1.4;
  color: var(--nrg-type-meta);
}


/* --------------------------------------------------------------------------
   13. STEPS
   Home Design 01's numbered steps. Its orange top rule is not reused —
   orange is CTA-only — so the rule is a quiet track that fills in green,
   step by step, like the hero's progress bars. Outline numerals from
   sentgine.
   -------------------------------------------------------------------------- */
.nrg-step {
  position: relative;
  padding-top: 30px;
}

.nrg-step::before,
.nrg-step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
}

.nrg-step::before { background-color: var(--nrg-line); }

.nrg-step::after {
  background-color: var(--nrg-accent);
  transform-origin: 0 50%;
  transform: scaleX(1);
  transition: transform 1s var(--nrg-ease-out);
}

.nrg-js .nrg-step::after { transform: scaleX(0); }
.nrg-js .nrg-step.is-in::after { transform: scaleX(1); }
.nrg-js .et_pb_column:nth-child(2) > .nrg-step.is-in::after { transition-delay: .25s; }
.nrg-js .et_pb_column:nth-child(3) > .nrg-step.is-in::after { transition-delay: .5s; }

.nrg-step__num {
  display: block;
  margin: 0 0 22px;
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(60px, 5.2vw, 96px);
  line-height: .85;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1.25px var(--nrg-type);
}

html .et_pb_module.nrg-step h3 {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--nrg-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--nrg-type);
}

html .et_pb_module.nrg-step p { margin: 0; color: var(--nrg-type-lead); max-width: 38ch; }


/* --------------------------------------------------------------------------
   14. PARALLAX BAND
   The fixed background and the dark gradient are Divi's own (section:
   parallax on, method CSS; gradient overlays image). Nothing to add except
   keeping the type readable at every width.
   -------------------------------------------------------------------------- */
.nrg-parallax .nrg-display h2 { max-width: 20ch; }
.nrg-parallax .nrg-lead p { color: var(--nrg-on-dark-lead); }


/* --------------------------------------------------------------------------
   15. HERO EXTENSIONS
   The slider itself is styled in nrgpal-brand.css §17. This adds:
   - rows at 90% / max 100%, to match every other row on the page
   - the ✱ glyph on the eyebrow
   - highlighted words in the per-slide accent colour
   - the character reveal on the headline, replayed every time a slide
     becomes active (nrg-play is added once the letters exist)
   - the arrow tile on the slide button
   -------------------------------------------------------------------------- */
.nrg-hero .et_pb_slide .et_pb_container { max-width: 100%; }

/* Divi pads every slide 6% left and right, and the slide module has no
   field for it (its custom padding goes on the description). Removing it
   puts the headline on the same 5% line as the logo and every row. */
.nrg-hero .et_pb_slide { padding-left: 0; padding-right: 0; }

.nrg-hero .nrg-slide__eyebrow::before {
  content: "\2731";
  display: inline-block;
  margin-right: 10px;
}

.nrg-hero .nrg-slide__title .nrg-hl { color: var(--nrg-slide-accent, var(--nrg-lime)); }

/* Once split, the headline is revealed letter by letter instead of rising
   as one block. */
.nrg-js .nrg-hero .et_pb_slide .nrg-slide__title.nrg-split {
  opacity: 1;
  transform: none;
  animation: none;
}

.nrg-js .nrg-hero .nrg-slide__title .nrg-c {
  opacity: var(--nrg-reveal-dim);
  transition: opacity .55s var(--nrg-ease-out);
}

.nrg-js .nrg-hero .et-pb-active-slide.nrg-play .nrg-slide__title .nrg-c {
  opacity: 1;
  transition-delay: calc(.22s + var(--i) * var(--nrg-step, 20ms));
}

/* Arrow tile on the slide button (Divi emits no module class on slides).
   :hover is listed too: Divi's hover padding rule has the same weight as
   the plain selector, and would otherwise win on load order. */
body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button,
body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button:hover {
  display: inline-flex !important;
  align-items: center;
  min-height: 54px;
  padding: 0 0 0 26px !important;
  line-height: 1 !important;
}

body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button:after,
body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button:hover:after {
  content: "" !important;
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  align-self: stretch;
  flex: 0 0 54px;
  width: 54px;
  margin: 0 0 0 24px !important;
  font-size: 0 !important;
  background-color: rgba(16, 22, 19, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
  transition: background-color .2s ease, background-position .3s var(--nrg-ease-out);
}

body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button:hover:after {
  background-color: rgba(16, 22, 19, .3);
  background-position: calc(50% + 3px) calc(50% - 3px);
}


/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .nrg-ghost { display: none; }            /* not enough margin to sit in */
}

@media (max-width: 980px) {
  .nrg-hero-badge,
  .nrg-about-badge { display: none; }

  /* Stats: two by two, not one long column. */
  .nrg-stats .et_pb_column {
    width: 47.25% !important;
    margin-right: 5.5% !important;
    margin-bottom: 36px !important;
  }
  .nrg-stats .et_pb_column:nth-child(2n) { margin-right: 0 !important; }

  .nrg-frame::before { top: 16px; left: 16px; right: -16px; bottom: -16px; }

  .nrg-cta-badge .nrg-badge { margin: 8px 0 0; }   /* columns stack: sit under the button */

  .nrg-scard:hover,
  .nrg-box:hover { transform: none; }      /* no hover lift on touch */
}

@media (max-width: 980px) {
  .nrg-hero .et-pb-controllers { left: 5%; }   /* on the grid line, as on desktop */
}

@media (max-width: 767px) {
  /* On a phone the words run the full width of the slide, so the
     left-to-right scrim would leave the end of every line on bare
     photograph. Top-to-bottom instead: lighter where the header sits,
     heaviest behind the text. */
  .nrg-hero .et_pb_slide::after {
    background: linear-gradient(180deg,
      rgba(10, 23, 18, 0.60) 0%,
      rgba(10, 23, 18, 0.80) 40%,
      rgba(10, 23, 18, 0.90) 100%);
  }

  .nrg-creds .nrg-sep { margin: 0 10px; }
  .nrg-creds p { font-size: 11.5px; letter-spacing: 1px; }

  body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow,
  body #page-container .et_pb_section .et_pb_button_module_wrapper .et_pb_button.nrg-btn-arrow:hover,
  body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button,
  body #page-container .et_pb_section.nrg-hero .et_pb_slider .et_pb_slide.et_pb_slide .et_pb_more_button.et_pb_button:hover {
    min-height: 50px;
    padding-left: 22px !important;
  }
}


/* --------------------------------------------------------------------------
   17. REDUCED MOTION
   nrgpal-brand.css §16 already forces every animation and transition to
   0.01ms, which lands each one on its end state. That is right for the
   one-shot effects, but an INFINITE animation at 0.01ms loops thousands of
   times a second and flickers — so the two loops here are switched off
   outright. The motion script also exits early, so nothing is dimmed.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nrg-badge__ring,
  .nrg-marquee__track {
    animation: none !important;
  }

  .nrg-marquee {
    white-space: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The second copy of the marquee items only exists for the loop. */
  .nrg-marquee__group ~ .nrg-marquee__group { display: none; }
  .nrg-marquee__track { display: flex; flex-wrap: wrap; width: auto; }
}


/* --------------------------------------------------------------------------
   18. PRODUCT ROW
   WooCommerce's [products] shortcode in a Text module with the class
   nrg-products. Divi has no design fields for shortcode output, so the
   cards are styled here to match the program boxes: square, 1px keyline,
   no shadow, a green rule that grows on hover, and a "View system" line
   like the solution cards' "Learn more".
   The catalog grid (.nrg-shop-grid, template-shop-catalog.php) uses the
   same cards: each card rule below selects both. The list itself differs
   (the catalog has a 1–4 column switcher), so the list rules stay
   homepage-only and the catalog's extras are in §25.
   -------------------------------------------------------------------------- */

/* Woo prints .columns-3 on the list. Utility CSS (the draft-preview
   toolbar loads one) reads that as three text columns and shreds the
   grid; this keeps the grid intact wherever the page is viewed. */
.nrg-products .woocommerce[class*="columns-"],
.nrg-products ul.products[class*="columns-"] { columns: auto; }

.nrg-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Woo's float clearfix would take up grid cells. */
.nrg-products ul.products::before,
.nrg-products ul.products::after { display: none !important; }

.nrg-products ul.products li.product,
.nrg-shop-grid ul.products li.product {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 26px !important;
  background-color: #FFFFFF;
  border: 1px solid var(--nrg-border);
  transition: transform .45s var(--nrg-ease-out), border-color .3s ease;
}

.nrg-products ul.products li.product::before,
.nrg-shop-grid ul.products li.product::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  z-index: 1;
  background-color: var(--nrg-green);
  transform: scaleX(.22);
  transform-origin: 0 50%;
  transition: transform .6s var(--nrg-ease-out);
}

.nrg-products ul.products li.product:hover,
.nrg-shop-grid ul.products li.product:hover { transform: translateY(-4px); border-color: #C7CDC9; }
.nrg-products ul.products li.product:hover::before,
.nrg-shop-grid ul.products li.product:hover::before { transform: scaleX(1); }

/* The link wraps image, title and price: the whole card is the target. */
.nrg-products ul.products li.product a.woocommerce-loop-product__link,
.nrg-shop-grid ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.nrg-products ul.products li.product .et_shop_image,
.nrg-shop-grid ul.products li.product .et_shop_image {
  display: block;
  margin: 0 0 22px;
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--nrg-border);
  overflow: hidden;
}

/* Thumbnails are 300px: shown at up to 260px so they stay sharp. */
.nrg-products ul.products li.product .et_shop_image img,
.nrg-shop-grid ul.products li.product .et_shop_image img {
  display: block;
  width: 100%;
  height: clamp(180px, 15vw, 260px);
  margin: 0 !important;
  object-fit: contain;
  transition: transform .8s var(--nrg-ease-out);
}

.nrg-products ul.products li.product:hover .et_shop_image img,
.nrg-shop-grid ul.products li.product:hover .et_shop_image img { transform: scale(1.04); }
.nrg-products ul.products li.product .et_overlay,
.nrg-shop-grid ul.products li.product .et_overlay { display: none !important; }   /* Divi's magnifier */

.nrg-products ul.products li.product .woocommerce-loop-product__title,
.nrg-shop-grid ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 14px !important;
  padding: 0 26px !important;
  font-family: var(--nrg-font-display);
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.45;
  color: var(--nrg-ink);
}

/* Price and the "View system" line sit on the card's bottom edge, so
   cards with long and short names still line up. */
.nrg-products ul.products li.product .price,
.nrg-shop-grid ul.products li.product .price {
  display: block;
  margin: auto 0 0 !important;
  padding: 0 26px;
  font-family: var(--nrg-font-display);
  font-size: 20px !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nrg-ink) !important;
}

.nrg-products ul.products li.product a.woocommerce-loop-product__link::after,
.nrg-shop-grid ul.products li.product a.woocommerce-loop-product__link::after {
  content: "View system";
  align-self: flex-start;
  margin: 16px 26px 0;
  padding: 0 24px 3px 0;
  font-family: var(--nrg-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nrg-ink);
  border-bottom: 2px solid var(--nrg-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101613' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: 100% 50%;
}

@media (max-width: 980px) {
  .nrg-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nrg-products ul.products li.product:hover,
  .nrg-shop-grid ul.products li.product:hover { transform: none; }
}

@media (max-width: 767px) {
  .nrg-products ul.products { grid-template-columns: 1fr; gap: 16px; }
}


/* --------------------------------------------------------------------------
   19. STATEMENT
   One large paragraph that carries a section on its own. The brand file
   fixes paragraph size (html p), so a Text module's own font size cannot
   do this. Accent words take span.nrg-hl, as in headings.
   -------------------------------------------------------------------------- */
.nrg-statement p {
  margin: 0;
  max-width: 44ch;
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--nrg-type);
  text-wrap: pretty;
}

.nrg-statement p + p {
  margin-top: 26px;
  max-width: 62ch;
  font-family: var(--nrg-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.72;
  letter-spacing: 0;
  color: var(--nrg-type-lead);
}


/* --------------------------------------------------------------------------
   20. FIGURE
   The headline number in a box — "Up to $1,400". Goes between the tag and
   the h3: <p class="nrg-box__figure">.
   -------------------------------------------------------------------------- */
html .et_pb_module.nrg-box p.nrg-box__figure {
  margin: 0 0 8px;
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(30px, 2.5vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--nrg-type);
}


/* --------------------------------------------------------------------------
   21. CHECKLIST
   Put nrg-list on a Text module holding a <ul> — eligibility criteria and
   other all-of-these-must-be-true lists. Square accent markers (green on
   light, lime on dark) and a keyline between items.
   -------------------------------------------------------------------------- */
.nrg-list ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--nrg-line);
}

.nrg-list li {
  position: relative;
  margin: 0;
  padding: 15px 0 15px 30px;
  border-bottom: 1px solid var(--nrg-line);
  font-size: 16px;
  line-height: 1.6;
  color: var(--nrg-type-lead);
}

.nrg-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 23px;
  width: 9px;
  height: 9px;
  background-color: var(--nrg-accent);
}

.nrg-list li strong { color: var(--nrg-type); }

.nrg-list p {
  margin: 0 0 16px;
  color: var(--nrg-type);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   22. PAGE HERO
   Inner pages open with a section classed nrg-page-hero nrg-on-dark: the
   photo and its left-to-right scrim are Divi's own (background image +
   gradient). On a phone the words run the full width, so the scrim gets
   a top-to-bottom layer as well.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nrg-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 23, 18, 0.35) 0%, rgba(10, 23, 18, 0.62) 100%);
  }
}


/* --------------------------------------------------------------------------
   23. BUTTON GROUP
   Put nrg-btn-group on a Column to set its buttons side by side (Divi
   stacks each Button module on its own line). They stack again on narrow
   phones.
   -------------------------------------------------------------------------- */
.nrg-btn-group > .et_pb_button_module_wrapper {
  display: inline-block;
  vertical-align: top;
  margin-right: 14px;
}

.nrg-btn-group > .et_pb_button_module_wrapper:last-child { margin-right: 0; }

@media (max-width: 480px) {
  .nrg-btn-group > .et_pb_button_module_wrapper {
    display: block;
    margin-right: 0;
  }
}


/* --------------------------------------------------------------------------
   24. CATALOG HERO
   The Shop archive has no Divi layout (template-shop-catalog.php draws
   it), so its hero is plain markup that borrows Divi's class names. The
   kicker, display, lead and arrow-button rules above then apply exactly as
   on every other inner page. What a Divi section would hold in its own
   settings (photo, gradient, padding, row width) is set here instead.
   The notes are the intro's later paragraphs, shown as boxes above the grid.
   -------------------------------------------------------------------------- */
body #page-container .et_pb_section.nrg-catalog-hero {
  position: relative;
  padding: 150px 0 130px;
  background-color: #0A1712;
  background-image:
    linear-gradient(90deg, rgba(10, 23, 18, 0.95) 0%, rgba(10, 23, 18, 0.84) 50%, rgba(10, 23, 18, 0.55) 100%),
    url("/wp-content/uploads/2026/09/solarbackground-v1-scaled.webp");
  background-size: cover;
  background-position: center;
}

.nrg-catalog-hero__inner {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 100%;
  margin: 0 auto;
}

.nrg-catalog-hero .nrg-shop-breadcrumb {
  margin: 0 0 30px;
  font-size: 13px;
  color: var(--nrg-on-dark-lead);
}
.nrg-catalog-hero .nrg-shop-breadcrumb nav.woocommerce-breadcrumb,
.nrg-catalog-hero .nrg-shop-breadcrumb nav.woocommerce-breadcrumb a { color: var(--nrg-on-dark-lead); }
.nrg-catalog-hero .nrg-shop-breadcrumb nav.woocommerce-breadcrumb a:hover { color: #FFFFFF; }

.nrg-catalog-hero .nrg-display { margin-top: 22px; max-width: 1120px; }
.nrg-catalog-hero .nrg-lead { margin-top: 28px; max-width: 720px; }

.nrg-catalog-hero__cta { margin-top: 34px; }
.nrg-catalog-hero__cta > .et_pb_button_module_wrapper {
  display: inline-block;
  vertical-align: top;
  margin: 0 14px 0 0;
}
.nrg-catalog-hero__cta > .et_pb_button_module_wrapper:last-child { margin-right: 0; }

/* A Button module sets its type and border from its own settings. These two
   buttons are not modules, so they take the values the modules use. */
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow,
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow:hover {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  border-style: solid;
  border-width: 0;
  border-radius: 0;
}
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow.nrg-btn-secondary,
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow.nrg-btn-secondary:hover { border-width: 1px; }

/* The Shop archive renders inside Divi's #et-boc .et-l wrapper with
   body.et-db, where the Customizer's heading and button rules carry an ID
   (1,2,1 and 1,3,0) and would turn the H1 ink and the buttons transparent.
   These restate the template's own values one step higher. */
body #page-container .et_pb_section.nrg-catalog-hero .et_pb_module.nrg-display h1 {
  margin: 0;
  padding: 0;
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: var(--nrg-type);
  text-wrap: balance;
}

body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow {
  background-color: var(--nrg-orange);
  color: #FFFFFF;
}
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow:hover {
  background-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow.nrg-btn-secondary {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}
body #page-container .nrg-catalog-hero .et_pb_button.nrg-btn-arrow.nrg-btn-secondary:hover {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* The catalog body is not a Divi section, so it takes the light-section
   tokens here for the notes' type and accent colours. */
.nrg-shop-catalog {
  --nrg-accent:    var(--nrg-green);
  --nrg-type:      var(--nrg-ink);
  --nrg-type-lead: var(--nrg-ink-2);
  --nrg-type-meta: var(--nrg-ink-muted);
  --nrg-line:      var(--nrg-rule);
}

.nrg-shop-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 56px;
}

html .et_pb_module.nrg-box.nrg-shop-notes__item {
  margin: 0;
  padding: 26px 26px 28px;
  background-color: #FFFFFF;
  border: 1px solid var(--nrg-border);
}

/* WooCommerce clears its product list with ::before and ::after. In the
   catalog's grid those two pseudo-elements took the first and last cells,
   so the first product started in the second column. */
.nrg-shop-grid ul.products::before,
.nrg-shop-grid ul.products::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 980px) {
  body #page-container .et_pb_section.nrg-catalog-hero { padding: 110px 0 96px; }
  .nrg-shop-notes { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
}

@media (max-width: 767px) {
  body #page-container .et_pb_section.nrg-catalog-hero { padding: 88px 0 76px; }
}

@media (max-width: 480px) {
  .nrg-catalog-hero__cta > .et_pb_button_module_wrapper {
    display: block;
    margin: 0 0 12px;
  }
}


/* --------------------------------------------------------------------------
   25. CATALOG GRID AND PRICE FILTER
   The catalog cards are the homepage cards (§18 selects both), so the
   price and "View system" sit on the bottom edge of every card however
   long the product name runs. This section adds only what the catalog
   has and the homepage does not: the view switcher's 1–4 columns
   (nrgpal-brand.css sets the columns) and the price filter.
   -------------------------------------------------------------------------- */

/* A square image well, so image, name and price start on the same lines
   in every card at every column count. */
.nrg-shop-grid ul.products li.product .et_shop_image img {
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 240px;
}

/* Products outside Complete Systems get a neutral label. */
.nrg-shop-grid ul.products li.product:not(.product_cat-complete-systems) a.woocommerce-loop-product__link::after {
  content: "View details";
}

/* Between 768px and 980px Divi sizes every WooCommerce card to 28.333% of
   its row with a 7.5% margin, from an inline style whose :nth-child(n)
   selector and !important outrank a grid cell, so tablet cards shrank to a
   quarter of their cell. In these grids the cell sets the size. */
.nrg-shop-catalog .nrg-shop-grid ul.products li.product:nth-child(n),
.nrg-products .woocommerce ul.products li.product:nth-child(n) {
  width: auto !important;
  margin: 0 !important;
}

/* Four across leaves cards under 210px wide below a 1366px window, so the
   four-column view shows three there. */
@media (min-width: 981px) and (max-width: 1365px) {
  .nrg-shop-grid ul.products.nrg-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Four across on a wide window: the same card, set a little tighter. */
@media (min-width: 1366px) {
  .nrg-shop-grid ul.products.nrg-cols-4 li.product .et_shop_image { margin-bottom: 18px; padding: 22px 22px 18px; }
  .nrg-shop-grid ul.products.nrg-cols-4 li.product .woocommerce-loop-product__title { padding: 0 20px !important; font-size: 15px !important; }
  .nrg-shop-grid ul.products.nrg-cols-4 li.product .price { padding: 0 20px; font-size: 18px !important; }
  .nrg-shop-grid ul.products.nrg-cols-4 li.product a.woocommerce-loop-product__link::after { margin-left: 20px; margin-right: 20px; }
}

/* List view. The brand file makes the card a flex row and fixes the image
   at 180px, as a width and as a flex basis (on a phone, where the link is
   a column, that basis became a 180px-tall well that cropped the image).
   The link is the card's only child, so the layout is set on the link
   instead: image on the left, then name, price and link, with the price
   held at the bottom. Below 601px every view is one column and the list
   card is the normal card. */
.nrg-shop-grid ul.products.nrg-cols-1 li.product { display: block; }
.nrg-shop-grid ul.products.nrg-cols-1 li.product .et_shop_image { flex: none; width: auto; }

@media (min-width: 601px) {
  .nrg-shop-grid ul.products.nrg-cols-1 li.product { padding: 0 !important; }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product a.woocommerce-loop-product__link {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product .et_shop_image {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    padding: 22px;
    border-bottom: 0;
    border-right: 1px solid var(--nrg-border);
  }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product .woocommerce-loop-product__title {
    grid-column: 2;
    max-width: 62ch;
    margin: 0 !important;
    padding: 26px 30px 0 !important;
    font-size: 18px !important;
  }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product .price {
    grid-column: 2;
    align-self: end;
    margin: 18px 0 0 !important;
    padding: 0 30px;
  }
  .nrg-shop-grid ul.products.nrg-cols-1 li.product a.woocommerce-loop-product__link::after {
    grid-column: 2;
    justify-self: start;
    margin: 14px 30px 26px;
  }
}

/* Pagination under the grid, square like everything else, with 44px
   targets. WooCommerce's own is a lilac keyline strip. */
.nrg-shop-main nav.woocommerce-pagination { margin: 48px 0 0; text-align: center; }

.nrg-shop-main nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: normal;
}

.nrg-shop-main nav.woocommerce-pagination ul.page-numbers li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.nrg-shop-main nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background-color: #FFFFFF;
  border: 1px solid var(--nrg-border);
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--nrg-ink);
  text-decoration: none;
}

.nrg-shop-main nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.nrg-shop-main nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
  background-color: #FFFFFF;
  border-color: var(--nrg-green);
  color: var(--nrg-ink);
}

.nrg-shop-main nav.woocommerce-pagination ul.page-numbers li span.current {
  background-color: var(--nrg-ink);
  border-color: var(--nrg-ink);
  color: #FFFFFF;
}

/* Price filter. inc/shop-catalog.php renders WooCommerce's price widget
   with its own wrapper, so the widget_price_filter class that WooCommerce's
   slider styles hang on is absent, and jQuery UI ships no theme. Without
   this the slider script runs but the track is near-white and the two
   handles are empty inline spans: nothing to see or drag. This is the
   whole control. Green is the accent on a light section; orange stays on
   the Filter button, which is the call to action. */
.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .price_slider.ui-slider {
  position: relative;
  height: 4px;
  margin: 20px 10px 28px;
  background-color: var(--nrg-btn-secondary-border);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .ui-slider .ui-slider-range {
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
  height: 100%;
  background-color: var(--nrg-green);
  border: 0;
  border-radius: 0;
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background-color: #FFFFFF;
  border: 2px solid var(--nrg-green);
  border-radius: 0;
  outline: none;
  cursor: ew-resize;
  touch-action: none;
  transition: background-color .2s ease;
}

/* A 38px target around the 20px square, for fingers. */
.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .ui-slider .ui-slider-handle::before {
  content: "";
  position: absolute;
  inset: -11px;
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .ui-slider .ui-slider-handle:hover,
.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .ui-slider .ui-slider-handle.ui-state-active { background-color: var(--nrg-green); }

.nrg-shop-sidebar .nrg-shop-widget .price_slider_wrapper .ui-slider .ui-slider-handle:focus-visible {
  outline: 2px solid var(--nrg-ink);
  outline-offset: 3px;
}

/* The range reads first, the Filter button follows. Without JavaScript the
   script never hides the two price boxes, so they are styled too. */
.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  line-height: 1.4;
  text-align: left;
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .price_label {
  order: -1;
  font-family: var(--nrg-font-body);
  font-size: 14px;
  color: var(--nrg-ink-2);
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .price_label .from,
.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .price_label .to {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  color: var(--nrg-ink);
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .clear { display: none; }

.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount input[type="text"] {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--nrg-btn-secondary-border);
  border-radius: 0;
  font-family: var(--nrg-font-body);
  font-size: 14px;
  color: var(--nrg-ink);
}

/* Divi gives WooCommerce buttons a 2px border and a hover arrow that
   shifts the padding; the Filter button keeps one shape. */
.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .button,
.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .button:hover {
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--nrg-font-display);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: 0.3px;
}

.nrg-shop-sidebar .nrg-shop-widget .price_slider_amount .button::after { display: none !important; }

/* The attribute filters: name and count on one line. The brand file makes
   the link a flex row to push the count right, but the count sits outside
   the link, so it wrapped under every name. WooCommerce's clearfix
   pseudo-elements on each item would count as flex items, so they go. */
.nrg-shop-sidebar .nrg-shop-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.nrg-shop-sidebar .nrg-shop-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item::before,
.nrg-shop-sidebar .nrg-shop-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item::after { content: none; display: none; }

.nrg-shop-sidebar .nrg-shop-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a { display: inline; }


/* --------------------------------------------------------------------------
   26. RELATED PRODUCTS (single product pages)
   The product template's Related Products module carries the classes
   "nrg-products nrg-related", so §18 gives its cards the homepage
   treatment: keyline card, growing green rule, image well, name, then the
   price and "View system" on the bottom edge. This section styles only
   what the module adds around the cards.
   -------------------------------------------------------------------------- */

/* Only the section's own heading — the card titles are h2 elements too. */
.nrg-related .related > h2 {
  margin: 0 0 30px;
  font-family: var(--nrg-font-display);
  font-size: clamp(24px, 2.3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--nrg-ink);
}

/* A square image well, as on the catalog, so the three cards' names,
   prices and links start on the same lines. */
.nrg-related ul.products li.product .et_shop_image img {
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 240px;
}

/* The Divi tablet inline rule (§25's note) reaches these cards too. */
.nrg-related.nrg-products ul.products li.product:nth-child(n) {
  width: auto !important;
  margin: 0 !important;
}

/* Complete Systems say "View system"; anything else says "View details". */
.nrg-related ul.products li.product:not(.product_cat-complete-systems) a.woocommerce-loop-product__link::after {
  content: "View details";
}


/* --------------------------------------------------------------------------
   27. HEADER — ONE ROW AT LAPTOP WIDTHS
   Both Theme Builder headers (29, and 366 on the homepage) put the menu in
   the middle column of a 1/5 · 3/5 · 1/5 row at 90% width. Between 1200 and
   1599px that column is too narrow for the seven capitalised items, so the
   menu wrapped to a second row (site-template-v1.md §13.6). Here the logo
   and button columns size to their content and the menu takes the rest,
   with the item gap and size stepped down, so the menu holds one row on
   laptops. Above 1600px the columns return to their set widths; below
   1200px the menu wraps as before, and below 981px Divi's stacked mobile
   header is untouched. The row's width is not changed, so the logo stays
   on the 5% grid line.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1599px) {
  .et-l--header .et_pb_row {
    display: flex;
    align-items: center;
  }
  .et-l--header .et_pb_row > .et_pb_column {
    margin-right: 24px !important;
  }
  .et-l--header .et_pb_row > .et_pb_column:last-child { margin-right: 0 !important; }
  .et-l--header .et_pb_row > .et_pb_column:first-child,
  .et-l--header .et_pb_row > .et_pb_column:last-child { flex: 0 0 auto; width: auto; }
  .et-l--header .et_pb_row > .et_pb_column:nth-child(2) { flex: 1 1 auto; width: auto; min-width: 0; }
  .et-l--header .et_pb_image img { max-width: 170px; }
  .et-l--header .et_pb_menu .et-menu > li {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .et-l--header .et_pb_menu .et-menu > li > a {
    white-space: nowrap;
    font-size: clamp(11.5px, 0.92vw, 14px) !important;
  }
  .et-l--header .et_pb_button { white-space: nowrap; }
}


/* --------------------------------------------------------------------------
   28. FOOTER — THE TEMPLATE'S ENTRANCE
   The Theme Builder footer (layout 160) renders on every page. Its columns
   rise and fade in as the footer scrolls into view — the homepage entrance,
   done in CSS so the layout itself needs no animation settings — and the
   NRGPAL wordmark gets §4's letter reveal (nrgpal-motion.js v1.1 watches
   .et-l--footer). Gated behind html.nrg-js: without the script, or under
   reduced motion, nothing is ever hidden.
   -------------------------------------------------------------------------- */

html.nrg-js .et-l--footer .et_pb_column {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--nrg-ease-out), transform .7s var(--nrg-ease-out);
}

html.nrg-js .et-l--footer .et_pb_column.is-in {
  opacity: 1;
  transform: none;
}

html.nrg-js .et-l--footer .et_pb_column.is-in:nth-child(2) { transition-delay: .11s; }
html.nrg-js .et-l--footer .et_pb_column.is-in:nth-child(3) { transition-delay: .22s; }
html.nrg-js .et-l--footer .et_pb_column.is-in:nth-child(4) { transition-delay: .33s; }


/* --------------------------------------------------------------------------
   29. SOLAR NEWS — LIST AND SIDEBAR
   The index (652) runs a 2/3 + 1/3 split: the article grid left (Divi's
   blog grid layout — Jeffrey's call, 23 Sep evening), the sidebar right
   (search, categories, latest, the eligibility box). The cards carry
   §18's treatment — keyline, the green rule that grows on hover, lift —
   and rise in on scroll: nrgpal-motion.js v1.1 watches them and the
   related grid (§30).
   -------------------------------------------------------------------------- */

/* — The grid card: §18's card language on Divi's blog-grid markup. Divi
     gives each grid item its own box (19px padding, #d8d8d8 border); the
     template restates both so the cards match the product cards. */
.nrg-blog-list article.et_pb_post {
  position: relative;
  margin: 0 0 24px !important;
  padding: 0 0 22px !important;
  background-color: #FFFFFF;
  border: 1px solid var(--nrg-border) !important;
  transition: transform .45s var(--nrg-ease-out), border-color .3s ease;
}

.nrg-blog-list article.et_pb_post::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  z-index: 1;
  background-color: var(--nrg-green);
  transform: scaleX(.22);
  transform-origin: 0 50%;
  transition: transform .6s var(--nrg-ease-out);
}

.nrg-blog-list article.et_pb_post:hover { transform: translateY(-4px); border-color: #C7CDC9 !important; }
.nrg-blog-list article.et_pb_post:hover::before { transform: scaleX(1); }

.nrg-blog-list article.et_pb_post .et_pb_image_container {
  margin: 0 0 20px !important;
  overflow: hidden;
}

.nrg-blog-list article.et_pb_post .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform .8s var(--nrg-ease-out);
}

.nrg-blog-list article.et_pb_post:hover .entry-featured-image-url img { transform: scale(1.04); }

.nrg-blog-list article.et_pb_post .entry-title {
  margin: 0 24px 10px !important;
  padding: 0 !important;
}

.nrg-blog-list article.et_pb_post .entry-title a { color: var(--nrg-ink); }
.nrg-blog-list article.et_pb_post .entry-title a:hover { color: var(--nrg-green); }

.nrg-blog-list article.et_pb_post .post-meta {
  margin: 0 24px 12px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nrg-blog-list article.et_pb_post .post-meta a { color: var(--nrg-green); }

.nrg-blog-list article.et_pb_post .post-content {
  margin: 0 24px 0;
  padding: 0 !important;
}

.nrg-blog-list a.more-link {
  display: inline-block;
  margin-top: 14px;
  padding: 0 24px 3px 0;
  font-family: var(--nrg-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nrg-ink);
  border-bottom: 2px solid var(--nrg-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101613' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: 100% 50%;
}

/* Entrance: rise in as each card scrolls into view. Gated on nrg-js so
   nothing is hidden without the script; once in, transform snaps back to
   the hover's own timing so the lift never feels laggy. */
html.nrg-js .nrg-blog-list article.et_pb_post {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--nrg-ease-out), transform .7s var(--nrg-ease-out), border-color .3s ease;
}

html.nrg-js .nrg-blog-list article.et_pb_post.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--nrg-ease-out), transform .45s var(--nrg-ease-out), border-color .3s ease;
}

/* — Pagination: square keyline boxes, as the Catalog's. */
.nrg-blog-main .pagination { margin-top: 8px; }
.nrg-blog-main .pagination a {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--nrg-border);
  background-color: #FFFFFF;
  font-family: var(--nrg-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--nrg-ink);
  transition: border-color .25s ease;
}
.nrg-blog-main .pagination a:hover { border-color: var(--nrg-green); }

/* — Sidebar. */
.nrg-sidebar .nrg-side-box h3 {
  font-family: var(--nrg-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The sidebar boxes carry the box family's green rule, without .nrg-box
   itself: its height:100% would stretch a box to fill the equalised
   column (the 23 Sep whitespace bug). */
.nrg-sidebar .nrg-side-box { position: relative; }

.nrg-sidebar .nrg-side-box:not(.nrg-side-box--label)::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background-color: var(--nrg-green);
  transform: scaleX(.22);
  transform-origin: 0 50%;
  transition: transform .6s var(--nrg-ease-out);
}

.nrg-sidebar .nrg-side-box:not(.nrg-side-box--label):hover::before { transform: scaleX(1); }

/* Category rows: block links with keylines, count-free. */
.nrg-sidebar .nrg-side-box:not(.nrg-side-box--cta) p a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--nrg-border);
  font-family: var(--nrg-font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--nrg-ink) !important;
  text-decoration: none;
  transition: color .25s ease, padding-left .25s ease;
}
.nrg-sidebar .nrg-side-box:not(.nrg-side-box--cta) p a:last-child { border-bottom: 0; padding-bottom: 2px; }
.nrg-sidebar .nrg-side-box:not(.nrg-side-box--cta) p a:hover { color: var(--nrg-green) !important; padding-left: 4px; }
.nrg-sidebar .nrg-side-box:not(.nrg-side-box--cta) p a br { display: none; }

/* The "Latest articles" label box carries no bottom border, and the list
   below carries no top border, so the two read as one panel. */
.nrg-side-latest {
  border: 1px solid var(--nrg-border);
  border-top: 0;
  background-color: #FFFFFF;
  padding: 0 26px 10px;
}

.nrg-side-latest article.et_pb_post {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.nrg-side-latest article.et_pb_post .et_pb_image_container,
.nrg-side-latest article.et_pb_post > a.entry-featured-image-url {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0 !important;
}

.nrg-side-latest .entry-featured-image-url img {
  display: block;
  width: 76px;
  height: 64px;
  object-fit: cover;
}

.nrg-side-latest .entry-title {
  grid-column: 2;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
.nrg-side-latest .entry-title a { color: var(--nrg-ink); }
.nrg-side-latest .entry-title a:hover { color: var(--nrg-green); }
.nrg-side-latest .post-meta { grid-column: 2; margin: 0 !important; }

/* Search: square field, green square submit. */
.nrg-side-search .et_pb_searchform {
  border: 1px solid var(--nrg-border);
  background-color: #FFFFFF;
}
.nrg-side-search .et_pb_searchform input.et_pb_s {
  padding: 15px 16px !important;
  border-radius: 0;
}
.nrg-side-search .et_pb_searchform input.et_pb_searchsubmit,
.nrg-side-search .et_pb_searchform button {
  border-radius: 0;
  font-family: var(--nrg-font-display);
  font-weight: 700;
}

@media (max-width: 980px) {
  .nrg-blog-list article.et_pb_post:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   30. SINGLE POST — CHIPS, PREVIOUS/NEXT, RELATED
   The Theme Builder body layout (714, template 715) renders the article
   full-bleed and adds the Deon-style footer: "Filed under" chips for
   categories and tags, a previous/next pair inside the same category, and
   a three-card "Keep reading" grid that reuses the card language of §18.
   -------------------------------------------------------------------------- */

/* — Chips. Categories in ink, tags muted. Empty tag modules render nothing. */
.nrg-chips .et_pb_text_inner { line-height: 1; }

.nrg-chips a {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 9px 14px 8px;
  border: 1px solid var(--nrg-border);
  font-family: var(--nrg-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nrg-ink) !important;
  transition: border-color .25s ease, color .25s ease;
}

.nrg-chips a:hover { border-color: var(--nrg-green); color: var(--nrg-green) !important; }

.nrg-chips--tags a { color: var(--nrg-ink-muted, #5B6B78) !important; font-weight: 600; }

/* — Previous / next, in category. Each side is a keyline card with a
     small label; a missing side simply leaves its cell empty. */
.nrg-post-nav.et_pb_posts_nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.nrg-post-nav span.nav-previous { grid-column: 1; }
.nrg-post-nav span.nav-next { grid-column: 2; text-align: right; }

.nrg-post-nav span a {
  display: block;
  height: 100%;
  padding: 20px 22px 22px;
  border: 1px solid var(--nrg-border);
  background-color: #FFFFFF;
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--nrg-ink);
  transition: border-color .3s ease, transform .45s var(--nrg-ease-out);
}

.nrg-post-nav span a:hover { border-color: #C7CDC9; transform: translateY(-3px); }

.nrg-post-nav span a::before {
  display: block;
  margin-bottom: 8px;
  font-family: var(--nrg-font-body, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A938E;
}

.nrg-post-nav span.nav-previous a::before { content: "Previous"; }
.nrg-post-nav span.nav-next a::before { content: "Next"; }
.nrg-post-nav .meta-nav { color: var(--nrg-green); }

@media (max-width: 767px) {
  .nrg-post-nav.et_pb_posts_nav { grid-template-columns: 1fr; }
  .nrg-post-nav span.nav-next { grid-column: 1; text-align: left; }
}

/* — Related cards: the §18 card, on the blog module's grid markup. */
.nrg-rel-grid article.et_pb_post {
  position: relative;
  margin: 0 0 24px !important;
  padding: 0 0 22px !important;
  background-color: #FFFFFF;
  border: 1px solid var(--nrg-border);
}

.nrg-rel-grid article.et_pb_post::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  z-index: 1;
  background-color: var(--nrg-green);
  transform: scaleX(.22);
  transform-origin: 0 50%;
  transition: transform .6s var(--nrg-ease-out);
}

.nrg-rel-grid article.et_pb_post:hover { border-color: #C7CDC9; }
.nrg-rel-grid article.et_pb_post:hover::before { transform: scaleX(1); }

.nrg-rel-grid article.et_pb_post .et_pb_image_container { margin: 0 0 18px !important; overflow: hidden; }

.nrg-rel-grid .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform .8s var(--nrg-ease-out);
}

.nrg-rel-grid article.et_pb_post:hover .entry-featured-image-url img { transform: scale(1.04); }

.nrg-rel-grid .entry-title { margin: 0 22px 8px !important; padding: 0 !important; }
.nrg-rel-grid .entry-title a { color: var(--nrg-ink); }
.nrg-rel-grid .entry-title a:hover { color: var(--nrg-green); }

.nrg-rel-grid .post-meta {
  margin: 0 22px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nrg-rel-grid .post-meta a { color: var(--nrg-green); }

html.nrg-js .nrg-rel-grid article.et_pb_post {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--nrg-ease-out), transform .7s var(--nrg-ease-out), border-color .3s ease;
}

html.nrg-js .nrg-rel-grid article.et_pb_post.is-in {
  opacity: 1;
  transform: none;
}

/* A post without a featured image keeps a clean card: the text takes the
   full width instead of leaving an empty image column. */
.nrg-blog-list article.et_pb_post.et_pb_no_thumb .entry-title { margin-top: 22px !important; }
.nrg-rel-grid article.et_pb_post.et_pb_no_thumb .entry-title { margin-top: 22px !important; }
.nrg-side-latest article.et_pb_post.et_pb_no_thumb { grid-template-columns: minmax(0, 1fr); }

/* — "Add to my quote" (single product, §26's page): the homepage primary
     button, drawn directly on WooCommerce's own markup so it depends on
     nothing from Divi's button machinery. The quantity field matches:
     square, keyline, display type. Module class: nrg-atc (layout 510). */
.nrg-atc form.cart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.nrg-atc form.cart .quantity {
  display: flex;
  margin: 0 !important;
  float: none !important;
}

.nrg-atc form.cart .quantity input.qty {
  width: 84px;
  min-height: 54px;
  padding: 0 6px 0 14px;
  border: 1px solid #C7CDC9;
  border-radius: 0;
  background-color: #FFFFFF;
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nrg-ink);
  text-align: center;
}

.nrg-atc form.cart .quantity input.qty:focus {
  outline: 2px solid var(--nrg-green);
  outline-offset: -1px;
}

body #page-container .nrg-atc form.cart button.single_add_to_cart_button,
body #page-container .nrg-atc form.cart button.single_add_to_cart_button:hover {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin: 0;
  padding: 0 0 0 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #F7921A !important;
  background-image: none !important;
  font-family: var(--nrg-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  line-height: 1 !important;
  color: #FFFFFF !important;
  cursor: pointer;
  transition: background-color .2s ease;
}

body #page-container .nrg-atc form.cart button.single_add_to_cart_button::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  align-self: stretch;
  flex: 0 0 54px;
  width: 54px;
  margin: 0 0 0 24px !important;
  font-size: 0 !important;
  background-color: rgba(16, 22, 19, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
  transition: background-color .2s ease, background-position .3s var(--nrg-ease-out);
}

body #page-container .nrg-atc form.cart button.single_add_to_cart_button:hover::after {
  background-color: rgba(16, 22, 19, .3);
  background-position: calc(50% + 3px) calc(50% - 3px);
}

@media (max-width: 480px) {
  .nrg-atc form.cart button.single_add_to_cart_button { flex: 1 1 auto; justify-content: space-between; }
}


/* --------------------------------------------------------------------------
   31. ARTICLE MODEL v2 — PLAIN-HTML POSTS
   Articles 4 onward are written as clean semantic HTML (editable in
   wp-admin), not Divi shortcodes, and rendered by the single-post
   template's full-width Post Content module. This section is their whole
   design, matching articles 1–3's look: dark hero band, 880px measure,
   the a1-style tables and callouts, and the dark closing CTA.
   -------------------------------------------------------------------------- */

.nrg-art-hero {
  background-color: #101613;
  padding: 100px 0 80px;
}

.nrg-art-hero .nrg-art-inner,
.nrg-art-body,
.nrg-art-cta .nrg-art-inner {
  width: 88%;
  max-width: 880px;
  margin: 0 auto;
}

.nrg-art-kicker {
  margin: 0 0 10px;
  font-family: var(--nrg-font-body, Inter, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8CC63C;
}

.nrg-art-hero h1 {
  margin: 0;
  font-family: var(--nrg-font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.22;
  color: #FFFFFF;
}

.nrg-art-lead {
  margin: 18px 0 0;
  max-width: 700px;
  font-size: 18px !important;
  line-height: 1.7;
  color: #8A97A0;
}

.nrg-art-dates {
  margin: 20px 0 0;
  font-size: 14px !important;
  color: #8A97A0;
}

/* — Body copy, on the 880px measure. */
.nrg-art-body { padding: 64px 0 40px; }

.nrg-art-body p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: #3E4A45;
}

.nrg-art-body h2 {
  margin: 38px 0 14px;
  font-family: var(--nrg-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--nrg-ink);
}

.nrg-art-body h3 {
  margin: 28px 0 10px;
  font-family: var(--nrg-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--nrg-ink);
}

.nrg-art-body ul,
.nrg-art-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.nrg-art-body li {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.7;
  color: #3E4A45;
}

.nrg-art-body a { color: #1676BA; }

/* The a1-style comparison table. */
.nrg-art-body table {
  width: 100%;
  margin: 18px 0 24px;
  border-collapse: collapse;
  font-size: 15px;
}

.nrg-art-body th {
  padding: 10px 12px;
  background-color: #F1F3F1;
  border-bottom: 2px solid #E2E6E3;
  font-family: var(--nrg-font-display);
  font-weight: 700;
  text-align: left;
  color: var(--nrg-ink);
}

.nrg-art-body td {
  padding: 10px 12px;
  border-bottom: 1px solid #E5E9EA;
  color: #3E4A45;
}

/* Callout: the brand's rebate-callout treatment on a plain blockquote. */
.nrg-art-body blockquote {
  margin: 24px 0;
  padding: 22px 26px;
  background-color: #EAF3DE;
  border-left: 3px solid var(--nrg-green);
}

.nrg-art-body blockquote p {
  margin: 0;
  color: #3A6B1E;
}

/* Sources and the verification line. */
.nrg-art-src {
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--nrg-border);
}

.nrg-art-src p {
  margin: 0 0 6px;
  font-size: 13px !important;
  line-height: 1.7;
  color: #8A938E;
}

.nrg-art-src a { color: #1676BA; }

/* — Closing CTA band, as on articles 1–3. */
.nrg-art-cta {
  background-color: #101613;
  padding: 70px 0;
  margin-top: 40px;
}

.nrg-art-cta h2 {
  margin: 0;
  font-family: var(--nrg-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #FFFFFF;
}

.nrg-art-cta p {
  margin: 16px 0 0;
  max-width: 700px;
  font-size: 16px;
  line-height: 1.75;
  color: #8A97A0;
}

.nrg-art-cta a.nrg-art-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 26px;
  background-color: #F7921A;
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color .2s ease;
}

.nrg-art-cta a.nrg-art-btn:hover { background-color: #f3bd36; }

@media (max-width: 767px) {
  .nrg-art-hero { padding: 56px 0 44px; }
  .nrg-art-body { padding: 44px 0 24px; }
  .nrg-art-cta { padding: 48px 0; }
}

/* ==========================================================================
   §32  System pages — 25 September 2026
   The quote basket (My Quote), the account page, and the Theme Builder
   bodies for Solar News archives, search results and the 404 page.
   WooCommerce's cart and login form and Divi's Post Title module sit inside
   template sections; these rules give them the brand treatment: square
   keylines, Sora labels, orange only on the one primary action.
   ========================================================================== */

/* Archive and search titles come from Divi's Post Title module. It sits in
   a dark hero, so its heading is white whatever Divi's text-colour class. */
.nrg-page-hero .et_pb_post_title { margin-bottom: 0; padding: 0; background: none; }
.nrg-page-hero .et_pb_post_title .et_pb_title_container { padding: 0; }
.nrg-page-hero .et_pb_post_title h1.entry-title { color: #FFFFFF; padding-bottom: 0; }

/* The search field in a dark hero keeps its keyline visible. */
.nrg-on-dark .nrg-side-search .et_pb_searchform { border-color: #26332C; }

/* Quote basket (My Quote): the WooCommerce cart table and totals. */
.nrg-basket .woocommerce table.shop_table {
  border: 1px solid var(--nrg-border);
  border-radius: 0;
  border-collapse: collapse;
  margin: 0 0 32px;
}
.nrg-basket .woocommerce table.shop_table th {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--nrg-ink);
  background: #F1F3F1;
  padding: 16px 18px;
}
.nrg-basket .woocommerce table.shop_table td {
  border-top: 1px solid var(--nrg-border);
  padding: 18px;
  vertical-align: middle;
}
.nrg-basket .woocommerce table.shop_table td.product-name a {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  color: var(--nrg-ink);
  text-decoration: none;
}
.nrg-basket .woocommerce table.shop_table img { width: 72px; height: auto; border-radius: 0; }
.nrg-basket .woocommerce .cart-collaterals .cart_totals {
  border: 1px solid var(--nrg-border);
  padding: 26px 28px 30px;
}
.nrg-basket .woocommerce .cart-collaterals .cart_totals table { border: 0; }
.nrg-basket .woocommerce button.button[name="update_cart"] {
  background: transparent;
  color: var(--nrg-ink);
  border: 1px solid #C7CDC9;
  border-radius: 0;
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 14px;
}

/* Empty basket and account notices: the brand's subtle callout, not
   WooCommerce's blue info bar. */
.nrg-basket .woocommerce .cart-empty.woocommerce-info,
.nrg-account .woocommerce .woocommerce-info,
.nrg-account .woocommerce .woocommerce-message {
  background: #EAF3DE;
  color: #3A6B1E;
  border: 0;
  border-left: 3px solid var(--nrg-green);
  border-radius: 0;
  padding: 22px 26px;
  font-family: var(--nrg-font-body);
  font-size: 16px;
}
.nrg-basket .woocommerce .cart-empty.woocommerce-info::before,
.nrg-account .woocommerce .woocommerce-info::before,
.nrg-account .woocommerce .woocommerce-message::before { display: none; }

/* The one primary action on each page: orange, square, Sora. */
.nrg-basket .woocommerce .return-to-shop .button,
.nrg-account .woocommerce button.button {
  display: inline-block;
  background: var(--nrg-orange);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
  padding: 14px 26px;
}
.nrg-basket .woocommerce .return-to-shop .button:hover,
.nrg-account .woocommerce button.button:hover { background: var(--nrg-orange-hover); color: #FFFFFF; }
.nrg-basket .woocommerce .return-to-shop .button::after,
.nrg-account .woocommerce button.button::after { display: none; }

/* Account: the login form. */
.nrg-account .woocommerce h2 {
  font-family: var(--nrg-font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--nrg-ink);
  margin: 0 0 18px;
}
.nrg-account .woocommerce form.login {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.nrg-account .woocommerce form .form-row input.input-text {
  border: 1px solid var(--nrg-border);
  border-radius: 0;
  padding: 12px 14px;
  background: #FFFFFF;
}

/* ==========================================================================
   §33  Catalog — "How to choose" guide below the grid (28 Sep 2026)
   template-shop-catalog.php renders page 14's content from its first <h2>
   onward as section.nrg-shop-guide, below the grid. Until that content is
   added (after Zak reads the copy), nothing here renders.
   ========================================================================== */
.nrg-shop-guide { margin: 96px 0 0; padding: 72px 0 0; border-top: 1px solid var(--nrg-border); }
.nrg-shop-guide h2 { font-family: var(--nrg-font-display); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -0.5px; color: var(--nrg-ink); max-width: 24ch; margin: 0 0 18px; padding: 0; }
.nrg-shop-guide > p { font-size: 17px; line-height: 1.7; color: var(--nrg-ink-2); max-width: 64ch; margin: 0 0 12px; padding: 0; }
.nrg-shop-guide__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 40px 0 32px; }
.nrg-shop-guide__step { background: #FFFFFF; border: 1px solid var(--nrg-border); padding: 28px 26px 30px; }
.nrg-shop-guide__step img { display: block; width: 100%; height: 180px; object-fit: contain; margin: 0 0 22px; }
.nrg-shop-guide__step h3 { font-family: var(--nrg-font-display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--nrg-ink); margin: 0 0 10px; padding: 0; }
.nrg-shop-guide__step p { font-size: 15px; line-height: 1.65; color: var(--nrg-ink-2); margin: 0; padding: 0; }
.nrg-shop-guide a { color: var(--nrg-ink); text-decoration: underline; text-decoration-color: var(--nrg-green); text-underline-offset: 3px; }
@media (max-width: 980px) { .nrg-shop-guide__steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   §34  Mobile menu — 28 September 2026
   Moved from Customize → Additional CSS ("Mobile Menu Fix", 26 Sep), where
   it sat while the Hostinger CDN blocked theme writes. Two fixes:
   - The old block set the list itself to display:flex, which beat Divi's
     hidden default, so on phones the menu showed open on every page load.
     The list no longer sets display, and the closed rule keeps it hidden
     until the menu bar is tapped; Divi opens and closes it as normal.
   - The header menu modules set their dropdown background to transparent
     (.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu, !important), so
     the page showed through the open menu. The panel is now solid, in the
     header's dark green, with white links and dark dividers. The 26 Sep
     colours were for a white panel and lost to the modules' white links.
   ========================================================================== */

/* Hamburger icon — brand green (#009341) */
.et_mobile_nav_menu .mobile_menu_bar,
.et_mobile_nav_menu .mobile_menu_bar::before,
.et_mobile_nav_menu .mobile_menu_bar::after {
  background-color: #009341 !important;
  transition: background-color 0.18s ease;
}

/* Closed means hidden. */
.et_mobile_nav_menu .mobile_nav.closed .et_mobile_menu { display: none; }

/* The open panel: solid dark green with a green top rule. These selectors
   outrank the menu modules' transparent dropdown background. */
html body .et-l--header .et_pb_menu .et_mobile_menu,
html body .et-l--header .et_pb_menu .et_mobile_menu ul {
  background-color: #0A1712 !important;
}
html body .et-l--header .et_pb_menu .et_mobile_menu { border-top-color: #009341; }
html body .et-l--header .et_pb_menu .et_mobile_menu .sub-menu { background-color: #0F231B !important; }
html body .et-l--header .et_pb_menu .et_mobile_menu .sub-menu .sub-menu { background-color: #0A1712 !important; }

/* Links on the dark panel: white, then lighter greys for the sub-levels, and
   lime on hover (lime is accent text on dark only, per the brand rules). */
html body .et-l--header .et_pb_menu .et_mobile_menu > li > a { color: #FFFFFF !important; }
html body .et-l--header .et_pb_menu .et_mobile_menu .sub-menu li a { color: #C9D4CE !important; }
html body .et-l--header .et_pb_menu .et_mobile_menu .sub-menu .sub-menu li a { color: #8A97A0 !important; }
html body .et-l--header .et_pb_menu .et_mobile_menu > li > a:hover,
html body .et-l--header .et_pb_menu .et_mobile_menu .sub-menu li a:hover,
html body .et-l--header .et_pb_menu .et_mobile_menu .sub-menu .sub-menu li a:hover { color: #8CC63C !important; }

/* Mobile menu wrapper */
.et_mobile_menu { width: 100%; }

/* Main menu items */
.et_mobile_menu > li {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #26332C;
  display: flex;
  flex-direction: column;
}

.et_mobile_menu > li > a {
  padding: 14px 18px !important;
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  border: none;
  text-decoration: none;
}

.et_mobile_menu > li > a:hover {
  background-color: #0F231B;
}

/* Submenu styling */
.et_mobile_menu .sub-menu {
  width: 100%;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #26332C;
}

.et_mobile_menu .sub-menu li {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #26332C;
  display: flex;
  flex-direction: column;
}

.et_mobile_menu .sub-menu li:last-child {
  border-bottom: none;
}

.et_mobile_menu .sub-menu li a {
  padding: 10px 18px 10px 36px !important;
  display: block;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.4;
}

.et_mobile_menu .sub-menu li a:hover {
  background-color: #0A1712;
}

/* Second-level submenu (nested submenu) */
.et_mobile_menu .sub-menu .sub-menu {
  border-top: 1px solid #26332C;
}

.et_mobile_menu .sub-menu .sub-menu li a {
  padding: 8px 18px 8px 54px !important;
  font-size: 13px;
  font-weight: 400;
}

.et_mobile_menu .sub-menu .sub-menu li a:hover {
  background-color: #0F231B;
}

/* Menu item with children indicator */
.et_mobile_menu li.menu-item-has-children > a::after {
  content: " ▾";
  font-size: 11px;
  opacity: 0.6;
  margin-left: 4px;
}

/* Tighter padding on small screens */
@media (max-width: 600px) {
  .et_mobile_menu > li > a {
    padding: 12px 16px !important;
  }

  .et_mobile_menu .sub-menu li a {
    padding: 8px 16px 8px 32px !important;
  }

  .et_mobile_menu .sub-menu .sub-menu li a {
    padding: 6px 16px 6px 48px !important;
  }
}

/* ==========================================================================
   §35  Product gallery: no jump while the slider starts — 1 October 2026
   The product pages measured a layout shift of 1.112 (24 Sep, mobile). The
   cause is WooCommerce's gallery slider starting up: it widens the slide row
   to several times the column before it sizes the slides, so for a moment
   the gallery is 1,673px tall on a phone (2,690px on a laptop) and then
   snaps back, pushing the title, price and button down and up again. The
   row of thumbnails also appears only once the slider has started.
   - Each slide is held to the gallery's own width (container units) and
     laid out in a row inside the slider window from the start, so the
     start-up can't stack or stretch the slides.
   - Before the slider starts, the extra images sit as square thumbnails at
     the width and spacing of the slider's thumbnail row, so the gallery is
     already its final height. Checked at 412, 820 and 1366px: the gallery
     height no longer changes while the page loads.
   The direct-child selectors (gallery > wrapper) only match before the
   slider wraps the images in its .flex-viewport, so the slides themselves
   keep their own shape afterwards.
   ========================================================================== */

.woocommerce-product-gallery { container-type: inline-size; }
.woocommerce-product-gallery .woocommerce-product-gallery__image { max-width: 100cqw; }
.woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper {
  display: flex;
  align-items: flex-start;
}
.woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { flex: 0 0 100cqw; }

.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child { flex: 0 0 100%; }
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
  flex: 0 0 20%;
  width: 20%;
  margin: 6.667% 0;
}
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Added after the live check on 1 October: once the slider starts, it builds
   its thumbnail row from new thumbnail images that have no size until they
   download. On a first visit the row is empty for a moment (71px on a phone,
   145px on a tablet), so everything below the gallery jumps up and back.
   Each thumbnail now gets a square box from the start (WooCommerce's gallery
   thumbnails are square crops). */
.woocommerce-product-gallery .flex-control-thumbs li img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}