/* Product database views — the series grid and cards, the classification
   facts, the confirmed functions, and the specification table a series page
   prints. Values come from the product_series records; nothing here states a
   rating, range or model of its own. */

.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.series-grid--2{grid-template-columns:repeat(2,1fr)}
.series-grid--4{grid-template-columns:repeat(4,1fr)}

.series-card{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.series-card__media{height:190px;padding:22px;background:#f5f7fa}
.series-card__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.series-card__body{display:flex;flex:1;flex-direction:column;padding:24px}
.series-card__code{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.series-card__title{margin:0;font-size:19px}
.series-card__title a{color:var(--color-heading);text-decoration:none}
.series-card__title a:hover{color:var(--color-accent);text-decoration:underline}
.series-card__text{margin:12px 0 0;font-size:15px;color:var(--color-muted)}
.series-card__facts{display:grid;gap:8px;margin:20px 0 0;font-size:14px}
.series-card__facts div{display:grid;grid-template-columns:minmax(86px,auto) 1fr;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--color-line)}
.series-card__facts div:last-child{padding-bottom:0;border-bottom:0}
.series-card__facts dt{margin:0;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}
.series-card__facts dd{margin:0;font-weight:600;color:var(--color-heading)}
.series-card__body .card__link{margin-top:auto;padding-top:20px}

/* Series page */
.series-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.series-chips li{padding:7px 14px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-pale);font-size:13px;font-weight:600;color:var(--color-navy)}
.series-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0}
.series-facts div{display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--color-line)}
.series-facts dt{margin:0;font-size:13px;color:var(--color-muted)}
.series-facts dd{margin:0;font-weight:600;color:var(--color-heading)}
.series-features{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.series-features li{padding:8px 14px;border-radius:var(--radius-sm);background:var(--color-accent-pale);font-size:14px;font-weight:600;color:var(--color-accent-dark)}
.spec-table-wrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-line)}
.spec-table th{width:38%;font-weight:600;color:var(--color-muted)}
.spec-table td{color:var(--color-heading)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}

/* The model table inside a series page's specification section: one row per
   model the record lists, the values the series states for the whole of itself
   marked as inherited, and the figures only one model carries opened below. */
.model-table-block{margin-top:40px}
.model-table__title{margin:0;font-size:17px;color:var(--color-heading)}
.model-table__sub{margin:10px 0 0;font-size:14px;color:var(--color-muted)}
.model-table-block .spec-table-wrap{margin-top:18px}
.model-table th{width:auto}
.model-table thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--color-muted)}
.model-table tbody th{white-space:nowrap;color:var(--color-heading)}
.model-table tr[id]{scroll-margin-top:110px}
.model-table__inherited{margin-left:5px;font-weight:700;color:var(--color-accent)}
.model-table__note{margin:14px 0 0;font-size:13px;color:var(--color-muted)}
.model-details{margin-top:30px}
.model-details__title{margin:0;font-size:15px;color:var(--color-heading)}
.model-details__item{margin-top:12px;padding:14px 18px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.model-details__item summary{cursor:pointer;font-weight:600;color:var(--color-heading)}
.model-details__list{display:grid;gap:10px;margin:14px 0 0}
.model-details__list div{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--color-line)}
.model-details__list div:last-child{padding-bottom:0;border-bottom:0}
.model-details__list dt{margin:0;font-size:13px;color:var(--color-muted)}
.model-details__list dd{margin:0;font-weight:600;color:var(--color-heading)}
@media(max-width:640px){
  .model-details__list div{grid-template-columns:1fr;gap:4px}
}

@media(max-width:980px){
  .series-grid,.series-grid--4{grid-template-columns:repeat(2,1fr)}
  .series-facts{grid-template-columns:1fr}
}
@media(max-width:640px){
  .series-grid,.series-grid--2,.series-grid--4{grid-template-columns:1fr}
  .series-facts div{grid-template-columns:1fr;gap:4px}
}

/* A group of series inside one product page (the AC/DC block on the solar pump
   page): the group eyebrow, then a heading and a grid per pump type. */
.series-group{margin-top:40px}
.series-group:first-of-type{margin-top:24px}
.series-group>.eyebrow{margin:0}
.series-group h3{margin:28px 0 0;font-size:17px;color:var(--color-heading)}
.series-group .series-grid{margin-top:18px}
.series-group .product-note{margin-top:18px}

/* The recorded Q-H performance of a pump family: the family's own Q test points
   as the columns of one table, one row per model, and one <details> block per
   model holding its own figures and its own way into the selection. Every figure
   comes from the record; nothing here states a rating, a range or a unit. */
.pump-curve__span{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:0}
.pump-curve__span-item{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--color-line)}
.pump-curve__span-item dt{margin:0;font-size:13px;color:var(--color-muted)}
.pump-curve__span-item dd{margin:0;font-weight:600;color:var(--color-heading)}
.pump-curve .actions{margin-top:26px}

/* The matrix: a wide table that scrolls in its own box rather than squeezing the
   layout, with the model column read from the left and the figures from the
   right. */
.pump-curve .spec-table-wrap{margin-top:34px}
.pump-curve__table{min-width:720px}
.pump-curve__table th{width:auto}
.pump-curve__table thead th{white-space:nowrap;text-align:right;font-size:12px}
.pump-curve__table thead th:nth-child(-n+2){text-align:left}
.pump-curve__table tbody th{white-space:nowrap;color:var(--color-heading)}
.pump-curve__table tbody td{white-space:nowrap;text-align:right}
.pump-curve__table tbody td:nth-child(2){text-align:left}
.pump-curve__table td.pump-curve__absent{white-space:normal;text-align:left;color:var(--color-muted)}
.pump-curve__family{margin:34px 0 0;font-size:15px;color:var(--color-heading)}
.pump-curve__family + .spec-table-wrap{margin-top:14px}
.pump-curve__held{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--color-accent-pale);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-dark);white-space:nowrap}
.pump-curve__absent{color:var(--color-muted)}
.pump-curve__note{margin:14px 0 0;font-size:13px;color:var(--color-muted)}
.pump-curve__source{margin-top:26px}
.pump-curve__source{margin-top:26px;padding-left:14px;border-left:3px solid var(--color-line)}

/* One model at a time: the block the selection deep-links to (id="model-<key>")
   and the only place a single model's curve and its own check are written. */
.pump-curve__models{margin-top:40px}
.pump-curve__models-title{margin:0;font-size:17px;color:var(--color-heading)}
.pump-curve__model{margin-top:12px;padding:14px 18px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.pump-curve__model[id]{scroll-margin-top:110px}
.pump-curve__model summary{cursor:pointer;font-weight:600;color:var(--color-heading)}
.pump-curve__model[open] summary{margin-bottom:14px}
.pump-curve__figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;margin:0}
.pump-curve__figures div{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--color-line)}
.pump-curve__figures dt{margin:0;font-size:13px;color:var(--color-muted)}
.pump-curve__figures dd{margin:0;font-weight:600;color:var(--color-heading)}
.pump-curve__body .actions{margin-top:20px}
.pump-curve__body .actions .btn{min-height:44px;padding:10px 18px;font-size:14px}

@media(max-width:980px){
  .pump-curve__span{grid-template-columns:1fr}
  .pump-curve__figures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .pump-curve__figures{grid-template-columns:1fr}
}

/* The series page: the 01 / Structure and 02 / Classification blocks as one row.
   The two blocks answer the same question about a series — what it is made of and
   what it is classified as — so they are read side by side rather than one after
   the other: the build on the left, the facts on the right. Each column keeps its
   own head and its own line of prose, so nothing a column says is decided by the
   other one. Every rule below is written against the row (.series-intro), and the
   two that have to outweigh this sheet's full-width rules carry the section's own
   id as well; nothing here reaches a block outside the row. */
.series-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(24px,3vw,40px)}

/* Each column is half the panel, so its head stacks: the site's default head is a
   row that holds the intro line out to one side, which does not fit at this width.
   The space under the head is left to the block below it, so the picture and the
   facts start the same distance down their own column. */
.series-intro .section__head{display:block;margin-bottom:0}
.series-intro .section__sub{max-width:none;margin-top:var(--space-2)}

/* The left column: the picture above the parts the record lists, not beside them —
   there is no room for two columns inside a column. The frame, the multiply blend
   and the contained fit are the ones the picture already had; only its height is
   reduced, so a tall shot does not tower over the facts it is now read against. */
#structure .series-intro .structure{grid-template-columns:minmax(0,1fr)}
#structure .series-intro .structure__photo{max-height:clamp(200px,22vw,300px)}
#structure .series-intro .structure--picture-only .structure__photo{max-height:clamp(240px,26vw,340px)}

/* The right column: one fact per line. Two columns of rows read as a wall at half
   the panel's width, so the label and its value read down the column instead, and
   the list starts as far below its head as the picture does below its own. */
.series-intro .series-facts{grid-template-columns:minmax(0,1fr);margin-top:clamp(24px,3vw,40px)}

/* A record that fills only one of the two columns: that column takes the width the
   panel allows, and the facts keep the two-column list they had when the block
   stood on its own. */
.series-intro--single{grid-template-columns:minmax(0,1fr)}
.series-intro--single .series-facts{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The series page: the structure block itself, which the row above prints in its
   left column. The picture of the series' build keeps the frame it is given, and
   the parts the record lists are read under it — the row puts the two in one
   column. The numbers over the picture are the same list as the one under it, so
   they are decorative: where a pointer can hover one, its part name is shown, and
   on a touch screen the list under it is what is read. A picture the record places
   no part on — one that carries its own labels — takes the width the panel
   allows. */
#structure .structure{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(24px,3vw,40px)}
#structure .structure__diagram{display:flex;justify-content:center;margin:0;padding:clamp(20px,3vw,32px);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
#structure .structure__frame{position:relative;display:block;line-height:0}
#structure .structure__photo{display:block;max-width:100%;max-height:460px;object-fit:contain;mix-blend-mode:multiply}
#structure .structure__placeholder{width:min(260px,60vw);min-height:340px}
#structure .structure--picture-only{grid-template-columns:minmax(0,1fr)}
#structure .structure--picture-only .structure__diagram{padding:clamp(24px,3vw,40px)}
#structure .structure--picture-only .structure__photo{width:100%;max-height:none;height:auto}
#structure .structure__hot{position:absolute;left:var(--hot-x);top:var(--hot-y);display:flex;align-items:center;gap:var(--space-1);transform:translate(-50%,-50%)}
#structure .structure__dot{display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--color-surface);border-radius:50%;background:var(--color-navy);color:#fff;font-size:13px;font-weight:600;box-shadow:0 4px 12px rgba(18,48,74,.25)}
#structure .structure__chip{max-width:200px;padding:4px 10px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);color:var(--color-heading);font-size:12px;line-height:1.35;white-space:normal;opacity:0;box-shadow:var(--shadow-float);transition:opacity var(--transition-fast)}
#structure .structure__list{margin:0;padding:0;list-style:none}
#structure .structure__item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:var(--space-2);padding:12px 0;border-top:1px solid var(--color-line)}
#structure .structure__item:first-child{border-top:0}
#structure .structure__num{padding-top:3px;font-size:13px;font-weight:600;color:var(--color-accent)}
#structure .structure__body b{display:block;color:var(--color-heading)}
#structure .structure__note{display:block;font-size:15px;color:var(--color-muted)}
#structure .structure__thumb{display:block;width:64px;height:64px;padding:6px;background:var(--color-pale);border:1px solid var(--color-line);border-radius:var(--radius-sm)}
#structure .structure__thumb-photo{display:block;width:100%;height:100%;object-fit:contain}
@media(hover:hover){
  #structure .structure__hot:hover .structure__chip{opacity:1}
}
@media(max-width:980px){
  #structure .structure{grid-template-columns:1fr}
  #structure .structure__photo{max-height:360px}
  #structure .structure__chip{display:none}
  /* The 01 / 02 row: the two columns stack, structure first and classification
     below it, and the picture takes the width of the panel again, so the reduced
     height and the one-column facts of the row no longer apply — a record that
     fills only one column is stacked here too. */
  .series-intro{grid-template-columns:minmax(0,1fr)}
  #structure .series-intro .structure__photo{max-height:360px}
  #structure .series-intro .structure--picture-only .structure__photo{max-height:none}
  .series-intro--single .series-facts{grid-template-columns:minmax(0,1fr)}
}

/* The series page: the specification section. A deep-well series shows the
   system around the pump beside the values it publishes, side by side, in the
   same frame as the structure picture above it, so the two read as one page. A
   series that is not a deep-well one prints the values alone, at the width it
   had before. */
#specification .spec-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(24px,3vw,40px)}
#specification .spec-layout--values-only{grid-template-columns:minmax(0,1fr);margin-top:0}
#specification .spec-layout__diagram{display:flex;justify-content:center;margin:0;padding:clamp(20px,3vw,32px);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
#specification .spec-layout__photo{display:block;width:100%;max-width:100%;height:auto;max-height:520px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:980px){
  #specification .spec-layout{grid-template-columns:1fr}
  #specification .spec-layout__photo{max-height:400px}
}