/* ==========================================================
   Koelkastwijzer — apparaatpagina v1.3
   Rustige productpagina op basis van de bewezen Wasdrogergids-
   compositie, met een eigen blauw-groen Koelkastwijzer-palet.
   ========================================================== */

.wg-apparaat-page {
    --kw-blue: var(--wg-color-primary);
    --kw-blue-dark: var(--wg-color-primary-hover);
    --kw-blue-soft: var(--wg-color-primary-soft);
    --kw-green: var(--wg-color-secondary);
    --kw-green-dark: var(--wg-color-secondary-hover);
    --kw-green-soft: var(--wg-color-secondary-soft);
    --kw-text: var(--wg-color-text);
    --kw-muted: var(--wg-color-text-muted);
    --kw-border: var(--wg-color-border);
    --kw-border-strong: var(--wg-color-border-strong);
    --kw-white: #fff;
    color: var(--kw-text);
    background: var(--kw-white);
    padding-bottom: 82px;
}

.wg-apparaat-page *,
.wg-apparaat-page *::before,
.wg-apparaat-page *::after { box-sizing: border-box; }

.wg-apparaat-page .wg-container {
    width: min(var(--wg-container-width), calc(100% - (2 * var(--wg-page-gutter))));
    max-width: none;
    margin-inline: auto;
}

.wg-content-container { max-width: 860px; }
.wg-apparaat-page img { display:block; max-width:100%; height:auto; }

/* Breadcrumbs en producthero vormen één rustige, eigen merkzone. */
.wg-apparaat-hero-shell {
    width: 100%;
    background:
        radial-gradient(circle at 88% 10%, rgba(46,123,104,.075), transparent 31%),
        linear-gradient(135deg, #F5FAFB 0%, #F0F7F7 56%, #F8FAF7 100%);
    border-bottom: 1px solid #D9E6E3;
}
.wg-apparaat-hero-shell .wg-apparaat-hero { background:transparent !important; }

.wg-breadcrumbs {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    margin:0;
    padding:var(--wg-page-hero-top) 0 var(--wg-page-breadcrumb-gap);
    color:#7A8D92;
    font-size:13px;
    line-height:1.5;
}
.wg-breadcrumbs a { color:#60777D; text-decoration:none; }
.wg-breadcrumbs a:hover { color:var(--kw-blue); text-decoration:underline; }
.wg-breadcrumbs span[aria-current="page"] { color:#84959A; }

/* Hero */
.wg-apparaat-hero { padding:0 0 var(--wg-page-hero-bottom); }
.wg-apparaat-hero__grid {
    display:grid;
    grid-template-columns:minmax(320px,.92fr) minmax(440px,1.08fr);
    gap:68px;
    align-items:start;
}

.wg-apparaat-hero__media {
    position:relative;
    min-width:0;
    border:1px solid #D3E1DF;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 28px rgba(16,43,53,.055);
    overflow:hidden;
}
.wg-apparaat-hero__image {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:515px;
    padding:44px;
}
.wg-apparaat-image { width:100%; max-width:420px; max-height:455px; object-fit:contain; }
.wg-apparaat-image-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:370px;
    border:2px dashed #D4E2E0;
    border-radius:14px;
    color:#8A9A9E;
    font-size:14px;
}
.wg-product-label {
    position:absolute;
    z-index:2;
    top:18px;
    left:18px;
    display:inline-flex;
    align-items:center;
    min-height:31px;
    padding:6px 11px;
    border:1px solid #DDBA73;
    border-radius:999px;
    background:#FFF8E9;
    color:#715019;
    font-size:11px;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.wg-apparaat-hero__content { min-width:0; padding-top:7px; }
.wg-apparaat-eyebrow {
    margin:0 0 10px;
    color:var(--kw-blue);
    font-size:13px;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}
.wg-apparaat-title {
    max-width:760px;
    margin:0;
    color:var(--wg-color-heading);
    font-size:clamp(34px,4vw,50px);
    font-weight:780;
    letter-spacing:-.036em;
    line-height:1.07;
}
.wg-apparaat-model { margin:12px 0 0; color:#677C82; font-size:14px; }
.wg-apparaat-model strong { color:#314F58; font-weight:700; }
.wg-apparaat-intro {
    max-width:700px;
    margin:20px 0 0;
    color:#516A72;
    font-size:17px;
    line-height:1.7;
}

/* Score */
.wg-review-score {
    display:inline-flex;
    align-items:center;
    gap:13px;
    margin-top:24px;
    padding:9px 14px 9px 9px;
    border:1px solid #D6E3E1;
    border-radius:12px;
    background:rgba(255,255,255,.9);
}
.wg-review-score__number {
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:10px;
    background:var(--kw-blue);
    color:#fff;
    font-size:22px;
    font-weight:800;
    line-height:1;
}
.wg-review-score__content { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.wg-review-score__content strong { color:#24404A; font-size:14px; }
.wg-review-score__stars { position:relative; display:inline-flex; color:#D8E0DE; font-size:14px; letter-spacing:1px; }
.wg-rating-stars__base { color:#D8E0DE; }
.wg-rating-stars__fill { position:absolute; inset:0 auto 0 0; overflow:hidden; color:var(--wg-color-gold); white-space:nowrap; }

/* Kernspecificaties: herkenbare 2x2 productdata zoals op Wasdrogergids. */
.wg-hero-specs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:28px 0 0;
    padding:0;
}
.wg-hero-spec {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:72px;
    padding:13px 14px;
    border:1px solid #D2E1DF;
    border-radius:12px;
    background:#fff;
}
.wg-hero-spec__icon {
    position:relative;
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--kw-blue-soft);
    color:var(--kw-blue);
}
.wg-hero-spec:nth-child(2n) .wg-hero-spec__icon {
    background:var(--kw-green-soft);
    color:var(--kw-green);
}
.wg-hero-spec__text { min-width:0; }
.wg-hero-spec__label,
.wg-hero-spec__value { display:block; margin:0; }
.wg-hero-spec__label { margin-bottom:2px; color:#6C8086; font-size:11px; font-weight:600; }
.wg-hero-spec__value { color:#173741; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }

/* CSS-iconen zonder extra requests. */
.wg-hero-spec__icon::before,
.wg-hero-spec__icon::after { content:""; position:absolute; }
/* Totale inhoud: eenvoudige koelkast/capacity-box */
.wg-hero-spec__icon--capacity::before {
    left:11px; top:8px; width:17px; height:24px;
    border:2px solid currentColor; border-radius:3px;
}
.wg-hero-spec__icon--capacity::after {
    left:11px; top:19px; width:17px; border-top:2px solid currentColor;
}
/* Energie: blad */
.wg-hero-spec__icon--energy::before {
    left:11px; top:9px; width:18px; height:21px;
    border:2px solid currentColor; border-radius:18px 4px 18px 4px;
    transform:rotate(11deg);
}
.wg-hero-spec__icon--energy::after {
    left:14px; top:20px; width:15px; border-top:2px solid currentColor; transform:rotate(-42deg);
}
/* Geluid */
.wg-hero-spec__icon--sound::before {
    left:9px; top:15px; width:9px; height:11px;
    border:2px solid currentColor; border-right:0; border-radius:3px 0 0 3px;
}
.wg-hero-spec__icon--sound::after {
    left:18px; top:11px; width:12px; height:18px;
    border:2px solid currentColor; border-left:0; border-radius:0 18px 18px 0;
}
/* Anti-ijsvorming: sneeuwvlok */
.wg-hero-spec__icon--snow::before {
    left:19px; top:8px; width:2px; height:24px; background:currentColor; border-radius:2px;
    box-shadow:0 0 0 currentColor;
}
.wg-hero-spec__icon--snow::after {
    left:8px; top:19px; width:24px; height:2px; background:currentColor; border-radius:2px;
    transform:rotate(45deg); box-shadow:0 0 0 currentColor;
}

/* Aanbieders: duidelijk affiliateblok, maar redactioneel rustig. */
.wg-apparaat-page .wg-offers-card {
    margin-top:22px;
    background:#fff;
    border:1px solid #C8DAD7;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(16,43,53,.04);
    overflow:hidden;
}
.wg-apparaat-page .wg-offers-card__header {
    padding:15px 18px 13px;
    background:#F7FAF9;
    border-bottom:1px solid #D6E3E1;
}
.wg-apparaat-page .wg-offers-card__title { font-size:16px; font-weight:800; }
.wg-apparaat-page .wg-offers-card__intro { margin-top:3px; color:#667C82; font-size:12px; }
.wg-apparaat-page .wg-offers-card__row { padding:14px 18px; gap:18px; }
.wg-apparaat-page .wg-offers-card__row:hover { background:#F6FAF9; }
.wg-apparaat-page .wg-offers-card__logo { width:39px; height:39px; border-radius:8px; }
.wg-apparaat-page .wg-offers-card__store-name { color:#263F48; font-size:14px; font-weight:700; }
.wg-apparaat-page .wg-offers-card__button {
    min-height:42px;
    padding:0 15px;
    background:var(--kw-blue);
    border-color:var(--kw-blue);
    border-radius:8px;
    color:#fff;
    font-size:13px;
    font-weight:800;
}
.wg-apparaat-page .wg-offers-card__row:hover .wg-offers-card__button { background:var(--kw-blue-dark); border-color:var(--kw-blue-dark); }

/* Sticky inhoudsnavigatie */
.wg-apparaat-nav {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.975);
    border-bottom:1px solid #DBE6E4;
    box-shadow:0 1px 0 rgba(16,43,53,.025);
    backdrop-filter:blur(8px);
}
.wg-apparaat-nav__inner {
    display:flex;
    gap:30px;
    overflow:auto;
    width:min(860px,calc(100% - 40px));
    margin-inline:auto;
    scrollbar-width:none;
}
.wg-apparaat-nav__inner::-webkit-scrollbar { display:none; }
.wg-apparaat-nav a {
    flex:0 0 auto;
    padding:15px 0 13px;
    border-bottom:2px solid transparent;
    color:#5D737A;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.wg-apparaat-nav a:hover,
.wg-apparaat-nav a:focus-visible { border-bottom-color:var(--kw-blue); color:var(--kw-blue-dark); }

/* Inhoud: meer wit, minder grijze/blauwe massa. */
.wg-apparaat-section { padding:62px 0; background:#fff; }
.wg-apparaat-section--muted {
    background:#F6F9F8;
    border-block:1px solid #DFE8E6;
}
.wg-section-heading { max-width:760px; margin-bottom:28px; }
.wg-section-heading__eyebrow {
    display:block;
    margin-bottom:7px;
    color:var(--kw-blue);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.wg-section-heading h2,
.wg-review-section__title {
    margin:0;
    color:var(--wg-color-heading);
    font-size:var(--wg-font-size-section);
    font-weight:760;
    line-height:1.17;
    letter-spacing:-.027em;
}
.wg-section-heading p { max-width:70ch; margin:10px 0 0; color:#566E75; font-size:14px; line-height:1.72; }

.wg-editorial-section { padding:62px 0; background:#fff; border:0; box-shadow:none; }
.wg-editorial-intro,
.wg-editorial-conclusion,
.wg-editorial-key-quality {
    margin:0 0 20px;
    padding:0 0 20px;
    background:transparent;
    border:0;
    border-bottom:1px solid #E0E8E6;
    border-radius:0;
    box-shadow:none;
}
.wg-editorial-section p,
.wg-editorial-key-quality__text,
.wg-editorial-intro p,
.wg-editorial-conclusion p { margin:0; color:#4F676F; font-size:15px; line-height:1.78; }
.wg-editorial-attention {
    margin:22px 0;
    padding:18px 20px;
    background:var(--wg-color-warning-soft);
    border:1px solid #EAD4A5;
    border-radius:10px;
}

.wg-review-sections { display:grid; gap:0; border-top:1px solid #DEE8E6; }
.wg-review-section { padding:25px 0; background:transparent; border:0; border-bottom:1px solid #DEE8E6; border-radius:0; box-shadow:none; }
.wg-review-section__title { margin-bottom:10px; font-size:21px; }
.wg-review-section__body,
.wg-review-section__body p { color:#536B72; font-size:15px; line-height:1.76; }
.wg-review-points { display:grid; gap:8px; margin-top:14px; padding:0; list-style:none; }
.wg-review-points li { position:relative; padding-left:22px; color:#536B72; font-size:14px; line-height:1.6; }
.wg-review-points li::before { content:"✓"; position:absolute; left:0; color:var(--kw-green); font-weight:800; }

.wg-pros-cons-grid,
.wg-suitability-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.wg-pros-cons-card,
.wg-suitability-card {
    padding:21px;
    background:#fff;
    border:1px solid #D5E2E0;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(16,43,53,.035);
}
.wg-pros-cons-card h2,
.wg-suitability-card h2,
.wg-pros-cons-card h3,
.wg-suitability-card h3 { margin:0 0 12px; color:#1A3741; font-size:17px; }
.wg-pros-cons-card ul,
.wg-suitability-card ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.wg-pros-cons-card li,
.wg-suitability-card li { position:relative; padding-left:22px; color:#526970; font-size:14px; line-height:1.58; }
.wg-pros-cons-card--pros li::before,
.wg-suitability-card--positive li::before { content:"+"; position:absolute; left:0; color:var(--kw-green); font-weight:800; }
.wg-pros-cons-card--cons li::before,
.wg-suitability-card--negative li::before { content:"−"; position:absolute; left:0; color:var(--wg-color-danger); font-weight:800; }

/* Specificaties: compacte technische tabellen, volledig in HTML. */
.wg-specification-details { margin-top:26px; }
.wg-specification-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wg-specification-group {
    align-self:start;
    overflow:hidden;
    background:#fff;
    border:1px solid #D1DFDD;
    border-radius:12px;
    box-shadow:none;
}
.wg-specification-group__header {
    padding:16px 17px 14px;
    background:linear-gradient(135deg,var(--kw-blue-soft),#F1F7F5);
    border-bottom:1px solid #D7E4E2;
}
.wg-specification-group:nth-child(even) .wg-specification-group__header {
    background:linear-gradient(135deg,var(--kw-green-soft),#F5F9F7);
}
.wg-specification-group__title { margin:0; color:#173640; font-size:16px; font-weight:800; }
.wg-specification-group__description { margin:4px 0 0; color:#697D82; font-size:11px; line-height:1.5; }
.wg-specification-group__list { display:grid; }
.wg-specification-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:12px 16px;
    border-top:1px solid #E1E9E7;
    font-size:13px;
}
.wg-specification-row:first-child { border-top:0; }
.wg-specification-row span,
.wg-specification-row dt { color:#5D737A; }
.wg-specification-row strong,
.wg-specification-row dd { margin:0; color:#1B3943; font-weight:750; text-align:right; font-variant-numeric:tabular-nums; }

.wg-secondary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 15px;
    background:#fff;
    border:1px solid #BCD0CD;
    border-radius:8px;
    color:var(--kw-blue);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

/* Expertblok */
.wg-apparaat-page .wg-expert-box { width:min(860px,calc(100% - 40px)); margin:52px auto 12px; }
.wg-apparaat-page .wg-expert-box__inner {
    grid-template-columns:54px minmax(0,1fr);
    gap:18px;
    padding:22px 24px;
    background:#F7FAF9;
    border:1px solid #D2E0DE;
    border-left:4px solid var(--kw-green);
    border-radius:12px;
}
.wg-apparaat-page .wg-expert-box__icon { width:54px; height:54px; }

@media (max-width: 930px) {
    .wg-apparaat-hero__grid { grid-template-columns:minmax(270px,.84fr) minmax(0,1.16fr); gap:40px; }
    .wg-apparaat-title { font-size:clamp(2.05rem,5vw,2.75rem); }
}
@media (max-width: 820px) {
    .wg-apparaat-page .wg-container,
    .wg-content-container,
    .wg-apparaat-nav__inner { width:calc(100% - 32px); }
    .wg-apparaat-hero__grid { grid-template-columns:1fr; gap:28px; }
    .wg-apparaat-hero__media { max-width:560px; width:100%; margin-inline:auto; }
    .wg-apparaat-hero__image { min-height:330px; padding:32px; }
    .wg-apparaat-image { max-height:310px; }
    .wg-apparaat-hero__content { max-width:680px; }
    .wg-specification-groups { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
    .wg-apparaat-hero { padding-bottom:36px; }
    .wg-breadcrumbs { padding-top:var(--wg-page-hero-top-mobile); padding-bottom:var(--wg-page-breadcrumb-gap-mobile); }
    .wg-apparaat-hero__image { min-height:285px; padding:24px; }
    .wg-apparaat-image { max-height:265px; }
    .wg-apparaat-title { font-size:2.05rem; }
    .wg-apparaat-intro { font-size:15px; }
    .wg-hero-specs { grid-template-columns:1fr 1fr; gap:9px; }
    .wg-hero-spec { min-height:68px; padding:11px; gap:9px; }
    .wg-hero-spec__icon { flex-basis:36px; width:36px; height:36px; }
    .wg-apparaat-page .wg-offers-card__row { align-items:stretch; flex-direction:column; gap:12px; }
    .wg-apparaat-page .wg-offers-card__button { width:100%; justify-content:space-between; }
    .wg-apparaat-section,
    .wg-editorial-section { padding:46px 0; }
    .wg-pros-cons-grid,
    .wg-suitability-grid { grid-template-columns:1fr; }
    .wg-specification-row { grid-template-columns:1fr; gap:3px; }
    .wg-specification-row strong,
    .wg-specification-row dd { text-align:left; }
    .wg-apparaat-page .wg-expert-box { width:calc(100% - 32px); }
    .wg-apparaat-page .wg-expert-box__inner { grid-template-columns:1fr; padding:20px; }
}