/* ---------------------------------------------------------------------------
 * SolarEdge categoriepagina - richting 3a
 *
 * Overgenomen uit de design-handoff (design_handoff_solaredge_categorie).
 * Kleuren, typografie en spacing zijn daar definitief vastgelegd; niet wijzigen
 * zonder de handoff erbij. Lettertype erft van Flatsome (Lato) - hier bewust
 * geen font-family, geen webfont.
 *
 * Alles is .se- geprefixt tegen botsingen met Flatsome.
 * ------------------------------------------------------------------------- */

/* ---------- basis ---------- */
.se-below { color: #404040; font-size: 15px; line-height: 1.6; }
.se-below * { box-sizing: border-box; }
.se-below p { margin: 0 0 10px; }
.se-below a { color: #21b500; font-weight: 700; text-decoration: none; }
.se-below a:hover { color: #178200; text-decoration: underline; }


/* ---------- blok B: onder de producten ---------- */
.se-below { background: #f7f9f6; padding: 40px 30px 44px; }
.se-below h2 { margin: 0 0 8px; font-size: 26px; font-weight: 900; color: #1d2b23; letter-spacing: -.02em; }
.se-below h3 { margin: 0 0 10px; font-size: 20px; font-weight: 900; color: #1d2b23; }
.se-lead { margin: 0 0 22px; color: #5c6b62; }
.se-section { margin-bottom: 40px; }
.se-section:last-child { margin-bottom: 0; }
.se-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(18, 33, 26, .06); padding: 26px; }
.se-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.se-grid-2-wide { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.se-muted { color: #5c6b62; }

/* stappen */
.se-steps { display: flex; flex-direction: column; gap: 12px; }
.se-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 22px 24px; }
.se-step-n { width: 38px; height: 38px; border-radius: 50%; background: #e8f7e3; color: #178200; font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.se-step b { font-size: 16px; color: #1d2b23; display: block; margin-bottom: 4px; }
.se-step p { margin: 0; color: #5c6b62; }
.se-step p:not(:last-child) { margin-bottom: 8px; }

/* serie kaarten */
.se-serie { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.se-serie-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.se-serie-top b { font-size: 17px; color: #1d2b23; }
.se-tag { font-size: 12px; font-weight: 700; color: #178200; background: #e8f7e3; padding: 4px 10px; border-radius: 14px; white-space: nowrap; }
.se-serie-power { font-size: 15px; font-weight: 900; color: #1d2b23; font-variant-numeric: tabular-nums; }
.se-serie p { margin: 0; font-size: 14px; line-height: 1.55; color: #5c6b62; }
.se-note { background: #eef3ec; border-radius: 14px; padding: 20px 22px; display: flex; align-items: center; }
.se-note p { margin: 0; font-size: 14px; line-height: 1.6; color: #5c6b62; }

/* ---------- keuzehulp ---------- */
.se-calc { background: #12211a; border-radius: 18px; padding: 34px; color: #fff; }
.se-calc h2 { color: #fff; }
.se-calc .se-lead { color: #bcc9c1; font-size: 16px; max-width: 70ch; margin-bottom: 24px; }
.se-calc-grid { display: grid; grid-template-columns: 310px 1fr; gap: 22px; align-items: start; }
.se-fields { display: flex; flex-direction: column; gap: 16px; }
.se-field { display: flex; flex-direction: column; gap: 6px; }
.se-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fa197; }
.se-opt { text-align: left; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; font: 700 14px inherit; font-family: inherit; cursor: pointer; background: rgba(255, 255, 255, .06); color: #dbe6df; }
.se-opt[aria-pressed="true"] { background: #21b500; color: #fff; border-color: #21b500; }
/* Flatsome zet knoppen standaard in hoofdletters met extra letterafstand; de
   handoff toont ze in normale schrijfwijze. Daarom hier expliciet terugzetten. */
.se-calc .se-opt,
.se-calc .se-tab { text-transform: none; letter-spacing: normal; line-height: 1.35; min-height: 0; height: auto; margin: 0; box-shadow: none; }
.se-calc .se-opt:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.se-calc .se-opt[aria-pressed="true"]:hover { background: #21b500; }
.se-opt:focus-visible,
.se-input:focus-visible,
.se-tab:focus-visible { outline: 2px solid #21b500; outline-offset: 2px; }
.se-row { display: flex; gap: 12px; }
.se-row .se-field { flex: 1; }
.se-input { padding: 12px 13px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 10px; font: 700 15px inherit; font-family: inherit; width: 100%; }
.se-input::-webkit-outer-spin-button,
.se-input::-webkit-inner-spin-button { opacity: 1; }
/* Flatsome legt selects een vaste hoogte op waardoor de tekst afgeknipt raakt;
   hoogte losgelaten en regelhoogte expliciet gezet. */
.se-calc select.se-input {
  appearance: none;
  -webkit-appearance: none;
  height: auto;
  min-height: 0;
  line-height: 1.4;
  margin: 0;
  padding: 12px 36px 12px 13px;
  cursor: pointer;
  text-overflow: ellipsis;
  box-shadow: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238fa197' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
}
.se-calc select.se-input option { color: #1d2b23; background: #fff; }
.se-calc .se-input { line-height: 1.4; height: auto; min-height: 0; margin: 0; box-shadow: none; }
.se-hint { font-size: 13px; line-height: 1.5; color: #8fa197; }
.se-out { background: #fff; border-radius: 14px; padding: 22px; color: #1d2b23; display: flex; flex-direction: column; gap: 12px; }
.se-out-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #e4eae5; padding-bottom: 12px; }
.se-out-head b { font-size: 15px; }
.se-out-head span { font-size: 13px; color: #5c6b62; text-align: right; }
.se-res { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 10px; }
.se-res + .se-res { margin-top: 8px; }
.se-res b { font-size: 17px; }
.se-res-id { display: flex; flex-direction: column; gap: 3px; }
.se-res-status { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.se-res p { margin: 0; font-size: 14px; line-height: 1.5; color: #42544a; }
.se-res.is-good { background: #f2fbef; }
.se-res.is-good .se-res-status { color: #178200; }
.se-res.is-bad { background: #fdf5f4; }
.se-res.is-bad .se-res-status { color: #b03a2e; }
.se-res.is-muted { background: #f7f9f6; }
.se-res.is-muted .se-res-status { color: #8a978f; }
.se-disclaimer { font-size: 13px; line-height: 1.55; color: #8a978f; border-top: 1px solid #e4eae5; padding-top: 12px; }
.se-warn { margin-top: 18px; padding: 14px 18px; border-radius: 10px; background: rgba(255, 255, 255, .07); font-size: 14px; line-height: 1.55; color: #dbe6df; }
.se-warn p { margin: 0; }

/* tabs - uitbreiding op de handoff: het vervangings-tabblad bestond al en blijft.
   Volgt de knopstijl van .se-opt zodat het bij het donkere blok past. */
.se-tabs { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.se-tab { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; background: rgba(255, 255, 255, .06); color: #dbe6df; font: 700 14px inherit; font-family: inherit; cursor: pointer; }
.se-tab[aria-selected="true"] { background: #21b500; color: #fff; border-color: #21b500; }
.se-paneel[hidden] { display: none; }

/* winkelregel in een resultaat - uitbreiding op de handoff: prijs, voorraad en
   productlink komen live uit WooCommerce, zodat de keuzehulp niet veroudert. */
.se-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; }
.se-buy-prijs { font-weight: 900; color: #1d2b23; font-variant-numeric: tabular-nums; }
.se-buy-stock { font-size: 12px; font-weight: 700; color: #178200; background: #e8f7e3; padding: 3px 9px; border-radius: 14px; }
.se-buy-stock.is-op { color: #8a978f; background: #eef1ef; }
.se-buy a { color: #21b500; font-weight: 700; }
.se-buy a:hover { color: #178200; text-decoration: underline; }

/* ---------- advies ---------- */
.se-cta { background: #21b500; border-radius: 14px; padding: 26px; color: #fff; }
.se-cta h3 { color: #fff; margin-bottom: 8px; }
.se-cta p { color: #e2f7dc; margin-bottom: 16px; }
.se-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.se-btn { background: #fff; color: #178200 !important; padding: 10px 17px; border-radius: 22px; font-size: 14px; font-weight: 900; }
.se-btn-ghost { border: 1px solid rgba(255, 255, 255, .5); color: #fff !important; padding: 10px 17px; border-radius: 22px; font-size: 14px; font-weight: 700; }
.se-cta a:hover { text-decoration: none; opacity: .9; }

/* ---------- verdieping ---------- */
.se-more { padding: 30px 32px; }
.se-more h3 { margin-bottom: 20px; }
.se-more-list { display: flex; flex-direction: column; gap: 18px; color: #5c6b62; }
.se-more-item { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid #eef2ef; }
.se-more-item:last-child { padding-bottom: 0; border-bottom: 0; }
.se-more-item b { font-size: 16px; color: #1d2b23; }
.se-more-item p { margin: 0; }

/* ---------- mobiel ---------- */
@media (max-width: 849px) {
  .se-below { padding: 28px 18px 32px; }
  .se-grid-2,
  .se-grid-2-wide,
  .se-calc-grid,
  .se-more-item { grid-template-columns: 1fr; }
  .se-calc { padding: 24px 20px; border-radius: 14px; }
  .se-below h2 { font-size: 22px; }
  .se-res { grid-template-columns: 1fr; gap: 6px; }
  .se-out-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .se-out-head span { text-align: left; }
}