/*
 * Witgoed-Gids 3.3.04 — sitebreed Koelkastwijzer typografie- en kleurcontract.
 * Puur presentatie: geen layout-, URL-, filter-, feed- of SEO-logica.
 */

:root{
  /* Exact dezelfde kleurrollen als Koelkastwijzer. */
  --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;
  --kw-danger:#a63838;
  --kw-danger-soft:#fff1f1;

  /* Bestaande Witgoed-Gids componenten lezen deze aliases. */
  --wg-color-primary:var(--kw-blue);
  --wg-color-primary-hover:var(--kw-blue-hover);
  --wg-color-primary-soft:var(--kw-blue-soft);
  --wg-color-primary-muted:#5d7ea8;
  --wg-color-secondary:var(--kw-blue);
  --wg-color-secondary-hover:var(--kw-blue-hover);
  --wg-color-secondary-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-background:var(--kw-surface);
  --wg-color-surface:var(--kw-bg);
  --wg-color-surface-soft:var(--kw-surface-soft);
  --wg-color-surface-strong:#eef2f6;
  --wg-color-border:var(--kw-border);
  --wg-color-border-strong:var(--kw-border-strong);
  --wg-color-success:var(--kw-green);
  --wg-color-warning:#8a6117;
  --wg-color-danger:var(--kw-danger);

  /* Exact dezelfde fontrollen en schaal als Koelkastwijzer. */
  --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-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);
}
body{
  font-size:var(--kw-type-body-size);
  font-weight:400;
  line-height:var(--kw-type-body-line);
  color:var(--kw-text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

button,input,select,textarea{
  font-family:var(--wg-font-family)!important;
}

/* Redactionele koppen: overal dezelfde Ubuntu-hiërarchie. */
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;
}

/* Homepage mag, net als bij Koelkastwijzer, bewust groter blijven. */
body .wg-home-hero__title{
  color:var(--kw-ink)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-weight:700!important;
  line-height:1.14!important;
  letter-spacing:-.024em!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: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,.wg-apparaten-card-title,.wg-apparaten-card__title){
  color:var(--kw-ink)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-size:var(--kw-type-h3-size)!important;
  font-weight:700!important;
  line-height:1.30!important;
  letter-spacing:-.01em!important;
}

/* Lange leestekst 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){
  font-family:var(--wg-font-family)!important;
  font-size:var(--kw-type-body-size)!important;
  font-weight:400!important;
  line-height:var(--kw-type-body-line)!important;
  color:var(--kw-muted)!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-family:var(--wg-font-family)!important;
  font-size:var(--kw-type-intro-size)!important;
  font-weight:400!important;
  line-height:1.58!important;
  color:var(--kw-muted)!important;
}

/* Titels van product- en redactionele kaarten. */
body :is(
  .wg-apparaten-card-title,
  .wg-apparaten-card__title,
  .wg-comparison-product__title,
  .wg-koopgids-card__product-name,
  .wg-koopgids__overview-name
){
  color:var(--kw-ink)!important;
  font-family:var(--wg-heading-font-family)!important;
  font-size:var(--kw-type-card-title-size)!important;
  font-weight:700!important;
  line-height:1.30!important;
}

/* UI: dezelfde kleuren en gewichten als Koelkastwijzer. */
a{color:var(--kw-blue)}
a:hover{color:var(--kw-blue-hover)}
strong,b{font-weight:700;color:var(--kw-ink)}

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:var(--kw-type-button-size);
  font-weight:700;
}

/* Bestaande siteheader, subnav en footer krijgen dezelfde typografische rolverdeling. */
body :is(.site-header,.wg-site-header,.wg-context-subnav,.site-footer,.wg-footer){
  font-family:var(--wg-font-family)!important;
}
body :is(.site-header,.wg-site-header,.wg-context-subnav) a{
  font-family:var(--wg-font-family)!important;
  font-weight:600;
}

/* Breadcrumbs exact dezelfde stijl als Koelkastwijzer, zonder URLs te wijzigen. */
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;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs) a:hover{color:var(--kw-blue)!important}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs) > a:first-child{color:var(--kw-blue)!important}

@media(max-width:760px){
  body{font-size:15px;line-height:1.60}

  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
  ) h1,
  body :is(.wg-page__title,.wg-listing-intro h1,.wg-apparaat-hero h1){
    font-size:28px!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
  ) h2,
  body :is(.wg-section-heading,.wg-problem-section-heading) h2{
    font-size:21px!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,
  body :is(.wg-problem-overview__card-title,.wg-problem-card__title,.wg-apparaten-card-title,.wg-apparaten-card__title){
    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 :is(.wg-apparaten-card-title,.wg-apparaten-card__title,.wg-comparison-product__title,.wg-koopgids-card__product-name,.wg-koopgids__overview-name){font-size:16px!important}
  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){font-size:11px!important}
}

/* 3.3.09 — breadcrumbs exact volgens het huidige Koelkastwijzer-contract. */
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs){
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!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) > *{
  flex:0 0 auto!important;
  margin-left:0!important;
  margin-right:0!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs) > span[aria-hidden="true"]{
  margin:0!important;
  color:#9aa9b7!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,
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs) a:focus-visible{
  color:var(--kw-blue)!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs) [aria-current="page"]{
  color:var(--kw-subtle)!important;
  font:inherit!important;
}
body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-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;
  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) > a:first-child::before{
  content:""!important;
  display:block!important;
  width:17px!important;
  height:17px!important;
  flex:0 0 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;
}

/* Mobiel: dezelfde typografische schaal en kleuren als Koelkastwijzer. */
@media(max-width:760px){
  html,body{font-family:var(--wg-font-family)!important}
  body{font-size:15px!important;line-height:1.60!important;color:var(--kw-text)!important}
  button,input,select,textarea{font-family:var(--wg-font-family)!important}

  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs){
    flex-flow:row nowrap!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1.45!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body :is(.wg-breadcrumbs,.wg-choice-breadcrumbs,.wg-compare-breadcrumbs)::-webkit-scrollbar{display:none!important}

  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) 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: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) 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,
  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: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;
  }
  body :is(.wg-apparaten-card-title,.wg-apparaten-card__title,.wg-comparison-product__title,.wg-koopgids-card__product-name,.wg-koopgids__overview-name){
    font-family:var(--wg-heading-font-family)!important;
    font-size:16px!important;
    font-weight:700!important;
    line-height:1.30!important;
  }
  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:11px!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;
  }
}