/* IJzerzaag.nl — site-eigen CSS, geladen na dk-extra.css (zelfde opzet als snelkookpan, trekveer en bbqhoes).
   dk-extra.css blijft byte-gelijk aan douchekraan (54ba8d05, met de dropdownbrug). Het eerste blok hieronder zijn
   fixes die eigenlijk in het designsysteem zelf horen (overgenomen van snelkookpan, 13 sept 2026);
   zodra ze upstream in douchekraans dk-extra.css staan, kunnen ze hier weg. */

/* Prijsbox zonder werkende aanbieding: geen doodlopende weg tonen. */
.dk-buybox__none{margin-top:12px;padding:12px 14px;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-input);font-size:var(--fs-body);line-height:1.5;color:var(--c-text-2)}
.dk-buybox__none a{font-weight:600;color:var(--c-accent);text-decoration:none}
.dk-buybox__none a:hover{text-decoration:underline}

/* Hero op tablet. Tussen 768 en 1023 px is er geen ruimte voor twee kolommen
   naast elkaar: de mediakolom kromp tot een streepje en de productkaart liep
   buiten het paneel. Onder 1024 px stapelen we, net als op mobiel. */
@media (min-width:768px) and (max-width:1023px){
.dk-hero{display:block;padding:40px}
.dk-hero__media{min-height:0;margin-top:28px}
.dk-hero__media img{min-height:0;height:280px;border-radius:18px}
.dk-hero__card{position:relative;left:0;bottom:auto;width:auto;max-width:420px;margin:-48px auto 0}
}
/* Tussen 1024 en 1199 px blijven twee kolommen, maar dan moet 1fr ook echt
   kunnen krimpen: zonder min-width:0 houdt de tekstkolom haar min-content-
   breedte vast en drukt ze de foto weg. */
@media (min-width:1024px) and (max-width:1199px){
.dk-hero>*{min-width:0}
}

/* De productfoto in de herokaart: de sfeerfoto-regel `.dk-hero__media img{height:190px;object-fit:cover}`
   pakt op mobiel ook de productthumb. Eigen maat terug, zodat de zaag niet wordt bijgesneden: 4:3, contain op wit. */
@media (max-width:767px){
.dk-hero__media .dk-hero__card img.dk-hero__card-thumb{display:block;width:100%;height:auto;min-height:0;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:14px;margin:12px 0 10px}
}

/* Productbox in artikelen: body.dk:not(.home) .entry-content img{height:auto} uit dk-theme
   (0,3,1) wint van .dk-productbox img{height:104px}, waardoor staande productfoto's 200+ px
   hoog werden. Gelijke specificiteit plus later geladen (gemeten op handzeep, 9 sept 2026). */
body.dk:not(.home) .entry-content .dk-productbox img{width:104px;height:104px;object-fit:contain}
@media (max-width:767px){body.dk:not(.home) .entry-content .dk-productbox img{width:72px;height:72px}}

/* Podium/kaarten op niet-homepagina's: dezelfde height:auto-regel overstemt de 100% van
   .dk-card__media img (schakelketting, 10 sept 2026). */
body.dk:not(.home) .entry-content .dk-card__media img{height:100%}

/* Beste-pagina (dk_best): tekst + zijbalk sluiten aan op de rechterrand van de secties
   erboven, en de 1fr-kolom mag op mobiel niet meerekken met het productblok. */
@media (min-width:1024px){.dk-guide-body{grid-template-columns:minmax(0,1fr) 360px;gap:64px}.dk-guide-body .dk-prose{max-width:860px}}
@media (max-width:1023px){.dk-guide-body{grid-template-columns:minmax(0,1fr)}.dk-guide-body>*{min-width:0}}

/* Contactformulier (CF7 zet size="40" op de velden): volle kaartbreedte. */
.dk-form-card .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),.dk-form-card .wpcf7 textarea,.dk-form-card .wpcf7 select{width:100%;max-width:100%;box-sizing:border-box}

/* Complianz-banner in huisstijl. Complianz declareert zijn maten als --cmplz_* op :root
   in banner-1-optin.css, dat na deze sheet laadt; html:root weegt zwaarder dan :root. */
html:root{--cmplz_button_border_radius:999px 999px 999px 999px;--cmplz_banner_border_radius:20px 20px 20px 20px;--cmplz_banner_border_width:1px 1px 1px 1px;--cmplz_button_font_size:14px}
/* Kleuren: inkt voor accepteren, lichte steunkleur voor weigeren/voorkeuren, zoals op de zustersites. */
html:root{--cmplz_button_accept_background_color:#16293c;--cmplz_button_accept_border_color:#16293c;--cmplz_button_accept_text_color:#ffffff;--cmplz_button_deny_background_color:#eef1f5;--cmplz_button_deny_border_color:#dde2ea;--cmplz_button_deny_text_color:#172230;--cmplz_button_settings_background_color:#eef1f5;--cmplz_button_settings_border_color:#dde2ea;--cmplz_button_settings_text_color:#172230;--cmplz_hyperlink_color:#9e3a12;--cmplz_slider_active_color:#16293c;--cmplz_banner_border_color:#dde2ea;--cmplz_text_color:#172230}
.cmplz-cookiebanner{font-family:var(--f-body)}
.cmplz-cookiebanner .cmplz-title{font-family:var(--f-head);font-weight:800;color:var(--c-ink)}
#cmplz-manage-consent .cmplz-manage-consent{background:var(--c-ink);color:#fff;border-radius:12px 12px 0 0;font-family:var(--f-body)}
.cmplz-cookies-overview .cmplz-service-description,.cmplz-cookies-overview .cmplz-sharing-data,.cmplz-document .cmplz-service-description,.cmplz-document .cmplz-sharing-data{box-sizing:border-box;max-width:100%}
.cmplz-document,.cmplz-cookies-overview{max-width:100%;overflow-wrap:anywhere}

/* ---------- IJzerzaag.nl ---------- */

/* Logo: 500x126 (3,97:1) past op de portfoliomaat van dk-extra (40 px, onder 1024 px 38 px en max. 150 px
   breed); geen eigen logoregel nodig. Alleen de footer krijgt een vaste hoogte. */
@media (max-width:767px){.dk-footer__brand img{height:32px;width:auto}}

/* Hero-H1 is een zin ("IJzerzaag kopen? Vergelijk de beste ijzerzagen"): tussen 1024 en 1439 schaalt
   hij mee met de breedte. */
@media (min-width:1024px) and (max-width:1439px){.dk-hero h1{font-size:4.2vw}}

/* Prijzen nooit over twee regels. */
.dk-price__value{white-space:nowrap}

/* Contactpagina: de H1 plakte zonder marge tegen de intro. */
.dk-contact-head h1{margin-bottom:14px}

/* Footer: elektrisch/merken en informatie/winkels delen kolommen; de tweede kop krijgt lucht. */
.dk-footer__col b+a{margin-top:0}

/* Figuren in de bestaande gidsen (afbeeldingen van vóór de port). */
.dk-prose figure{margin:28px 0}
.dk-prose figure img{width:100%;height:auto;border-radius:var(--r-img);border:1px solid var(--c-line)}
.dk-prose figcaption{margin-top:8px;font-size:var(--fs-meta);color:var(--c-meta)}

/* [dk_products] in lopende tekst (gidsen): kaarttitel als in het archief; op mobiel één kolom met compacte kaart. */
body.dk .entry-content :is(.dk-grid-2,.dk-grid-3,.dk-grid-4) > *{min-width:0}
body.dk .entry-content .dk-card .dk-card__title{font-size:14.5px;line-height:1.2;margin:0 0 6px;letter-spacing:-.02em}
@media (max-width:767px){
body.dk .entry-content :is(.dk-grid-2,.dk-grid-3){grid-template-columns:1fr}
body.dk .entry-content :is(.dk-grid-2,.dk-grid-3) .dk-card{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px;border-radius:18px;align-items:start}
}

/* Vergelijkingstabel: zes tekstkolommen (merk, type, voeding, bladlengte, tanden, prijs); tot 1024 px de
   omgezette mobiele tabel, en lange modelnamen mogen afbreken. */
@media (min-width:768px) and (max-width:1023px){.dk-table{display:none}.dk-table-m{display:block}}
.dk-table-m__row>*{min-width:0}
.dk-table-m__name{overflow-wrap:anywhere;hyphens:auto}

/* Bol-productfoto's hebben wisselende verhoudingen (zaagbladen zijn lange smalle stroken) en een witte
   achtergrond: contain op wit. */
.dk-card__media img,.dk-tile__img{object-fit:contain;background:#fff}

/* Hero met diepte, zoals op de zustersites: licht blauwgrijs linksboven naar dieper blauwgrijs rechtsonder,
   een zweem logo-oranje achter de productkaart en navy linksonder. Tekst blijft donker op licht; de middelste
   stop op 65 % (geheugen: snowboots, anders zakt de 13px-trustregel onder AA). */
.dk-panel--hero{background:
  radial-gradient(60% 70% at 72% 45%,rgba(234,83,28,.08) 0%,rgba(234,83,28,0) 60%),
  radial-gradient(55% 60% at 0% 100%,rgba(22,41,60,.07) 0%,rgba(22,41,60,0) 70%),
  linear-gradient(135deg,var(--c-panel-light) 0%,var(--c-panel) 65%,#dbe0e8 100%)}
/* Kleine grijze labels in de hero: --c-text-3 (#4b5463) houdt ook op het donkerste punt van het verloop AA. */
.dk-panel--hero .dk-eyebrow,.dk-panel--hero .dk-meta{color:var(--c-text-3)}

/* Secundaire knop bij hover, focus en tik (gemeld op reciprozaag.nl, 13 sept 2026: de knop werd donker zonder zichtbare
   tekst). .dk-btn--secondary:hover zet de achtergrond op inkt en de tekst op wit (0,2,0), maar `.dk a:hover{color:var(--c-ink)}`
   uit dk-theme weegt zwaarder (0,2,1). De !important-bescherming in dk-extra slaat --secondary en --white bewust over; --white
   houdt leesbare inkttekst op een lichte hover, --secondary niet. Hoort upstream in douchekraans dk-extra.css. */
.dk a.dk-btn--secondary:hover,.dk a.dk-btn--secondary:focus,.dk a.dk-btn--secondary:active{color:#fff}