/*
 * Witgoed-Gids 3.3.11 — finale Koelkastwijzer mobile/UI gelijkmaking.
 * Alleen presentatie. Geen URLs, filters, feeds, SEO, AJAX of data gewijzigd.
 */

/* Breadcrumbs: exact compact, links uitgelijnd en met zichtbaar huisicoon. */
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs){
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 18px!important;
  padding:0!important;
  color:var(--kw-subtle)!important;
  font-family:var(--wg-font-family)!important;
  font-size:12.5px!important;
  font-weight:400!important;
  line-height:1.45!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) > *{
  flex:0 0 auto!important;
  margin:0!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) > span[aria-hidden="true"]{
  margin:0!important;
  color:#9aa9b7!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) a{
  color:var(--kw-muted)!important;
  font:inherit!important;
  text-decoration:none!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) [aria-current="page"]{
  color:var(--kw-subtle)!important;
  font:inherit!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) > a:first-child{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 20px!important;
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0!important;
  overflow:hidden!important;
  color:var(--kw-blue)!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) > a:first-child::before{
  content:""!important;
  display:block!important;
  width:17px!important;
  height:17px!important;
  background:currentColor!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10.7 12 3.8l8.5 6.9v8.8a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10.7 12 3.8l8.5 6.9v8.8a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

/* Catalogus: prijs en prijsaantal altijd echt rechts. */
body .wg-kw-catalog-page .wg-apparaten-card-commerce{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  width:100%!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-pricebox{
  display:grid!important;
  justify-items:end!important;
  justify-self:end!important;
  align-self:end!important;
  min-width:max-content!important;
  margin:0!important;
  text-align:right!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-price{
  display:block!important;
  width:max-content!important;
  margin:0 0 0 auto!important;
  text-align:right!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-compare-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  width:100%!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-compare-row__left{
  min-width:0!important;
  justify-self:start!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-price-count--inline{
  justify-self:end!important;
  margin:0!important;
  color:var(--kw-blue)!important;
  font-weight:700!important;
  text-align:right!important;
}

/* Keuzehulp: op mobiel dezelfde hiërarchie, mét duidelijke blauwe CTA onder de tekst. */
@media(max-width:900px){
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:12px!important;
    row-gap:0!important;
    min-height:0!important;
    margin:14px 0 12px!important;
    padding:14px 15px!important;
    border:1px solid #d3e3f2!important;
    border-left:3px solid var(--kw-blue)!important;
    border-radius:8px!important;
    background:var(--kw-blue-soft)!important;
  }
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source .wg-listing-choice__icon{
    display:grid!important;
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:start!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
    color:var(--kw-blue)!important;
    background:#fff!important;
    border:1px solid #d5e2ee!important;
    border-radius:7px!important;
  }
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source .wg-listing-choice__copy{
    display:block!important;
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
  }
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source .wg-listing-choice__copy strong{
    display:block!important;
    margin:0!important;
    color:var(--kw-ink)!important;
    font-family:var(--wg-font-family)!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.35!important;
  }
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source .wg-listing-choice__arrow{
    display:inline-flex!important;
    grid-column:2!important;
    grid-row:2!important;
    align-items:center!important;
    justify-content:center!important;
    justify-self:start!important;
    width:auto!important;
    min-height:36px!important;
    margin:8px 0 0!important;
    padding:0 14px!important;
    color:#fff!important;
    background:var(--kw-blue)!important;
    border-radius:7px!important;
    font-family:var(--wg-font-family)!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source:hover .wg-listing-choice__arrow,
  body .wg-kw-catalog-page .wg-listing-choice--mobile-source:focus-visible .wg-listing-choice__arrow{
    color:#fff!important;
    background:var(--kw-blue-hover)!important;
    text-decoration:none!important;
  }
}

/* Mobiel: dezelfde Koelkastwijzer typografische hiërarchie sitebreed. */
@media(max-width:760px){
  html body{
    font-family:var(--wg-font-family)!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.60!important;
    color:var(--kw-text)!important;
  }
  body :is(
    .wg-listing-intro,.wg-apparaat-hero,.wg-koopgids-page,.wg-knowledge-hero,
    .wg-problem-page,.wg-page,.wg-choice-page,.wg-compare-page,.wg-hub-hero__content,
    .wg-guides-hub__hero-content,.wg-apparatus-guides-hero__content,.wg-brand-guides-hero__content
  ) h1{
    color:var(--kw-ink)!important;
    font-family:var(--wg-heading-font-family)!important;
    font-size:28px!important;
    font-weight:700!important;
    line-height:1.14!important;
    letter-spacing:-.018em!important;
  }
  body :is(
    .wg-page__content,.wg-knowledge-content,.wg-problem__content,.wg-koopgids-page,
    .wg-apparaat-section,.wg-choice-page,.wg-compare-page,.wg-knowledge-hub__body,
    .wg-guides-hub,.wg-problem-page,.wg-listing-bottom,.wg-listing-discovery
  ) h2,
  body :is(.wg-section-heading,.wg-problem-section-heading) h2{
    color:var(--kw-ink)!important;
    font-family:var(--wg-heading-font-family)!important;
    font-size:21px!important;
    font-weight:700!important;
    line-height:1.22!important;
    letter-spacing:-.014em!important;
  }
  body :is(
    .wg-page__content,.wg-knowledge-content,.wg-problem__content,.wg-koopgids-page,
    .wg-apparaat-section,.wg-choice-page,.wg-compare-page,.wg-knowledge-hub__body,
    .wg-guides-hub,.wg-problem-page
  ) h3{
    color:var(--kw-ink)!important;
    font-family:var(--wg-heading-font-family)!important;
    font-size:17px!important;
    font-weight:700!important;
    line-height:1.30!important;
  }
  body :is(
    .wg-page__content,.wg-knowledge-content,.wg-problem__content,.wg-koopgids__content,
    .wg-apparaat-section,.wg-listing-editorial__content,.wg-knowledge-hub__body,.wg-problem-page__content
  ) :is(p,li){
    color:var(--kw-muted)!important;
    font-family:var(--wg-font-family)!important;
    font-size:14.5px!important;
    font-weight:400!important;
    line-height:1.62!important;
  }
  body :is(
    .wg-apparaat-hero__intro,.wg-knowledge-hero__intro,.wg-problem__intro,.wg-page__intro,
    .wg-choice-page__intro,.wg-listing-intro>p,.wg-hub-hero__content>p
  ){
    color:var(--kw-muted)!important;
    font-family:var(--wg-font-family)!important;
    font-size:14.5px!important;
    font-weight:400!important;
    line-height:1.60!important;
  }

  /* Mobiele header / contextnav hetzelfde tekstgewicht als Koelkastwijzer. */
  body .wg-header__navigation>a,
  body .wg-header__mobile-choice-help{
    font-family:var(--wg-font-family)!important;
    font-size:13px!important;
    font-weight:600!important;
  }
  body .wg-context-subnav__topic,
  body .wg-context-subnav__trigger,
  body .wg-context-subnav__desktop-links>a{
    font-family:var(--wg-font-family)!important;
    font-size:13px!important;
    font-weight:600!important;
  }

  /* Breadcrumbs mobiel: compact, zichtbaar huis, geen overdreven tussenruimte. */
  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs){
    flex-flow:row nowrap!important;
    gap:6px!important;
    margin-bottom:16px!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
    font-size:12px!important;
    line-height:1.45!important;
  }
  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs)::-webkit-scrollbar{display:none!important}
  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) > a:first-child{
    flex-basis:20px!important;
    width:20px!important;
    min-width:20px!important;
    height:20px!important;
  }
  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs,.wg-listing-breadcrumbs,.wg-knowledge-breadcrumbs,.wg-koopgids-breadcrumbs,.wg-problem-page__breadcrumbs,.wg-search-page__breadcrumbs) > a:first-child::before{
    width:17px!important;
    height:17px!important;
  }

  /* Catalogus mobiel exact compact zoals Koelkastwijzer. */
  body .wg-kw-catalog-page .wg-listing-intro h1{font-size:28px!important;line-height:1.14!important}
  body .wg-kw-catalog-page .wg-listing-intro>p{font-size:14.5px!important;line-height:1.60!important}
  body .wg-kw-catalog-page .wg-apparaten-card h3{font-size:14px!important;font-weight:700!important;line-height:1.28!important}
  body .wg-kw-catalog-page .wg-apparaten-card-specline{font-size:11px!important;font-weight:400!important;line-height:1.4!important}
  body .wg-kw-catalog-page .wg-apparaten-card-rating{font-size:11px!important}
  body .wg-kw-catalog-page .wg-apparaten-card-price{font-size:17px!important;font-weight:800!important}
  body .wg-kw-catalog-page .wg-apparaten-card-compare,
  body .wg-kw-catalog-page .wg-apparaten-card-detail-link{font-size:10.5px!important;font-weight:400!important}
  body .wg-kw-catalog-page .wg-apparaten-card-price-count--inline{font-size:10.5px!important;font-weight:700!important}
}

/* 3.3.13 — mobiele productkaarten geometrisch gelijkgetrokken met Koelkastwijzer. */
@media(max-width:640px){
  body .wg-kw-catalog-page .wg-apparaten-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    min-height:0!important;
    border-radius:8px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-image{
    grid-column:1!important;
    grid-row:1!important;
    height:100%!important;
    min-height:172px!important;
    padding:10px 7px!important;
    border-right:1px solid var(--wg-kw-border)!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-image img{
    max-width:90px!important;
    max-height:150px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-content{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    padding:11px 10px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-brand{
    margin:0 0 3px!important;
    font-size:10px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card h3{
    min-height:0!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.28!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-specline{
    min-height:0!important;
    margin-top:5px!important;
    font-size:11px!important;
    line-height:1.4!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-commerce{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    margin-top:9px!important;
    padding-top:8px!important;
    border-top:1px solid var(--wg-kw-border)!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-rating{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    min-width:0!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-stars{font-size:11px!important}
  body .wg-kw-catalog-page .wg-apparaten-card-pricebox{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    justify-self:auto!important;
    min-width:0!important;
    margin-left:auto!important;
    text-align:right!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-price{
    width:auto!important;
    margin:0!important;
    font-size:17px!important;
    line-height:1!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-compare-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:8px!important;
    border-top:1px solid var(--wg-kw-border)!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-compare-row__left{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-compare,
  body .wg-kw-catalog-page .wg-apparaten-card-detail-link{
    font-size:10.5px!important;
    line-height:1.2!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-price-count,
  body .wg-kw-catalog-page .wg-apparaten-card-price-count--inline{
    margin-left:auto!important;
    font-size:10px!important;
    font-weight:500!important;
    text-align:right!important;
  }
}

/* 3.3.14 — mobiele productkaart-typografie ruimer, gelijkgetrokken met Koelkastwijzer-weergave. */
@media(max-width:640px){
  body .wg-kw-catalog-page .wg-apparaten-card h3{
    font-size:16px!important;
    line-height:1.25!important;
    font-weight:700!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-brand{
    font-size:10.5px!important;
    line-height:1.2!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-specline{
    font-size:12px!important;
    line-height:1.4!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-rating,
  body .wg-kw-catalog-page .wg-apparaten-card-rating strong{
    font-size:12px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-stars{
    font-size:12px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-price{
    font-size:18px!important;
    line-height:1!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-compare,
  body .wg-kw-catalog-page .wg-apparaten-card-detail-link{
    font-size:11.5px!important;
    line-height:1.2!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-price-count,
  body .wg-kw-catalog-page .wg-apparaten-card-price-count--inline{
    font-size:11px!important;
    font-weight:600!important;
  }
}

/* 3.3.32 — productafbeeldingen op mobiel iets compacter; kaartlayout en tekst blijven ongewijzigd. */
@media (max-width: 640px){
  body .wg-kw-catalog-page .wg-apparaten-card-image img{
    max-width:82px!important;
    max-height:136px!important;
  }
}

/* 3.3.33 — productnaam, kernspecs en prijs iets groter op desktop én mobiel. Alleen typografie; kaartgeometrie blijft gelijk. */
body .wg-kw-catalog-page .wg-apparaten-card h3{
  font-size:16.5px!important;
  line-height:1.24!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-specline{
  font-size:12.5px!important;
  line-height:1.42!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-price{
  font-size:21.5px!important;
  line-height:1!important;
}
@media (max-width:640px){
  body .wg-kw-catalog-page .wg-apparaten-card h3{
    font-size:16.5px!important;
    line-height:1.22!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-specline{
    font-size:13px!important;
    line-height:1.35!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-price{
    font-size:19.5px!important;
    line-height:1!important;
  }
}
@media (max-width:380px){
  body .wg-kw-catalog-page .wg-apparaten-card h3{font-size:16px!important}
  body .wg-kw-catalog-page .wg-apparaten-card-specline{font-size:12.5px!important}
  body .wg-kw-catalog-page .wg-apparaten-card-price{font-size:19px!important}
}

/* 3.3.36 — mobiele wasmachinekaart: inhoud strakker verticaal uitgelijnd.
   Alleen presentatie: afbeelding bovenaan gelijk met modelnaam, iets meer lucht
   vóór Vergelijk/Details en minder loze ruimte onder de onderregel. */
@media (max-width:640px){
  body .wg-kw-catalog-page .wg-apparaten-card{
    min-height:0!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-image{
    align-items:flex-start!important;
    justify-content:center!important;
    min-height:154px!important;
    padding-top:11px!important;
    padding-bottom:6px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-content{
    padding-top:11px!important;
    padding-bottom:6px!important;
  }
  body .wg-kw-catalog-page .wg-apparaten-card-compare-row{
    margin-top:10px!important;
    padding-top:8px!important;
    padding-bottom:0!important;
  }
}