/* Douchekraan.nl — fixes na livegang (auditronde 1, 2026-09-02). Laadt na dk-theme.css. */

/* Header: één zoekpill + CTA op desktop, GP's mobile-control-wrapper alleen op mobiel */
@media (min-width: 1024px) { .dk #mobile-menu-control-wrapper, .dk .mobile-menu-control-wrapper { display: none !important; } }
.dk .menu-bar-items a.dk-header-cta, .dk .menu-bar-items a.dk-header-cta:hover, .dk .menu-bar-items a.dk-header-cta:focus { color: #fff !important; background: var(--c-ink); }
.dk .main-navigation .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle::before { content: none; }
.dk .main-navigation .inside-navigation { flex-wrap: nowrap; max-width: none; }
.dk .site-header .inside-header { flex-wrap: nowrap; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.dk .main-navigation .main-nav { flex: none; }
.dk .main-navigation .main-nav > ul { flex-wrap: nowrap; white-space: nowrap; }
.dk .main-navigation .menu-bar-items { flex: none; }
.dk .dk-search { flex: none; }
.dk .site-header .site-logo img, .dk .site-header img.custom-logo { height: 40px !important; }
@media (max-width: 1023px) {
  .dk .site-header .site-logo img, .dk .site-header img.custom-logo { height: 32px !important; }
  .dk .site-header .inside-header { padding: 8px var(--pad-x) 8px; align-items: center; }
  .dk .main-navigation:not(.toggled) .main-nav > ul { display: none; }
  .dk .main-navigation:not(.toggled) .main-nav { display: none; }
  .dk .main-navigation { gap: 0; }
  .dk .site-header .inside-header { min-height: 64px; }
  .dk .main-navigation .main-nav > ul { margin-top: 4px; }
  .dk .dk-trustbar { gap: 14px; font-size: 12px; padding: 7px 12px; }
  .dk .dk-trustbar span { white-space: nowrap; }
}
@media (max-width: 420px) { .dk .dk-trustbar span:nth-child(2) { display: none; } }

/* Mobiel menu: submenu's pas tonen na tik op het pijltje (GP zet .toggled-on) */
@media (max-width: 1023px) {
  .dk .main-navigation .main-nav ul ul:not(.toggled-on), .dk .main-navigation .main-nav ul li.dk-mega ul:not(.toggled-on) { display: none !important; padding: 0; margin: 0; }
  .dk .main-navigation .main-nav ul li.dk-mega ul.toggled-on { display: flex !important; }
  .dk .main-navigation .main-nav ul li { width: 100%; float: none; clear: both; }
  .dk .main-navigation .main-nav > ul { padding: 8px 0 4px; }
  .dk .dk-filters-close { font-size: 0; }
  .dk .dk-filters-close::before { content: "\2715"; font-size: 18px; line-height: 1; }
}

/* Actieve toggles/chips/knoppen: witte tekst wint van GP's linkkleur */
.dk .dk-toggle a.is-active, .dk .dk-toggle a.is-active:hover, .dk .dk-chip.is-active, .dk .dk-chip.is-active:hover, .dk .dk-check.is-active .dk-check__box, .dk a.dk-btn:not(.dk-btn--secondary):not(.dk-btn--white), .dk a.dk-btn:not(.dk-btn--secondary):not(.dk-btn--white):hover, .dk .dk-pagination .is-current, .dk .woocommerce-pagination .page-numbers.current, .dk .dk-filterbar__btn { color: #fff !important; }
.dk .dk-check.is-active .dk-check__box { background: var(--c-ink); border-color: var(--c-ink); }
.dk .dk-check.is-active .dk-check__box::before { content: "\2713"; font-size: 11px; }

/* Hero: kaartafbeelding niet de herofoto-regels laten erven */
.dk-hero__media .dk-hero__card img { min-height: 0; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; }

/* Panelen begrenzen op de 1440-container, ook op brede schermen */
.dk-panel--hero { width: calc(100% - 48px); max-width: calc(var(--w-container) - 48px); margin: 16px auto 0; }
.dk-about-hero { width: calc(100% - 48px); max-width: calc(var(--w-container) - 48px); margin: 18px auto 0; }
.dk-podium-panel { width: calc(100% - 48px); max-width: calc(var(--w-container) - 48px); margin: 32px auto 0; }
.dk-stats { width: calc(100% - 48px); max-width: calc(var(--w-container) - 48px); margin: 24px auto 0; }
@media (max-width: 767px) {
  .dk-panel--hero, .dk-about-hero { width: calc(100% - 24px); margin: 12px auto 0; }
  .dk-podium-panel { width: calc(100% - 24px); margin: 22px auto 0; }
  .dk-stats { width: calc(100% - 24px); margin: 16px auto 0; }
}

/* Full-width pagina's: broodkruimel binnen de container */
.dk.page.full-width-content .rank-math-breadcrumb { max-width: var(--w-container); margin: 0 auto; padding: 22px var(--pad-x) 0; }
.dk.page.full-width-content .dk-page .rank-math-breadcrumb { padding-left: 0; padding-right: 0; }

/* Blogkop: titelkolom mag groeien */
.dk-blog-head > div:first-child { flex: 1 1 auto; min-width: 0; max-width: 760px; }

/* Formulierknop (CF7 submit) in huisstijl */
.dk input.dk-btn, .dk button.dk-btn, .dk input[type="submit"].dk-btn { background: var(--c-ink); color: #fff; border: 0; border-radius: var(--r-pill); height: 52px; padding: 0 28px; font-weight: 600; font-size: 14px; font-family: var(--f-body); cursor: pointer; }
.dk input.dk-btn:hover, .dk input[type="submit"].dk-btn:hover { background: var(--c-ink-hover); box-shadow: var(--sh-btn-hover); }
.dk .wpcf7-spinner { display: none; }

/* Productbeschrijving (ContentEgg) in de kaart */
.dk-product .dk-card-box h3 { font-size: 18px; line-height: 1.25; margin: 18px 0 8px; }
.dk-product .dk-card-box h3:first-child { margin-top: 0; }
.dk-product .dk-card-box ul { padding-left: 18px; margin: 0 0 14px; }
.dk-product .dk-card-box p { margin: 0 0 12px; }

/* 404 */
.dk.error404 .entry-header { display: block; margin: 14px 0 18px; }
.dk.error404 .entry-title { font-size: var(--fs-h1-page); line-height: var(--lh-h1-page); letter-spacing: var(--ls-h1); }
.dk.error404 .search-form { display: flex; gap: 8px; max-width: 520px; margin-top: 18px; }
.dk.error404 .search-form .search-field { height: 50px; padding: 0 16px; border: 1px solid var(--c-line-input); border-radius: 14px; background: var(--c-white); font-family: var(--f-body); }
.dk.error404 .search-form .search-submit { height: 50px; border-radius: 999px; background: var(--c-ink); color: #fff; border: 0; padding: 0 20px; }

/* Zoekformulier GP (zoekpagina posts) */
.dk .search-form .search-field { height: 50px; padding: 0 16px; border: 1px solid var(--c-line-input); border-radius: 14px; background: var(--c-white); font-family: var(--f-body); }
.dk .search-form .search-submit { height: 50px; border-radius: 999px; background: var(--c-ink); color: #fff; border: 0; padding: 0 20px; }

/* ===== Auditronde 2 (2026-09-03) ===== */

/* Sorteersheet is alleen een mobiel dialoog; buiten de mobiele media-query anders een kaal blok */
.dk .dk-sort-sheet:not(.is-open) { display: none !important; }

/* Blogkop: chips wrappen onder de titel i.p.v. de titelkolom tot nul knijpen */
@media (min-width: 768px) {
  .dk-blog-head { flex-wrap: wrap; align-items: flex-end; }
  .dk-blog-head > div:first-child { flex: 1 1 520px; min-width: 0; max-width: 760px; }
  .dk-blog-head .dk-chips { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; justify-content: flex-end; }
}

/* Aanbiedersrij: lever- en garantiekolom kregen 54/100 px in de tweekolomslayout */
@media (min-width: 768px) {
  .dk .dk-offer { grid-template-columns: 140px minmax(0, 1.3fr) minmax(0, 1fr) 100px 160px; gap: 14px; padding: 16px 20px; }
  .dk .dk-offer > div:nth-child(2), .dk .dk-offer > div:nth-child(3) { font-size: 12.5px; line-height: 1.4; }
  .dk .dk-offer__logo { max-width: 48px; height: auto; }
}

/* GP/dk-theme onderstreept alle links in .entry-content op pagina's; componenten uitzonderen */
body.dk:not(.home) .entry-content :is(.dk-card__title, .dk-row__title, .dk-table__name, .dk-hero__card-name, .dk-featured__title, .dk-productbox__name, .dk-sb-list, .dk-toc, .dk-footer__col, .dk-legalbar, .dk-summary__brand, .dk-buybox__foot) a { text-decoration: none; color: inherit; font-weight: inherit; }
body.dk:not(.home) .entry-content :is(a.dk-btn, a.dk-chip, a.dk-tile, a.dk-guide, a.dk-card__media, a.dk-sb-row, a.dk-also__row, a.dk-check, a.dk-link, .dk-toggle a, .dk-pagination a, .dk-faq__q a, .dk-filters__clear, .dk-strip a, .dk-about-links a, .dk-sb-list a) { text-decoration: none; }
body.dk:not(.home) .entry-content :is(a.dk-sb-row, a.dk-also__row, a.dk-tile, a.dk-guide, a.dk-card__media, a.dk-check) { color: inherit; font-weight: inherit; }
body.dk:not(.home) .entry-content a.dk-btn { color: #fff; font-weight: 600; }
body.dk:not(.home) .entry-content a.dk-btn--secondary, body.dk:not(.home) .entry-content a.dk-btn--white { color: var(--c-ink); }
body.dk:not(.home) .entry-content a.dk-chip { color: var(--c-text); font-weight: 500; }
body.dk:not(.home) .entry-content a.dk-chip.is-active { color: #fff; }
body.dk:not(.home) .entry-content .dk-toggle a { color: var(--c-text-3); font-weight: 500; }
body.dk:not(.home) .entry-content .dk-sb-list a { color: var(--c-text); font-weight: 500; }
body.dk:not(.home) .entry-content .dk-pagination a { color: var(--c-text); font-weight: 500; }

/* Tegels 'Kies per type': vrijstaande productfoto's volledig tonen i.p.v. uitsnijden */
.dk .dk-tile__img { object-fit: contain; background: var(--c-white); padding: 10px 18px; box-sizing: border-box; }
@media (max-width: 767px) { .dk .dk-tile__img { padding: 6px 10px; } }

/* Mobiele header: logo mag niet tot 0 krimpen; zoekpill/CTA alleen in het uitgeklapte menu */
@media (max-width: 1023px) {
  .dk .site-header .site-logo { flex: 0 0 auto; margin-right: auto; }
  .dk .site-header .site-logo img, .dk .site-header img.custom-logo { width: auto; max-width: 150px; }
  .dk .site-header .inside-header { flex-wrap: wrap; justify-content: space-between; }
  .dk .site-header .inside-header > .main-navigation.mobile-menu-control-wrapper { flex: 0 0 auto; margin-left: auto; }
  .dk .site-header .inside-header > .main-navigation:not(.mobile-menu-control-wrapper):not(.toggled) { flex: 0 0 0; width: 0; min-width: 0; overflow: hidden; }
  .dk .site-header .inside-header > #site-navigation.toggled { flex: 0 0 100%; width: 100%; order: 3; }
  .dk .site-header .inside-header > .main-navigation.mobile-menu-control-wrapper.toggled { flex: 0 0 auto; width: auto; }
  .dk .main-navigation:not(.toggled):not(.mobile-menu-control-wrapper) .menu-bar-items { display: none; }
}

/* Mobiel productgrid: geen vaste kolombreedtes */
@media (max-width: 767px) {
  .dk .dk-products, .dk .products.dk-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
  .dk .dk-products, .dk .products.dk-products { grid-template-columns: minmax(0, 1fr); }
}

/* Mobiel uitgeklapt menu: geen tweede zoek/sluit-rij (die zit al in de control-wrapper) */
@media (max-width: 1023px) { .dk #site-navigation .menu-bar-items { display: none !important; } }

/* Sluitknop filters: kruis met CSS tekenen (U+2715 rendert niet in de gebruikte fonts) */
.dk .dk-filters-close { font-size: 0; position: relative; }
.dk .dk-filters-close::before, .dk .dk-filters-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--c-ink); transform: translate(-50%, -50%) rotate(45deg); }
.dk .dk-filters-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Header met 7 menu-items: logo nooit laten krimpen; zoekpill inkorten/verbergen op smallere desktops */
@media (min-width: 1024px) {
  .dk .site-header .site-logo { flex: 0 0 auto; }
  .dk .site-header .site-logo img, .dk .site-header img.custom-logo { width: auto; }
  .dk .main-navigation .main-nav > ul > li > a { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .dk .dk-search { display: none; }
  .dk .main-navigation .main-nav > ul > li > a { padding-left: 8px; padding-right: 8px; font-size: 14px; }
  .dk .site-header .site-logo img, .dk .site-header img.custom-logo { height: 34px !important; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .dk .dk-search { max-width: 170px; }
  .dk .dk-search input { width: 100%; min-width: 0; }
}

/* Top 10 staat op desktop al als knop in de header; menu-item alleen op mobiel */
@media (min-width: 1024px) { .dk .main-navigation .menu-item.dk-desktop-hide { display: none !important; } }
@media (min-width: 1024px) and (max-width: 1199px) { .dk .main-navigation .menu-bar-items a.dk-header-cta { padding-left: 14px; padding-right: 14px; font-size: 13px; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .dk .site-header .inside-header { padding-left: 16px; padding-right: 16px; }
  .dk .main-navigation .main-nav > ul > li > a { padding-left: 6px; padding-right: 6px; }
  .dk .main-navigation .menu-bar-items { margin-left: 4px; }
  .dk .main-navigation .menu-bar-items a.dk-header-cta { padding-left: 12px; padding-right: 12px; }
}

@media (min-width: 1024px) and (max-width: 1099px) { .dk .main-navigation .menu-bar-items a.dk-header-cta { display: none; } }

/* Productgrid: kolommen mogen nooit breder dan de container (minmax 0); 2 kolommen tot 1199 px naast de filtersidebar */
@media (min-width: 768px) { .dk .dk-products, .dk .products.dk-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1199px) { .dk .dk-products, .dk .products.dk-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dk_img width/height-attributen (CLS): hoogte automatisch, component-CSS wint altijd */
:where(.dk img[width][height]) { height: auto; }

/* Laad meer i.p.v. paginering */
.dk .dk-more-hidden { display: none !important; }
.dk .dk-loadmore-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 8px; grid-column: 1 / -1; }
.dk .dk-loadmore { min-width: 240px; }
.dk .dk-pagination-wrap:empty, .dk .dk-blog-pagination:empty { display: none; }

/* Beste-keuze-blok op categoriepagina's groter op desktop */
@media (min-width: 1024px) {
  .dk-shop-head.dk-page-head--grid { grid-template-columns: 1fr 460px; align-items: center; }
  .dk-shop-head .dk-strip { padding: 22px 26px; gap: 20px; font-size: 15px; border-radius: 22px; margin-top: 0; flex-wrap: nowrap; }
  .dk-shop-head .dk-strip__thumb { width: 96px; height: 96px; border-radius: 14px; padding: 6px; box-sizing: border-box; }
  .dk-shop-head .dk-strip br { display: none; }
  .dk-shop-head .dk-strip b { display: block; font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
  .dk-shop-head .dk-strip .dk-meta { font-size: 15px; display: block; margin-bottom: 10px; }
  .dk-shop-head .dk-strip a { display: inline-block; background: var(--c-ink); color: #fff !important; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
  .dk-shop-head .dk-strip a:hover { background: var(--c-ink-hover); }
}

/* SEO-blok categoriepagina: FAQ-kolom sticky naast de tekst, meer lucht boven de FAQ-titel */
@media (min-width: 1024px) {
  .dk .dk-shop-seo { align-items: start; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; }
  .dk .dk-shop-seo > div:last-child { position: sticky; top: 96px; }
}
.dk .dk-shop-seo h2.dk-faq-title { margin: 0 0 18px; }
.dk .dk-shop-seo .dk-faq { gap: 10px; }
@media (max-width: 1023px) { .dk .dk-shop-seo h2.dk-faq-title { margin-top: 8px; } }

/* Filterwaarden voorbij de eerste vijf: verborgen tot "Alle X tonen" (audit 4 sept 2026) */
.dk-check--more.is-hidden{display:none}
/* Top 3 op mobiel: de thumbnailkolom is circa 96 px en klipt met overflow:hidden,
   waardoor "Hoogst gewaardeerd" werd afgekapt. Badge mag afbreken binnen die kolom. */
@media (max-width: 767px) {
  .dk-top3 .dk-card__media .dk-badge--on-media {
    max-width: calc(100% - 6px);
    white-space: normal;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}
/* Mobiele header compacter en logo groter (verzoek 4 sept 2026).
   De toggle met zoek- en menu-icoon blijft 44 px hoog: dat is de minimale
   aanraakmaat volgens de WCAG-richtlijn, dus de winst zit in minder padding
   en een lagere min-height. Logo van 32 naar 38 px; bij 400x125 wordt dat
   circa 122 px breed en blijft dus onder de max-width van 150 px. */
@media (max-width: 1023px) {
  .dk .site-header .inside-header {
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* De header is een flexcontainer met wrap; het lege navigatie-element valt op een
     tweede regel en de row-gap van 12 px telde daardoor mee in de hoogte. De
     kolomafstand blijft, de regelafstand gaat naar nul. */
  .dk .site-header .inside-header {
    row-gap: 0;
  }
  .dk .site-header .site-logo img,
  .dk .site-header img.custom-logo {
    height: 38px !important;
  }
}
/* Tapdoelen op mobiel (audit handzeep 8 sept 2026, C8): chips, filtervinkjes en de soort-toggle
   waren 32-36 px hoog. Minimaal 44 px op aanraakschermen, zonder de desktop te raken. */
@media (max-width: 767px) {
  .dk .dk-chip,
  .dk .dk-check,
  .dk .dk-toggle a,
  .dk .dk-filters__more,
  .dk .dk-spec-more,
  .dk .dk-sort-sheet a,
  .dk .dk-hero__popular a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .dk .dk-check {
    display: flex;
  }
}

/* 2026-09-08 audit B3/C8: accent als tekstkleur via --c-accent-ink (terugval op --c-accent op sites zonder dat token); tikdoelen en kleine tekst op mobiel. */
.dk-badge--best { background: var(--c-accent-ink, var(--c-accent)); }
.dk-stars, .dk-offer__tag, .dk-sticky-cta__label, .dk-table__sub.is-best, .dk-productbox__label { color: var(--c-accent-ink, var(--c-accent)); }
@media (max-width: 767px) { .dk-check { min-height: 44px; } .dk-badge, .dk-offer__tag, .dk-sticky-cta__label { font-size: 12px; } .dk-check__count { font-size: 13px; } }

/* Productbeelden in kaarten: hoogte door het kader laten bepalen.
   dk-theme.css zet `body.dk:not(.home) .entry-content img{height:auto}` voor
   redactionele beelden, maar die regel wint qua specificiteit ook van
   `.dk-card__media img{height:100%}`. Gevolg: op elke niet-homepagina bepaalt de
   eigen verhouding van het productbeeld de hoogte. Een staand beeld (550x570) in
   het 4:3-vak van de podiumkaart werd daardoor 369px hoog in een vak van 267px en
   bovenaan en onderaan bijgesneden. Gemeten op snowboots /top-10-snowboots/, 7 sep 2026. */
.dk .dk-card__media img,
body.dk:not(.home) .entry-content .dk-card__media img{width:100%;height:100%;object-fit:contain}

/* Header: geen horizontale scroll tussen 1024 en 1299 px (audit snowboots 10 sept 2026, C1).
   1) Tussen 1200 en 1299 px pasten menu + zoekveld (170 px) + CTA niet: gemeten 66 px
      overflow op douchekraan en 88 px op snowboots bij 1200 px. Het zoekveld verdween al
      onder 1200 px; die grens schuift naar 1300 px.
   2) Een dropdown rechts in de balk (de mega-dropdown onder "Merken") staat onzichtbaar
      (visibility:hidden) maar absoluut gepositioneerd over de rechterrand, en telt zo mee
      in de paginabreedte: 41 px (douchekraan) en 62 px (snowboots) scroll op 1024 px.
      De mega-dropdown opent daarom rechts uitgelijnd op zijn eigen menu-item. Eerst
      gericht op "de laatste drie items"; dat faalde op douchekraan, waar Merken op
      plek 4 van 7 staat. */
@media (min-width: 1200px) and (max-width: 1299px) { .dk .dk-search { display: none; } }
@media (min-width: 1024px) { .dk .main-navigation .main-nav > ul > li.dk-mega > ul.sub-menu { left: auto; right: 0; } }

/* 2026-09-11 dropdown-brug: dk-theme.css zet het submenu op top: calc(100% + 10px); in dat gat verliest het item zijn :hover en klapt het menu dicht. Onzichtbaar vlak over het gat, alleen op desktop (onder 1024 px staat het submenu static in het mobiele menu en zou het vlak tikken afvangen). */
@media (min-width: 1024px) { .dk .main-navigation .main-nav ul ul::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } }