/* 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 structure section. The picture of the series' build
   keeps the frame it is given, and the parts the record lists sit beside it. The
   numbers over the picture are the same list as the one beside it, so they are
   decorative: where a pointer can hover one, its part name is shown, and on a
   touch screen the list beside it is what is read. A picture the record places
   no part on — one that carries its own labels — takes the row on its own, at
   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 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}
}