/* De eigen stijlregels van kokendwaterkranen.com. Dit bestand is de bron.

   Sinds 16 september 2026 staat het op de kopie en op live als `astra-child/temppim.css`;
   `functions.php` van het kindthema zet het in de wachtrij met de wijzigingstijd als versie.
   Overzetten met `python scripts/stijlregels_naar_thema.py --doel lokaal|live|beide`.
   Weergave > Aanpassen > Aanvullende CSS (custom_css 28084) is leeg en blijft leeg: wat daar
   staat wint van elke regel hier met dezelfde selector.

   Bijgehouden door TempPIM; zie docs/publicatie-acties.md, acties 21, 23, 24 en 33. */

/* Een filter met maar een keuze kan niets narrowen: op een modelpagina staat er anders

   een kraanfilter met alleen dat ene model in. TempPIM, 10 september 2026. */

.wpc-filters-section:not(:has(.wpc-filters-ul-list > li:nth-child(2))) { display: none; }

/* Productkaarten: de naam is een tot drie regels lang, en daardoor stonden de prijs en de

   knop in een rij op verschillende hoogte. De kaart vult nu de hoogte van zijn rij en de

   prijs wordt naar onderen geduwd, zodat prijs en knop uitlijnen zonder een naam af te

   kappen. TempPIM, 10 september 2026. */

.elementor-loop-container .elementor-element-88e7d7b,

.elementor-loop-container [data-elementor-type="loop-item"] > .e-con {

  height: 100%;

}

.elementor-loop-container .elementor-element-88e7d7b > .e-con-inner {

  display: flex;

  flex-direction: column;

  height: 100%;

}

.elementor-loop-container .elementor-element-47e8e10 { margin-top: auto; }

/* Een aanbieding zet twee prijzen naast elkaar en dat maakt het prijsvak 3 pixels hoger

   dan een gewone prijs. Met de prijs onderaan de kaart schoof daardoor de prijs van een

   afgeprijsd artikel omhoog terwijl de knop bleef staan. Het vak krijgt daarom een vaste

   hoogte en de prijs staat er gecentreerd in. TempPIM, 10 september 2026. */

.elementor-loop-container .elementor-element-47e8e10 .price {

  min-height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}

/* telefoon: producten voor de zijbalk */

/* Op een telefoon staan de zijbalkwidgets boven de producten: de filters vallen daar in

   de knop `Filter producten`, maar het menu Informatie en het reviewblok samen duwden de

   eerste productkaart bijna 500 pixels naar beneden. De kolom en de zijbalkwidget worden

   hier `display: contents`, zodat elk blok een eigen plek in de rij krijgt, en dan staat

   de filterknop boven de producten en de rest eronder. TempPIM, 10 september 2026. */

@media (max-width: 767px) {

  .elementor-element-9456081,

  .elementor-element-9456081 > .elementor-widget-sidebar,

  .elementor-element-9456081 > .elementor-widget-sidebar > .elementor-widget-container {

    display: contents;

  }

  .elementor-element-9456081 #block-724,

  .elementor-element-9456081 #wpc_filters_widget-2 { order: 1; width: 100%; }

  .elementor-element-d24e615 { order: 2; }

  .elementor-element-9456081 #nav_menu-9,

  .elementor-element-9456081 #block-731,

  .elementor-element-9456081 #block-732 { order: 3; width: 100%; }

}

/* zusterpagina's boven het filter */
/* Filter Everything berekent de opties van een filter over de lijst die op de pagina staat,
   dus op een modelpagina toont het kraanfilter alleen dat model. De andere pagina's op
   dezelfde as staan er daarom als navigatie boven. De inhoud komt uit de termmeta
   `tp_zusters`; TempPIM, 11 september 2026.

   Sinds 16 september 2026 als chips op elke breedte, met de eigen pagina als donkere chip
   met vinkje en de andere als lichte chips met pijl. Daarvoor stond het blok in de
   titelstijl van het filter en zat het verschil op desktop alleen in vet; de opdrachtgever
   las het als een filter waarin niet te zien was welke optie actief was. Acht modellen
   onder elkaar duwden bovendien de eerste productkaart 600 pixels omlaag op de telefoon
   (gemeten op 390 pixels); als chips kost hetzelfde lijstje drie regels. */
.tp-zusters {
  position: relative;
  margin-bottom: 24px;
}
.tp-zusters-kop {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.tp-zusters ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tp-zusters li {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid rgba(204, 204, 204, 0.9);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
  background: #fff;
}
.tp-zusters a {
  text-decoration: none;
  color: #333;
}
.tp-zusters li:hover {
  border-color: #333;
}
.tp-zusters li:hover a {
  text-decoration: underline;
}
.tp-zusters li.tp-zuster-hier {
  background: #333;
  border-color: #333;
  color: #fff;
}
.tp-zusters li.tp-zuster-hier span {
  font-weight: 600;
  color: #fff;
}
.tp-zusters .tp-zuster-pijl {
  opacity: 0.6;
}

/* megamenu-panelen: begin */
/* De zeven verschuivingen uit wp-content/custom_codes/17057-scss-desktop.scss
   uitzetten. Gemeten met scripts/menupanelen_meten.py op 12 september 2026 bij
   1920, 1536 en 1366 px: het paneel is 1.146 px breed, net als de pagina-inhoud,
   en zonder verschuiving begint het op exact dezelfde x. De waarden -80 tot -837
   trokken het paneel er vanaf; Handig begon op x = -350 en Contact op -450.

   Geen eigen getal hier: alleen de verschuiving terug naar nul, dus dit blijft
   kloppen als de menubalk verandert. Dat is wat docs/menu-regels.md 6b vraagt.
   Haal de zeven regels bij gelegenheid uit post 17057, dan kan dit blok weg. */
.elementskit-megamenu-panel > .elementor,
.elementskit-megamenu-panel > .elementor > .e-con.e-parent {
  left: 0 !important;
}

/* En de breedte. De plugin zet het paneel op 1.146 pixels vast, ook als het venster
   smaller is. Gemeten op live bij een venster van 1100 px: de pagina-inhoud is dan
   1.060 breed en het paneel liep 66 pixels buiten beeld. Dit is dezelfde regel die op
   de kopie al sinds 11 september staat. De ondergrens van 1025 px laat het mobiele
   menu, dat een uitschuifpaneel is, met rust. */
@media (min-width: 1025px) {
  .elementskit-navbar-nav > li.elementskit-megamenu-has > .elementskit-megamenu-panel {
    max-width: calc(100vw - 40px);
  }
}
/* megamenu-panelen: eind */

/* keuzeblok artikelpagina: begin */
/* Keuzeblok op de artikelpagina (TempPIM, relaties.keuzeblok_html). Kleuren uit de huisstijl:
   rood #CF000F (bestelknop), kop #1E293B, tekst #334155, rand #D1D5DB, vlak #F0F5FA. */
#tab-description .tp-keuze { margin: 0 0 2em; }
#tab-description .tp-keuze-intro { margin: 0 0 1.25em; }
#tab-description .tp-keuze-groep,
#tab-description .tp-keuze-meer {
  display: grid; grid-template-columns: 7.5em 1fr; gap: .5em 1em; align-items: start; margin: 0 0 1.1em;
}
#tab-description .tp-keuze-kop { margin: 0; padding-top: .6em; font-weight: 600; color: #1E293B; line-height: 1.3; }
#tab-description .tp-keuze ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
#tab-description .tp-keuze li { margin: 0; }
#tab-description .tp-keuze-optie {
  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; height: 100%;
  min-height: 2.75em; padding: .45em .95em; border: 1px solid #D1D5DB; background: #fff;
  color: #1E293B; text-decoration: none; line-height: 1.3;
}
#tab-description a.tp-keuze-optie:hover,
#tab-description a.tp-keuze-optie:focus-visible { border-color: #CF000F; color: #CF000F; outline: none; box-shadow: inset 0 0 0 1px #CF000F; }
#tab-description .tp-keuze-optie.is-gekozen { border-color: #CF000F; background: #CF000F; color: #fff; }
#tab-description .tp-keuze-optie.is-gekozen .tp-keuze-naam::before { content: "\2713\00a0"; }
#tab-description .tp-keuze-naam { font-weight: 600; }
#tab-description .tp-keuze-uitleg { font-size: .85em; color: #475569; margin-top: .15em; }
#tab-description .tp-keuze-optie.is-gekozen .tp-keuze-uitleg { color: #fff; }
#tab-description .tp-keuze-groep--uitleg li { flex: 1 1 12em; max-width: 19em; }
#tab-description .tp-keuze-links a {
  display: inline-block; padding: .3em .75em; border: 1px solid #D1D5DB; background: #F0F5FA;
  color: #1E293B; text-decoration: none; font-size: .9em; line-height: 1.4;
}
#tab-description .tp-keuze-links a:hover,
#tab-description .tp-keuze-links a:focus-visible { border-color: #CF000F; color: #CF000F; }
@media (max-width: 600px) {
  #tab-description .tp-keuze-groep,
  #tab-description .tp-keuze-meer { grid-template-columns: 1fr; gap: .4em; }
  #tab-description .tp-keuze-kop { padding-top: 0; }
  #tab-description .tp-keuze-groep--uitleg li { flex: 1 1 100%; max-width: none; }
}
/* keuzeblok artikelpagina: eind */