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

   This stylesheet is enqueued site-wide (functions.php), so every rule is
   scoped to the section of the template that needs it: the product-lines
   section of the products page, and the how-it-works, advantages and matching
   sections of the inverter family page, which no other template renders. The
   tag badge and the specification list keep the shared .card, .card__image,
   .card__photo, .card__body and .specs styling. */

/* In these cards the specification list follows the paragraph and the card
   link keeps the bottom of the card, so only one of them takes the leftover
   height instead of both. */
#products .card .specs{margin-top:22px}

/* 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 how-it-works section: the energy-path diagram. A real diagram fills the
   frame and keeps its own proportions; until its slot is filled, the labelled
   placeholder keeps the same height, so the section holds its shape. */
.diagram-frame{margin-top:8px}
.diagram-frame .img-todo,.diagram-frame .diagram-photo{display:block;width:100%;min-height:280px;object-fit:contain;padding:30px}
@media(max-width:760px){
  .diagram-frame .img-todo,.diagram-frame .diagram-photo{min-height:200px;padding:20px}
}

/* 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. The three flow lines are
   the shared navy band from style.css; what is added here is the stack they sit
   in, the label above each one, and the room the section's own paragraph and the
   row of situation cards need around them. */
#inverter-how .flow-band{display:grid;gap:26px;margin:34px 0 0}
#inverter-how .flow-row .card__meta{margin:0 0 10px}
#inverter-how .flow{border-radius:var(--radius-md)}
#inverter-how .flow-band + p{margin-top:28px}
#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}