/*
 * Witgoed-Gids 3.3.10 — exacte Koelkastwijzer typografie- en kleurlaag.
 * Alleen presentatie: fonts, maten, gewichten en tekstkleuren.
 * Geen layout-, URL-, filter-, feed-, SEO- of AJAX-logica.
 */
:root{
  --kw-navy:#082b4c;
  --kw-navy-surface:#10395f;
  --kw-navy-2:#113b63;
  --kw-blue:#1769b0;
  --kw-blue-hover:#12588f;
  --kw-cyan:#2a8fbd;
  --kw-cyan-dark:#176f9d;
  --kw-green:#167a5a;
  --kw-green-soft:#ecf7f2;
  --kw-gold:#c99122;
  --kw-gold-soft:#fff7e5;
  --kw-ink:#0b3558;
  --kw-text:#41586d;
  --kw-muted:#5b7084;
  --kw-subtle:#718396;
  --kw-border:#dbe4eb;
  --kw-border-strong:#c8d5df;
  --kw-bg:#f7f9fb;
  --kw-surface:#fff;
  --kw-surface-soft:#f7fafc;
  --kw-blue-soft:#eff6fd;

  --wg-color-primary:var(--kw-blue);
  --wg-color-primary-hover:var(--kw-blue-hover);
  --wg-color-primary-soft:var(--kw-blue-soft);
  --wg-color-text:var(--kw-text);
  --wg-color-heading:var(--kw-ink);
  --wg-color-text-muted:var(--kw-muted);
  --wg-color-text-subtle:var(--kw-subtle);
  --wg-color-border:var(--kw-border);
  --wg-color-border-strong:var(--kw-border-strong);

  --wg-font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --wg-heading-font-family:"Ubuntu","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --wg-font-size-base:15px;
  --wg-font-size-sm:.875rem;
  --wg-font-size-lg:1.0625rem;
  --wg-font-size-eyebrow:12px;
  --wg-font-size-hero:clamp(30px,2.55vw,34px);
  --wg-font-size-section:clamp(22px,1.9vw,25px);
  --wg-font-size-card-title:17px;
  --wg-font-size-intro:16px;
  --wg-line-height-body:1.60;
  --wg-line-height-heading:1.20;

  --kw-type-body-size:15px;
  --kw-type-body-line:1.60;
  --kw-type-body-weight:400;
  --kw-type-ui-weight:600;
  --kw-type-strong-weight:700;
  --kw-type-h1-size:clamp(30px,2.55vw,34px);
  --kw-type-h2-size:clamp(22px,1.9vw,25px);
  --kw-type-h3-size:18px;
  --kw-type-h4-size:16px;
  --kw-type-intro-size:16px;
  --kw-type-card-title-size:17px;
  --kw-type-label-size:13px;
  --kw-type-meta-size:12px;
  --kw-type-button-size:14px;
  --kw-type-breadcrumb-size:12.5px;
}

html,body{font-family:var(--wg-font-family)!important}
body{
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.60!important;
  color:var(--kw-text)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font-family:var(--wg-font-family)!important}

/* Dezelfde algemene basis als Koelkastwijzer. */
body h1,body h2,body h3,body h4,body h5,body h6{
  color:var(--kw-ink);
  font-family:var(--wg-heading-font-family);
  font-weight:700;
  text-wrap:balance;
}
body h1{font-size:var(--kw-type-h1-size);line-height:1.16;letter-spacing:-.022em}
body h2{font-size:var(--kw-type-h2-size);line-height:1.20;letter-spacing:-.018em}
body h3{font-size:var(--kw-type-h3-size);line-height:1.30;letter-spacing:-.01em}
body h4{font-size:16px;line-height:1.32;letter-spacing:-.006em}
body p{color:var(--kw-muted)}
body strong,body b{font-weight:700;color:var(--kw-ink)}
body a{color:var(--kw-blue)}
body a:hover{color:var(--kw-blue-hover)}

/* Primaire pagina-H1's exact dezelfde schaal en kleur. */
body :is(
  .wg-page,.wg-listing-intro,.wg-apparaat-hero,.wg-koopgids-page,
  .wg-knowledge-hero,.wg-problem-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,
  .wg-knowledge-hub__hero-content,.wg-problem-hub__hero-content
) h1,
body :is(.wg-page__title,.wg-listing-intro h1,.wg-apparaat-hero h1){
  color:var(--kw-ink)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-size:var(--kw-type-h1-size)!important;
  font-weight:700!important;
  line-height:1.16!important;
  letter-spacing:-.022em!important;
}

/* Redactionele H2/H3 exact zoals Koelkastwijzer. */
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:var(--kw-type-h2-size)!important;
  font-weight:700!important;
  line-height:1.20!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
) h3,
body :is(.wg-problem-overview__card-title,.wg-problem-card__title){
  color:var(--kw-ink)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.30!important;
  letter-spacing:-.01em!important;
}

/* Bodytekst en intro's. */
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:15px!important;
  font-weight:400!important;
  line-height:1.60!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:16px!important;
  font-weight:400!important;
  line-height:1.58!important;
}

/* Labels/kickers/buttons. */
body :is(
  .wg-hub-eyebrow,.wg-apparaten-eyebrow,.wg-guides-hub__eyebrow,.wg-section-heading__eyebrow,
  .wg-koopgids-editorial__eyebrow,.wg-koopgids-faq__eyebrow,.wg-koopgids-related__eyebrow,
  .wg-problem-page__eyebrow,.wg-problem-section-heading__eyebrow,.wg-knowledge-hub__eyebrow
){
  color:var(--kw-blue)!important;
  font-family:var(--wg-font-family)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.3!important;
}
body :is(.button,.btn,button,[type="submit"],[role="button"]){
  font-family:var(--wg-font-family)!important;
  font-size:14px;
  font-weight:700;
}

/* Header: dezelfde typografische schaal als Koelkastwijzer. */
body .wg-brand-lockup__name{
  color:var(--kw-navy)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-size:21px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
body .wg-brand-lockup__primary{color:var(--kw-navy)!important}
body .wg-brand-lockup__accent{color:var(--kw-blue)!important}
body .wg-brand-lockup__suffix{color:var(--kw-navy)!important;font-weight:700!important}
body .wg-header__navigation>a{
  color:var(--kw-ink)!important;
  font-family:var(--wg-font-family)!important;
  font-size:14.5px!important;
  font-weight:700!important;
  line-height:1.2!important;
}
body .wg-header__navigation>a:hover{color:var(--kw-blue)!important}
body .wg-header__navigation .wg-header__button{
  color:#fff!important;
  font-size:14.5px!important;
  font-weight:700!important;
}
body .wg-context-subnav__topic{
  color:#fff!important;
  font-family:var(--wg-font-family)!important;
  font-size:16.5px!important;
  font-weight:600!important;
  line-height:1.2!important;
}
body .wg-context-subnav__trigger,
body .wg-context-subnav__desktop-links>a{
  color:#fff!important;
  font-family:var(--wg-font-family)!important;
  font-size:16px!important;
  font-weight:600!important;
  line-height:1.2!important;
}
body .wg-context-subnav__dropdown a{
  color:var(--kw-ink)!important;
  font-family:var(--wg-font-family)!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.35!important;
}

/* Breadcrumbs letterlijk dezelfde tekstschaal/kleur als Koelkastwijzer. */
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs){
  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) a{
  color:var(--kw-muted)!important;
  font:inherit!important;
  text-decoration:none!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs) a:hover{color:var(--kw-blue)!important}

/* Catalogus/filter/productkaart: exact dezelfde typografische schaal als Koelkastwijzer. */
body .wg-kw-catalog-page .wg-apparaat-filters__top h3{
  color:var(--kw-ink)!important;font-size:14.5px!important;font-weight:700!important;line-height:1.35!important;
}
body .wg-kw-catalog-page .wg-apparaat-filter-group legend{
  color:var(--kw-ink)!important;font-size:12.5px!important;font-weight:700!important;line-height:1.35!important;
}
body .wg-kw-catalog-page .wg-apparaat-filter-option{
  color:var(--kw-text)!important;font-size:13px!important;font-weight:400!important;line-height:1.34!important;
}
body .wg-kw-catalog-page .wg-apparaat-filter-option small{
  color:var(--kw-subtle)!important;font-size:11px!important;font-weight:400!important;
}
body .wg-kw-catalog-page .wg-apparaten-results__count strong{color:var(--kw-ink)!important;font-size:1.12rem!important;font-weight:700!important}
body .wg-kw-catalog-page .wg-apparaten-results__count span{color:var(--kw-muted)!important;font-size:13.5px!important;font-weight:400!important}
body .wg-kw-catalog-page .wg-apparaten-sort label{color:var(--kw-muted)!important;font-size:13px!important;font-weight:700!important}
body .wg-kw-catalog-page .wg-apparaten-sort select{color:var(--kw-ink)!important;font-size:13px!important;font-weight:400!important}
body .wg-kw-catalog-page .wg-apparaten-card-brand{
  color:var(--kw-subtle)!important;font-size:10.5px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:.05em!important;
}
body .wg-kw-catalog-page .wg-apparaten-card h3,
body .wg-kw-catalog-page .wg-apparaten-card-title,
body .wg-kw-catalog-page .wg-apparaten-card__title{
  color:var(--kw-navy)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-size:14.5px!important;
  font-weight:700!important;
  line-height:1.28!important;
  letter-spacing:0!important;
}
body .wg-kw-catalog-page .wg-apparaten-card h3 a{color:#075db5!important}
body .wg-kw-catalog-page .wg-apparaten-card-specline{color:var(--kw-muted)!important;font-size:11.5px!important;font-weight:400!important;line-height:1.45!important}
body .wg-kw-catalog-page .wg-apparaten-card-rating{font-size:11.5px!important;font-weight:400!important}
body .wg-kw-catalog-page .wg-apparaten-card-rating strong{font-size:11.5px!important;font-weight:700!important}
body .wg-kw-catalog-page .wg-apparaten-card-stars{font-size:12px!important}
body .wg-kw-catalog-page .wg-apparaten-card-price{
  color:var(--kw-navy)!important;font-size:20px!important;font-weight:700!important;line-height:1!important;letter-spacing:-.02em!important;
}
body .wg-kw-catalog-page .wg-apparaten-card-compare{color:#41576d!important;font-size:11.5px!important;font-weight:600!important;line-height:1.2!important}
body .wg-kw-catalog-page .wg-apparaten-card-detail-link{color:var(--kw-subtle)!important;font-size:11.5px!important;font-weight:400!important}
body .wg-kw-catalog-page .wg-apparaten-card-price-count{color:var(--kw-blue)!important;font-size:11px!important;font-weight:600!important}

/* Prijs-popup: dezelfde typografische hiërarchie. */
body .wg-price-modal{font-family:var(--wg-font-family)!important;color:var(--kw-text)!important}
body .wg-price-modal :is(h1,h2,h3,.wg-price-modal__title){font-family:var(--wg-heading-font-family)!important;color:var(--kw-ink)!important;font-weight:700!important}
body .wg-price-modal__title{font-size:18px!important;line-height:1.25!important}
body .wg-price-modal .wg-price-modal__specs-title{font-size:18px!important;line-height:1.30!important}
body .wg-price-modal :is(.wg-price-modal__spec-label,.wg-price-modal__meta,.wg-price-modal__offer-meta){color:var(--kw-muted)!important}
body .wg-price-modal :is(.wg-price-modal__cta,.wg-price-modal__offer-button){font-size:14px!important;font-weight:700!important}

@media(max-width:760px){
  body{font-size:15px!important;line-height:1.60!important}
  body h1{font-size:28px!important;line-height:1.14!important;letter-spacing:-.018em!important}
  body h2{font-size:21px!important;line-height:1.22!important;letter-spacing:-.014em!important}
  body h3{font-size:17px!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){font-size:14.5px!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){font-size:14.5px!important;line-height:1.60!important}

  body .wg-brand-lockup__name{font-size:18.5px!important}
  body .wg-header__navigation>a{font-size:15px!important}
  body .wg-context-subnav__topic{font-size:15px!important}
  body .wg-context-subnav__trigger,
  body .wg-context-subnav__desktop-links>a{font-size:13px!important}

  body .wg-kw-catalog-page .wg-apparaten-card h3,
  body .wg-kw-catalog-page .wg-apparaten-card-title,
  body .wg-kw-catalog-page .wg-apparaten-card__title{font-size:14px!important}
  body .wg-kw-catalog-page .wg-apparaten-card-specline{font-size:11px!important}
  body .wg-kw-catalog-page .wg-apparaten-card-price{font-size:17px!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}
  body .wg-kw-catalog-page .wg-apparaten-card-price-count{font-size:10px!important;font-weight:600!important}

  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs){font-size:12px!important;line-height:1.45!important}
  body .wg-price-modal__title{font-size:17px!important}
}
