/* Products hub and the inverter family page — only the rules the shared layer
   does not carry. The palette, the spacing, the card grid and the drawings come
   from assets/css/tokens.css, assets/css/sections.css, assets/css/pages.css,
   assets/css/illustrations.css and style.css; nothing is redefined here.

   This stylesheet is enqueued site-wide (functions.php), so every rule is
   scoped: the hub's rules carry a .products- class that only its template
   prints, and the how-it-works, advantages and matching rules below are scoped
   to the inverter family page's own sections, which no other template renders.
   The hub keeps the shared .panel, .lift, .media-frame, .specs, .pill-list,
   .feature, .card-grid, .note-line and .text-link styling. */

/* --------------------------------------------------------- Products hub -- */
/* The three product lines: one row of equal cards. The picture takes the pale
   frame the site's cards use, the specification list is the basis each line is
   read on, and the card's own link keeps the foot of the card, so the three
   cards read as one row however long their notes are. */
.products-line .media-frame{margin:0 0 22px}
.products-line .specs{margin-top:22px}

/* The secondary entry to System Components: a quiet row under the three cards,
   at less weight than they carry. The parts it names sit on the left and the
   way in on the right, and the row wraps on its own. */
.products-components{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 40px;
  margin-top:var(--space-4);
  padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-pale);
}
.products-components__label{display:flex;align-items:center;gap:14px;min-width:0;margin:0}
.products-components__icon{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-accent);
}
.products-components__title{display:block;font-size:16px;font-weight:600;color:var(--color-heading)}
.products-components__note{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--color-muted)}
.products-components__link{flex:none;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--color-accent);text-decoration:none}
.products-components__link:hover,.products-components__link:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* A related link inside a section: the shared .text-link in a framed row, the
   way a link reads in a card elsewhere on the site. The grid wraps on its own,
   so one link takes the full width and three share it. */
.products-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:26px 0 0;padding:0;list-style:none}
.products-links > li{margin:0}
.products-links .text-link{align-items:center;padding:13px 16px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-navy);transition:border-color var(--transition-fast),background var(--transition-fast)}
.products-links .text-link .arrow{color:var(--color-accent)}
.products-links .text-link:hover,.products-links .text-link:focus-visible{border-color:var(--color-accent);background:var(--color-accent-pale)}
.products-links--one{max-width:420px}

/* One arrangement, drawn and described. The section behind it is the pale band,
   so the drawing's own panel takes the white ground the rest of the page's
   cards use rather than the pale grey, which would disappear into the section.
   The optional backup is the one dashed pill, so the main chain reads first and
   the branch is marked as a choice. */
.products-page .diagram-panel{background:var(--color-surface)}
.products-page .feature__body .pill-list{margin-top:22px}
.pill-list .products-pill{border-style:dashed;background:var(--color-surface)}

/* The eight components and the four water sources share one card shape: a
   picture or a line icon, the name, one line, and — for a water source — the
   links that open the line it is read on. */
.products-part .media-frame{margin:0 0 20px}
.products-source__head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.products-source__icon{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}
.products-source__head .panel__title{margin:0}
.products-source__links{display:grid;gap:9px;margin:auto 0 0;padding:22px 0 0;list-style:none}
.products-source__links .text-link{justify-content:flex-start;gap:10px;font-size:13px;color:var(--color-accent)}
.products-source__links .text-link:hover,.products-source__links .text-link:focus-visible{color:var(--color-accent-dark);text-decoration:underline;text-underline-offset:4px}

/* A browser that asks for less motion gets the colour change without the
   transition, as everywhere else on the site. */
@media (prefers-reduced-motion:reduce){
  .products-links .text-link{transition:none}
}

/* The inverter family page: the advantages section. The six strengths are the
   shared card grid with a picture and one line each; the note under them keeps
   its own spacing. */
#inverter-advantages .product-note{margin:24px 0 0}

/* The inverter family page: the how-it-works section. The energy path is an
   inline diagram (components/energy-path.php) rather than a photograph: the
   power path, the optional grid or generator input and the remote layer, with
   the two branch layers held back from the power path. Two arrangements are in
   the markup — a wide one and a stacked one — and one is shown at a time. The
   diagram's own rules are prefixed ep-, so they reach nothing else on the page. */
#inverter-how .energy-path{margin-top:8px}
#inverter-how .energy-path + .caption{margin-top:20px}
.energy-path__svg{display:block;width:100%;height:auto}
.energy-path__svg--wide{display:none}
.energy-path__svg--stack{max-width:400px;margin:0 auto}
@media(min-width:900px){
  .energy-path__svg--stack{display:none}
  .energy-path__svg--wide{display:block;max-width:1000px;margin:0 auto}
}

/* A node: its box, its line drawing and its label. The inverter is the one
   accent box, and the two branch layers keep the quiet grey, so the power path
   reads first. */
.ep-node__box{fill:var(--color-surface);stroke:var(--color-line);stroke-width:1.5;transition:stroke var(--transition-fast),stroke-width var(--transition-fast),filter var(--transition-fast)}
.ep-node[data-tone="accent"] .ep-node__box{fill:var(--color-accent-pale);stroke:var(--color-accent);stroke-width:2}
.ep-node[data-tone="quiet"] .ep-node__box{fill:var(--color-pale)}
.ep-node[data-tone="power"],.ep-node[data-tone="accent"]{color:var(--color-accent)}
.ep-node[data-tone="quiet"]{color:var(--color-muted)}
.ep-node__icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ep-node__label{font-family:var(--font-body);font-size:var(--ep-fs,14px);font-weight:600;fill:var(--color-heading)}

/* A layer caption: the small sun-yellow rule the site's eyebrows carry, and the
   layer's own name, which is the page's wording for it. */
.ep-caption__bar{fill:var(--color-sun)}
.ep-caption__text{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--color-muted)}
.ep-backup{font-family:var(--font-body);font-size:12px;font-weight:600;fill:var(--color-accent);opacity:0;transition:opacity var(--transition-fast)}

/* A link: the line, its arrowhead and the travelling highlight on the power
   path. The grid or generator feed is the quiet grey, and the monitoring path is
   dashed as well, so the three layers never read as one. Every part of a link
   takes its colour from the link itself, so one property lights the whole path
   when a node it belongs to is pointed at. */
.ep-link{color:var(--color-accent);transition:opacity var(--transition-fast),color var(--transition-fast)}
.ep-link[data-kind="ac"],.ep-link[data-kind="data"]{color:var(--color-field-line)}
.ep-link__line{fill:none;stroke:currentColor;stroke-width:2;transition:stroke-width var(--transition-fast)}
.ep-link__head{fill:currentColor;stroke:none}
.ep-link[data-kind="ac"] .ep-link__line{stroke-width:1.5}
.ep-link[data-kind="data"] .ep-link__line{stroke-width:1.5;stroke-dasharray:5px 5px}

/* The inverter family page: the matching section. The need-and-answer table
   scrolls inside its own box on a narrow screen rather than breaking the page,
   and the two flow lines keep the shared navy band from style.css. The template
   now carries the two matching checklists in place of the table and the chains,
   so these rules are kept as the pattern the section was built from. */
#inverter-match .advantage-table-wrap{margin-top:26px;overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
#inverter-match .advantage-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;text-align:left}
#inverter-match .advantage-table th,#inverter-match .advantage-table td{padding:15px 20px;border-bottom:1px solid var(--color-line);vertical-align:top}
#inverter-match .advantage-table thead th{padding-block:13px;background:var(--color-pale);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap}
#inverter-match .advantage-table tbody th{font-weight:600;color:var(--color-navy)}
#inverter-match .advantage-table tbody tr:last-child th,#inverter-match .advantage-table tbody tr:last-child td{border-bottom:0}
/* The caption names the table for a screen reader without taking a line of the
   page; the heading above it is what a visitor reads. */
#inverter-match .advantage-table caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#inverter-match .advantage-chains{margin-top:34px}
#inverter-match .advantage-chain + .advantage-chain{margin-top:28px}
#inverter-match .advantage-chain .card__meta{margin-bottom:10px}
#inverter-match .split{margin-top:52px}

/* The inverter family page: the how-it-works section. What the energy path does
   as the page is read: the power path carries one small dot, the monitoring path
   carries dots that move slowly, the section's entrance fades its nodes in, and
   pointing at a node lights only the paths it belongs to. The room the row of
   situation cards needs is set here too. */

/* The dot on the power path is a round dash on a copy of the same link, with a
   wider faint copy under it standing in for a glow. Both copies of a link carry
   pathLength="100", so one set of keyframes drives a link of any length and the
   dot keeps its size; the three power links run one after another, so the
   highlight reads as one dot crossing the whole path. */
.ep-flow{transition:opacity var(--transition-fast)}
.ep-flow__glow,.ep-flow__dot{fill:none;stroke:var(--color-sun);stroke-linecap:round;stroke-dasharray:.4px 400px;opacity:0;animation-duration:7.8s;animation-timing-function:linear;animation-iteration-count:infinite}
.ep-flow__glow{stroke-width:11;stroke-opacity:.2}
.ep-flow__dot{stroke-width:5}
.ep-flow[data-flow="1"]>path{animation-name:ep-flow-1}
.ep-flow[data-flow="2"]>path{animation-name:ep-flow-2}
.ep-flow[data-flow="3"]>path{animation-name:ep-flow-3}
/* The monitoring path carries several small dots, and they move slowly. */
.ep-link__dots{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.6px 12px;animation:ep-data 3.4s linear infinite}
/* The three windows overlap by about 2%, so the dot never goes dark between one
   link and the next: it is still fading at the node it has reached as the next
   one fades in at the far side of the same node. */
@keyframes ep-flow-1{0%{stroke-dashoffset:0;opacity:0}3%{opacity:1}30%{stroke-dashoffset:-102px;opacity:1}33.33%{stroke-dashoffset:-102px;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ep-flow-2{0%{stroke-dashoffset:0;opacity:0}31.33%{stroke-dashoffset:0;opacity:0}34.33%{opacity:1}61.33%{stroke-dashoffset:-102px;opacity:1}64.67%{stroke-dashoffset:-102px;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ep-flow-3{0%,62.67%{stroke-dashoffset:0;opacity:0}65.67%{opacity:1}92.67%{stroke-dashoffset:-102px;opacity:1}96%{stroke-dashoffset:-102px;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ep-data{to{stroke-dashoffset:-12.6px}}

/* Pointing at a node lights that node and only the paths it belongs to; the
   rest of the diagram steps back rather than staying level with it. */
.ep-node:hover .ep-node__box{stroke:var(--color-accent);stroke-width:2.4;filter:drop-shadow(0 5px 12px rgba(18,48,74,.18))}
.ep-node:hover ~ .ep-link{opacity:.35}
.ep-node:hover ~ .ep-link .ep-flow{opacity:.2}
.ep-node[data-node="pv"]:hover ~ .ep-link[data-pair~="pv"],.ep-node[data-node="inverter"]:hover ~ .ep-link[data-pair~="inverter"],.ep-node[data-node="pump"]:hover ~ .ep-link[data-pair~="pump"],.ep-node[data-node="water"]:hover ~ .ep-link[data-pair~="water"],.ep-node[data-node="grid"]:hover ~ .ep-link[data-pair~="grid"],.ep-node[data-node="link4g"]:hover ~ .ep-link[data-pair~="link4g"],.ep-node[data-node="cloud"]:hover ~ .ep-link[data-pair~="cloud"]{opacity:1;color:var(--color-accent-dark)}
.ep-node[data-node="pv"]:hover ~ .ep-link[data-pair~="pv"] .ep-flow,.ep-node[data-node="inverter"]:hover ~ .ep-link[data-pair~="inverter"] .ep-flow,.ep-node[data-node="pump"]:hover ~ .ep-link[data-pair~="pump"] .ep-flow,.ep-node[data-node="water"]:hover ~ .ep-link[data-pair~="water"] .ep-flow,.ep-node[data-node="grid"]:hover ~ .ep-link[data-pair~="grid"] .ep-flow,.ep-node[data-node="link4g"]:hover ~ .ep-link[data-pair~="link4g"] .ep-flow,.ep-node[data-node="cloud"]:hover ~ .ep-link[data-pair~="cloud"] .ep-flow{opacity:1}
.ep-node[data-node="pv"]:hover ~ .ep-link[data-pair~="pv"] .ep-link__line,.ep-node[data-node="inverter"]:hover ~ .ep-link[data-pair~="inverter"] .ep-link__line,.ep-node[data-node="pump"]:hover ~ .ep-link[data-pair~="pump"] .ep-link__line,.ep-node[data-node="water"]:hover ~ .ep-link[data-pair~="water"] .ep-link__line,.ep-node[data-node="grid"]:hover ~ .ep-link[data-pair~="grid"] .ep-link__line,.ep-node[data-node="link4g"]:hover ~ .ep-link[data-pair~="link4g"] .ep-link__line,.ep-node[data-node="cloud"]:hover ~ .ep-link[data-pair~="cloud"] .ep-link__line{stroke-width:2.6}
.ep-node[data-node="grid"]:hover ~ .ep-backup{opacity:1}

/* The section's entrance: the diagram fades in and its nodes rise in turn, 80ms
   apart. Nothing is hidden until the reveal script has set its class on the
   document, so the diagram is whole with JavaScript off or without the script. */
html.ep-motion .energy-path__svg{opacity:0;transition:opacity .5s ease}
html.ep-motion .energy-path .ep-caption{opacity:0;transition:opacity .5s ease}
html.ep-motion .energy-path .ep-node{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);transition-delay:var(--ep-delay,0ms)}
html.ep-motion .energy-path.is-visible .energy-path__svg,html.ep-motion .energy-path.is-visible .ep-caption,html.ep-motion .energy-path.is-visible .ep-node{opacity:1;transform:none}

/* Reduced motion: the travelling dots are dropped and the entrance is skipped,
   so the diagram is whole the moment it is read. Pointing at a node still
   lights it. */
@media (prefers-reduced-motion:reduce){
  html.ep-motion .energy-path__svg,html.ep-motion .energy-path .ep-caption,html.ep-motion .energy-path .ep-node{opacity:1;transform:none;transition:none}
  .ep-flow__glow,.ep-flow__dot,.ep-link__dots{animation:none;opacity:0}
}

#inverter-how .cards{margin-top:52px}

/* The inverter family page: the matching section. Each card carries its own
   checklist, at the density the advantages cards already use; the parts grid
   keeps the heading that frames it, and the section's one call to action
   closes it. */
#inverter-match .card .checklist{margin:18px 0 0}
#inverter-match .card .checklist li{margin:9px 0;font-size:14px}
#inverter-match .container > h3{margin:52px 0 20px}
#inverter-match .actions{margin-top:36px}

/* The solar water pump page: the way in by water source. Four large cards in two
   columns, each carrying the pump type that decides it, the families the range
   is read in for that source and the kinds of work it serves. The chips reuse
   the site's own chip styling; only the card frame and the two lists are stated
   here, and every rule is scoped to the section so nothing else is reached. */
#water-source .source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.source-card{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
.source-card__title{margin:0;font-size:clamp(20px,2.1vw,25px);color:var(--color-heading)}
.source-card__sub{margin:10px 0 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.source-card__text{margin:16px 0 0;font-size:15px;color:var(--color-muted)}
.source-card__block{margin-top:24px}
.source-card__label{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted)}
.source-card__types,.source-card__codes,.source-card__list{margin:0;padding:0;list-style:none}
.source-card__types{display:flex;flex-wrap:wrap;gap:8px}
.source-card__types li{padding:7px 14px;border-radius:999px;background:var(--color-accent-pale);font-size:13px;font-weight:600;color:var(--color-accent-dark)}
/* A family code reads as a code rather than as a label: squared, tabular and
   quieter than the pump-type chips above it. */
.source-card__codes{display:flex;flex-wrap:wrap;gap:8px}
.source-card__codes li{padding:7px 13px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--color-navy)}
.source-card__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;font-size:14px;color:var(--color-text)}
.source-card__list li{position:relative;padding-left:15px}
.source-card__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--color-accent)}
/* The card's own way on keeps the foot of the card, so the four cards read as
   one row however long their lists are. */
.source-card__cta{margin-top:auto;padding-top:26px}

/* The pump-type section: one block per pump group. The id is what a water-source
   card leads to, so the block clears the sticky header when it is jumped to. */
#pump-type .pump-group{scroll-margin-top:110px}

@media(max-width:980px){
  #water-source .source-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .source-card__list{grid-template-columns:1fr}
}