/* Wifiwijs theme */
:root {
    --navy: #031a6b;
    --indigo: #6772e5;
    --lavender: #f2f2fc;
    --periwinkle: #a7b2e5;
    --green: #7fe07f;
    --grey: #757575;
    --text: #111;
    --muted: #555;
    --radius: 18px;
}

* { box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: Poppins, system-ui, sans-serif; color: var(--text); line-height: 1.7; font-size: 18px; font-weight: 500; }
img { max-width: 100%; height: auto; }
main { flex: 1 0 auto; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Header and menu, as on WordPress: a dark panel per item (columns of links with an icon, a darker footer row with
   "all products" links); up to 1000px a dark pill burger opens one dark panel with every column under each other. */
.site-header { background: #fff; position: relative; z-index: 20; box-shadow: 0 1px 0 #eee; }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 75px; }
.logo img { width: 75px; display: block; }
.nav-toggle, .nav-burger, .nav-close { display: none; }
.main-nav { flex: 1; }
.nav-items { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.nav-item { position: static; }
.nav-link { position: relative; font: 700 19px/75px Poppins, system-ui, sans-serif; color: #1c1c25; background: none; border: 0; padding: 0 22px; cursor: pointer; }
.nav-link::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-4px) rotate(45deg); opacity: .5; }
.nav-panel { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); background: #1c1c25; color: #f8f9fe; border-radius: 15px; box-shadow: 4px 5px 15px rgba(0, 0, 0, .25); overflow: hidden; }
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel { display: block; }
.nav-item-left, .nav-item-right { position: relative; }
.nav-item-left .nav-panel { left: 0; transform: none; }
.nav-item-right .nav-panel { left: auto; right: 0; transform: none; }
.nav-item:hover .nav-link, .nav-item:focus-within .nav-link { color: var(--indigo); }
/* The small arrow from the open item to its panel */
.nav-item:is(:hover, :focus-within) .nav-link::before { content: ""; position: absolute; left: 50%; bottom: -6px; z-index: 1; width: 12px; height: 12px; margin-left: -6px; background: #1c1c25; border-radius: 4px 0 0; transform: rotate(45deg); }
.nav-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; padding: 20px; }
.nav-col-title { position: relative; left: 15px; margin: 1em 0; font-size: 16px; font-weight: 600; line-height: 1.7; text-transform: uppercase; color: #b7b7b7; }
.nav-col ul { list-style: none; margin: 0 0 25px; padding: 0; }
.nav-col li { margin: 0 0 10px; }
.nav-col a { display: flex; align-items: center; gap: 12.5px; padding: 5px 15px; border-radius: 30px; color: #f8f9fe; font-size: 16px; font-weight: 500; line-height: 1.7; white-space: nowrap; }
.nav-col a:hover { background: #2d2d38; color: var(--indigo); text-decoration: none; }
.nav-icon { flex: none; display: inline-block; width: 24px; height: 24px; background-color: #f8f9fe; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
.nav-col a:hover .nav-icon { background-color: var(--indigo); }
.nav-more { display: flex; flex-wrap: wrap; align-items: center; column-gap: 40px; margin: 0; padding: 20px; background: #16161d; }
.nav-more a { display: block; margin: 10px 0 12px 20px; color: #b7b7b7; font-size: 14px; font-weight: 600; line-height: 24px; white-space: nowrap; }
.nav-more a:hover { opacity: .75; text-decoration: none; }
.nav-more .nav-icon { position: relative; top: 5px; left: -5px; width: 22px; height: 22px; background-color: #b7b7b7; }
.nav-more-arrow::after { content: ">"; display: inline-block; padding-left: 5px; transition: padding .25s; }
.nav-more a:hover .nav-more-arrow::after { padding-left: 10px; }
.nav-more-column { flex-direction: column; align-items: flex-start; }
.nav-close { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 .28125c4.8164 0 8.7188 3.90234 8.7188 8.71875 0 4.8164-3.9024 8.7188-8.7188 8.7188C4.18359 17.7188.28125 13.8164.28125 9 .28125 4.18359 4.18359.28125 9 .28125zM4.725 11.2887c-.16523.1652-.16523.4324 0 .5976l1.39219 1.3887c.16523.1652.43242.1652.59765 0L9 10.9688l2.2887 2.3062c.1652.1652.4324.1652.5976 0l1.3887-1.3922c.1652-.1652.1652-.4324 0-.5976L10.9688 9l2.3062-2.28867c.1652-.16524.1652-.43242 0-.59766l-1.3922-1.39219c-.1652-.16523-.4324-.16523-.5976 0L9 7.03125 6.71133 4.725c-.16524-.16523-.43242-.16523-.59766 0L4.72148 6.11719c-.16523.16523-.16523.43242 0 .59765L7.03125 9 4.725 11.2887z' fill='%23B7B7B7'/%3E%3C/svg%3E"); }
.nav-close:hover { opacity: .75; }
.nav-icon-laptop { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' class='svg-inline--fa fa-laptop fa-w-20 fa-3x' data-icon='laptop' data-prefix='fad' viewBox='0 0 640 512'%3E%3Cg class='fa-group'%3E%3Cpath fill='currentColor' d='M528 0H112a48.14 48.14 0 00-48 48v336h512V48a48.14 48.14 0 00-48-48zm-16 320H128V64h384z' class='fa-secondary'/%3E%3Cpath fill='currentColor' d='M512 64H128v256h384zm112 352H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33-17.47-32.77-32H16a16 16 0 00-16 16v16a64.19 64.19 0 0064 64h512a64.19 64.19 0 0064-64v-16a16 16 0 00-16-16z'/%3E%3C/g%3E%3C/svg%3E"); }
.nav-icon-chrome { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' class='svg-inline--fa fa-chrome fa-w-16 fa-3x' data-icon='chrome' data-prefix='fab' viewBox='0 0 496 512'%3E%3Cpath fill='currentColor' d='M131.5 217.5L55.1 100.1c47.6-59.2 119-91.8 192-92.1 42.3-.3 85.5 10.5 124.8 33.2 43.4 25.2 76.4 61.4 97.4 103L264 133.4c-58.1-3.4-113.4 29.3-132.5 84.1zm32.9 38.5c0 46.2 37.4 83.6 83.6 83.6s83.6-37.4 83.6-83.6-37.4-83.6-83.6-83.6-83.6 37.3-83.6 83.6zm314.9-89.2L339.6 174c37.9 44.3 38.5 108.2 6.6 157.2L234.1 503.6c46.5 2.5 94.4-7.7 137.8-32.9 107.4-62 150.9-192 107.4-303.9zM133.7 303.6L40.4 120.1C14.9 159.1 0 205.9 0 256c0 124 90.8 226.7 209.5 244.9l63.7-124.8c-57.6 10.8-113.2-20.8-139.5-72.5z'/%3E%3C/svg%3E"); }
.nav-icon-ribbon { mask-image: url("data:image/svg+xml,%3Csvg width='20' height='26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.942 18.415c.452-.441.216-.317 1.308-.602.495-.13.93-.378 1.324-.676l2.363 5.648c.229.547-.198 1.142-.803 1.12l-2.744-.103-1.888 1.944c-.417.429-1.148.295-1.377-.252l-2.71-6.48a3.854 3.854 0 001.839.486c1.015 0 1.97-.385 2.688-1.085zm-14.88 4.37l2.364-5.648c.393.298.829.547 1.324.676 1.097.287.857.162 1.308.602A3.828 3.828 0 007.747 19.5a3.86 3.86 0 001.839-.486l-2.711 6.48c-.229.547-.96.68-1.377.252L3.61 23.802l-2.744.102c-.605.023-1.032-.572-.803-1.119zm6.24-5.52c-.796-.789-.887-.72-2.02-1.022a2.09 2.09 0 01-1.483-1.472c-.39-1.442-.289-1.268-1.352-2.323a2.07 2.07 0 01-.542-2.01c.389-1.44.39-1.24 0-2.682a2.07 2.07 0 01.542-2.01C2.51 4.69 2.41 4.864 2.8 3.422a2.09 2.09 0 011.483-1.471C5.734 1.564 5.559 1.665 6.623.61A2.108 2.108 0 018.648.07c1.452.386 1.25.386 2.704 0a2.107 2.107 0 012.025.539c1.063 1.055.888.954 2.34 1.34A2.09 2.09 0 0117.2 3.423c.39 1.442.289 1.268 1.352 2.324.53.525.737 1.292.543 2.01-.39 1.44-.39 1.239 0 2.682a2.072 2.072 0 01-.543 2.01c-1.063 1.055-.962.881-1.352 2.323a2.09 2.09 0 01-1.482 1.472c-1.166.31-1.253.261-2.02 1.023a2.11 2.11 0 01-2.59.295 2.106 2.106 0 00-2.216 0 2.109 2.109 0 01-2.59-.295zm8.612-8.33c0-2.692-2.2-4.875-4.914-4.875-2.714 0-4.913 2.183-4.913 4.876 0 2.693 2.2 4.876 4.913 4.876s4.914-2.183 4.914-4.876z' fill='%23fff'/%3E%3C/svg%3E"); }
.nav-icon-tv { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-icon='tv' data-prefix='far' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M592 0H48A48 48 0 000 48v320a48 48 0 0048 48h248v48H112a16 16 0 00-16 16v16a16 16 0 0016 16h416a16 16 0 0016-16v-16a16 16 0 00-16-16H344v-48h248a48 48 0 0048-48V48a48 48 0 00-48-48zm0 368H48V48h544z'/%3E%3C/svg%3E"); }
.nav-icon-questionmark2 { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='far' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M199.65 0C125.625 0 69.665 30.187 27.21 92.51c-19.17 28.15-12.94 66.3 14.17 86.86l36.73 27.85c10.81 8.2 24.19 12.79 37.74 12.96-11.84 19-17.82 40.61-17.82 64.55v11.43c0 16.38 6.2 31.34 16.38 42.65C97.99 357.2 88 381.45 88 408c0 57.35 46.65 104 104 104s104-46.65 104-104c0-26.55-9.99-50.8-26.41-69.19 8.66-9.62 14.43-21.87 15.97-35.38 28.287-16.853 96-48.895 96-138.21C381.56 71.151 290.539 0 199.65 0zM192 464c-30.88 0-56-25.12-56-56 0-30.873 25.118-56 56-56 30.887 0 56 25.132 56 56 0 30.88-25.12 56-56 56zm45.97-176.21v8.37c0 8.788-7.131 15.84-15.84 15.84h-60.26c-8.708 0-15.84-7.051-15.84-15.84v-11.43c0-47.18 35.77-66.04 62.81-81.2 23.18-13 37.39-21.83 37.39-39.04 0-22.77-29.04-37.88-52.52-37.88-30.61 0-44.74 14.49-64.6 39.56-5.365 6.771-15.157 8.01-22 2.8l-36.73-27.85c-6.74-5.11-8.25-14.6-3.49-21.59C98.08 73.73 137.8 48 199.65 48c64.77 0 133.91 50.56 133.91 117.22 0 88.51-95.59 89.87-95.59 122.57z'/%3E%3C/svg%3E"); }
.nav-icon-router { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-icon='router' data-prefix='fas' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M528 320H376v-80a16 16 0 00-16-16h-16a16 16 0 00-16 16v80H48a48 48 0 00-48 48v96a48 48 0 0048 48h480a48 48 0 0048-48v-96a48 48 0 00-48-48zM96 448a32 32 0 1132-32 32 32 0 01-32 32zm96 0a32 32 0 1132-32 32 32 0 01-32 32zm-32.59-320.34a15.85 15.85 0 0021.86.64c96.45-86.55 244.24-85.85 341.11.42a16 16 0 0021.84-.63l22.71-22.7a16.11 16.11 0 00-.71-23.34C444.81-27.34 259.26-27.34 137.78 82a16.11 16.11 0 00-.71 23.34zm46.47 38a16.12 16.12 0 00-.86 23.61L227.73 212a15.94 15.94 0 0021.7.78c58.77-49.84 145.8-49.36 205.14.21a16.07 16.07 0 0021.63-.84l22.8-22.8a16.22 16.22 0 00-.84-23.63c-83.83-71.91-208.42-71.91-292.28-.06z'/%3E%3C/svg%3E"); }
.nav-icon-stopcontact { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-icon='plug' data-prefix='far' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M312 24a24 24 0 00-48 0v88h48zm-192 0a24 24 0 00-48 0v88h48zm248 120H16a16 16 0 00-16 16v16a16 16 0 0016 16h16v64c0 80.14 59.11 145.92 136 157.58V512h48v-98.42c76.89-11.66 136-77.44 136-157.58v-64h16a16 16 0 0016-16v-16a16 16 0 00-16-16zm-64 112a112 112 0 01-224 0v-64h224z'/%3E%3C/svg%3E"); }
.nav-icon-google { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-icon='google' data-prefix='fab' viewBox='0 0 488 512'%3E%3Cpath fill='currentColor' d='M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z'/%3E%3C/svg%3E"); }
.nav-icon-crown { mask-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='crown' class='svg-inline--fa fa-crown fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M528 448H112c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm64-320c-26.5 0-48 21.5-48 48 0 7.1 1.6 13.7 4.4 19.8L476 239.2c-15.4 9.2-35.3 4-44.2-11.6L350.3 85C361 76.2 368 63 368 48c0-26.5-21.5-48-48-48s-48 21.5-48 48c0 15 7 28.2 17.7 37l-81.5 142.6c-8.9 15.6-28.9 20.8-44.2 11.6l-72.3-43.4c2.7-6 4.4-12.7 4.4-19.8 0-26.5-21.5-48-48-48S0 149.5 0 176s21.5 48 48 48c2.6 0 5.2-.4 7.7-.8L128 416h384l72.3-192.8c2.5.4 5.1.8 7.7.8 26.5 0 48-21.5 48-48s-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E"); }
.nav-icon-contact { mask-image: url("data:image/svg+xml,%3Csvg width='23' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6111 7.5c0-3.45313-3.7175-6.25-8.30554-6.25C3.71753 1.25 0 4.04687 0 7.5c0 1.33984.563021 2.5742 1.51736 3.5938C.982292 12.2734.0998264 13.2109.0878472 13.2227c-.0878472.0898-.1118055.2226-.0598958.3398s.1637156.1875.2914926.1875c1.461456 0 2.671356-.4805 3.541836-.9766 1.28577.6133 2.80712.9766 4.44428.9766 4.58804 0 8.30554-2.7969 8.30554-6.25zm4.8715 8.5938C22.437 15.0781 23 13.8398 23 12.5c0-2.61328-2.1363-4.85156-5.163-5.78516.0359.25782.0519.51953.0519.78516 0 4.1367-4.3005 7.5-9.58334 7.5-.43125 0-.85053-.0312-1.2658-.0742C8.29757 17.1719 11.2524 18.75 14.6944 18.75c1.6372 0 3.1586-.3594 4.4443-.9766.8705.4961 2.0804.9766 3.5419.9766.1277 0 .2435-.0742.2914-.1875.052-.1133.028-.2461-.0598-.3398-.012-.0118-.8945-.9454-1.4296-2.1289z' fill='%23fff'/%3E%3C/svg%3E"); }
.nav-icon-questionmark { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.656 11c0 5.887-4.771 10.656-10.656 10.656C5.115 21.656.344 16.886.344 11 .344 5.117 5.115.344 11 .344 16.885.344 21.656 5.117 21.656 11zm-10.37-7.133c-2.342 0-3.835.987-5.008 2.74a.516.516 0 00.117.698l1.49 1.13c.224.17.543.13.717-.09.767-.974 1.294-1.538 2.462-1.538.878 0 1.963.564 1.963 1.416 0 .643-.53.974-1.397 1.46-1.011.566-2.349 1.271-2.349 3.036v.172c0 .284.231.515.516.515h2.406c.285 0 .516-.23.516-.515v-.058c0-1.223 3.574-1.274 3.574-4.583 0-2.492-2.585-4.383-5.007-4.383zM11 14.523c-1.09 0-1.977.887-1.977 1.977S9.91 18.477 11 18.477s1.977-.887 1.977-1.977-.887-1.977-1.977-1.977z' fill='%23B7B7B7'/%3E%3C/svg%3E"); }

@media (max-width: 1000px) {
    .header-row { justify-content: space-between; }
    .nav-burger { display: flex; flex-direction: column; justify-content: space-between; width: 80px; height: 35px; padding: 8px 30px; border-radius: 30px; background: #1c1c25; cursor: pointer; }
    .nav-burger:hover { opacity: .75; }
    .nav-burger span { display: block; height: 3px; border-radius: 15px; background: #f8f9fe; }
    .main-nav { display: none; position: absolute; top: 7.5px; left: 0; right: 0; width: 90vw; margin: 0 auto; background: #1c1c25; color: #f8f9fe; border-radius: 15px; box-shadow: 4px 5px 15px rgba(0, 0, 0, .25); overflow: hidden; }
    .nav-toggle:checked ~ .main-nav { display: block; }
    .nav-close { display: block; margin: 20px 35px; }
    .nav-items { flex-direction: column; }
    .nav-item { order: var(--phone-order); }
    .nav-link { display: none; }
    .nav-panel, .nav-item:hover .nav-panel { display: block; position: static; transform: none; width: auto; max-width: none; border-radius: 0; box-shadow: none; overflow: visible; }
    .nav-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; padding: 0 20px 20px; }
    .nav-more { flex-direction: column; align-items: flex-start; }
    .nav-item-computer .nav-more { display: none; }
}
@media (max-width: 768px) { .main-nav { width: 95%; } }
@media (max-width: 576px) {
    .nav-grid { grid-template-columns: minmax(0, 1fr); }
    .nav-col-title { font-size: 12px; }
    .nav-col a { font-size: 14px; white-space: normal; }
    .nav-more a { font-size: 14px; }
}

/* Footer */
.site-footer { background: var(--navy); color: #afafaf; margin-top: 80px; padding: 50px 0 40px; font-size: 14px; line-height: 1.7; }
.site-footer a { color: #afafaf; display: block; padding-bottom: 3px; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.footer-about p { max-width: 260px; margin: 14px 0; }
.site-footer .footer-brand { color: #fff; font-size: 30px; font-weight: 800; line-height: 1; }
.socials { display: flex; gap: 15px; }
.site-footer .socials a { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.socials svg { width: 16px; height: 16px; fill: var(--navy); }
.site-footer h4 { margin: 0 0 19px; color: #fff; font-size: 18px; font-weight: 800; }
.copyright { color: #cbcbcb; margin: 40px auto 0; font-weight: 400; }

/* Post */
.post { max-width: 728px; padding-top: 40px; }
.breadcrumb { font-size: 15px; margin: 0 0 8px; }
/* A post's breadcrumb: small grey links, a blank line under them (WordPress ended it with a <br>) */
.post .breadcrumb { font-size: 12px; line-height: 1.7; margin: 0 0 20px; }
.post .breadcrumb a { color: #afafaf; }
.post .breadcrumb a:hover { color: #cbcbcb; text-decoration: none; }
/* WordPress showed post titles in title case ("Zelf Je Google Chromecast Installeren") */
.post h1 { font-size: 48px; line-height: 1.2; font-weight: 700; margin: 0 0 24px; text-transform: capitalize; }
/* Smaller titles on tablets and phones, and posts 12px from the screen edges on phones, as on WordPress */
@media (max-width: 991px) { .post h1 { font-size: 36px; } }
@media (max-width: 767px) { .post { padding-left: 12px; padding-right: 12px; } .post h1 { font-size: 30px; padding: 0 10px; } }
@media (max-width: 479px) { .post h1 { font-size: 24px; padding-left: 0; } }
.byline { display: flex; gap: 20px; align-items: center; font-size: 14px; color: var(--grey); margin-bottom: 24px; }
.byline p { margin: 0; line-height: 1.6; }
.byline a { color: var(--text); font-weight: 600; }
.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.kicker { font-size: 24px; font-weight: 600; line-height: 1.5; margin: 8px 0 16px; }
/* The featured image as on WordPress: 400 to 600px high, cropped to fill (on phones a tall crop of the middle) */
.featured { border-radius: 20px; margin-bottom: 24px; display: block; width: 100%; min-height: 400px; max-height: 600px; object-fit: cover; }
@media (max-width: 479px) { .featured { border-radius: 15px; } }

/* Content */
.content p, .content ul, .content ol { margin: 18px 0; }
.content li { margin-bottom: 6px; }
.content h2 { font-size: 32px; line-height: 1.4; margin: 40px 0 12px; font-weight: 800; }
.content h3 { font-size: 26px; line-height: 1.4; margin: 32px 0 12px; font-weight: 800; }
.content :is(h2, h3, h4) .subtitle { display: inline-block; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--indigo); }
.content h4 { font-size: 21px; line-height: 1.4; margin: 24px 0 8px; font-weight: 700; }
.content img { border-radius: 15px; }
.content figure { margin: 24px 0; }
.content figcaption { font-size: 16px; font-style: italic; color: var(--grey); text-align: center; margin: 8px 0 16px; }
.content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
/* Tables: 40px in from the column as on WordPress; on phones a wide table scrolls inside its own frame. */
.content table { width: calc(100% - 80px); border-collapse: collapse; margin: 24px 40px; }
.content th, .content td { padding: 9px; text-align: left; vertical-align: middle; }
/* Columns WordPress centred or right-aligned (the align attribute in the content) */
.content :is(th, td)[align="center"] { text-align: center; }
.content :is(th, td)[align="right"] { text-align: right; }
.content thead th, .content table tr:first-child th { border-bottom: 3px solid #000; }
/* Only the tables WordPress striped ({.stripes} in the content, its "is-style-stripes") have stripes. */
.content table.stripes tbody tr:nth-child(odd) { background: #f0f0f0; }
.content blockquote { margin: 20px 4px; padding: 0 0 0 15px; border-left: 3px solid var(--indigo); font-size: 20px; font-style: italic; line-height: 1.7; }
.content video { display: block; width: 100%; max-width: 600px; height: auto; margin: 18px auto; }
.content sup { font-size: 75%; line-height: 0; padding: 0 2px; color: var(--indigo); }
/* Links to other Wifiwijs pages: a bold black grey pill with an "open" arrow, as on WordPress (not in the contents
   list or on shop buttons). Olive buttons to Wifiwijs pages keep their colour but get the pill's black text, corners
   and arrow, as on WordPress. */
.post .content a:is([href^="/"]:not([href^="//"]), [href*="wifiwijs.nl"]):not(.toc a, .button, .button-primary, .bol-button) { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 25px 2px 8px; border-radius: 8px; background: #eee; color: #000; font-weight: 700; text-decoration: none; }
.post .content a:is([href^="/"]:not([href^="//"]), [href*="wifiwijs.nl"]):not(.toc a, .button, .button-primary, .bol-button):hover { background: #ddd; }
.post .content a:is([href^="/"]:not([href^="//"]), [href*="wifiwijs.nl"]):not(.toc a, .button, .bol-button)::before { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/%3E%3Cpath d='m21 3-9 9'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") center / contain no-repeat; }
.post .content a.button-primary:is([href^="/"]:not([href^="//"]), [href*="wifiwijs.nl"]) { position: relative; padding: 2px 25px 2px 8px; border-radius: 8px; color: #000; }
.oxy-rich-text p { margin: 0 0 12px; }

/* Table of contents */
.toc { background: #f8f8f8; border: 1px solid #ddd; border-radius: 12px; padding: 20px 20px 12px; margin: 0 0 20px; }
.content .toc h2 { font-size: 32px; margin: 0 0 12px; padding-left: 20px; }
.toc ol { margin: 0; padding-left: 28px; counter-reset: toc; list-style: none; }
.toc li { counter-increment: toc; position: relative; margin: 0 0 10px; font-size: 16px; line-height: 1.7; }
.toc li::before { content: counter(toc) " -"; position: absolute; right: calc(100% + 8px); font-weight: 700; white-space: nowrap; }
.toc ol ol { margin: 6px 0 0; padding-left: 40px; }
.toc ol ol li { font-size: 14.5px; margin-bottom: 6px; }
.toc ol ol li::before { content: counter(toc, lower-alpha) "."; }
.toc a { color: #333; }

/* Content block: product, as on WordPress: a 20px box with a soft shadow, from 992px the photo (35%) beside the text
   (65%), 16px text, 13px specs in two columns, the shop buttons 45% wide side by side. */
.product { border-radius: 20px; padding: 20px; margin: 25px 0; box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px #fff; }
.content .product .product-name { margin: 0 0 8px; font-size: 28px; font-weight: 800; line-height: 1.2; }
.product-badge { color: var(--indigo); font-size: 20px; font-weight: 600; }
.content .product-score { margin: 0; font-size: 20px; font-weight: 600; }
.product-score span { color: var(--indigo); }
.product-grid { display: flex; flex-wrap: wrap; margin-top: 8px; }
.product-image { flex: 0 0 35%; padding: 20px; }
.content .product-image img { display: block; width: 250px; border-radius: 15px; }
.product-body { flex: 1 1 65%; min-width: 0; padding: 0 20px 20px; }
.product-text { font-size: 16px; line-height: 1.7; }
.content .product-text p { margin: 1em 0; }
.content .product-text > :first-child { margin-top: 0; }
/* Only very long labels ("Beeldverversingssnelheid") break, between syllables with a hyphen */
.content .product-specs { list-style: none; margin: 16px 0 20px; padding: 0 20px 0 0; columns: 2; column-gap: 20px; font-size: 13px; line-height: 1.7; hyphens: auto; hyphenate-limit-chars: 18 6 6; }
.content .product-specs li { margin: 0; break-inside: avoid; }
/* The second column starts at the second half of the specs, as WordPress split them */
.content .product-specs .spec-column { break-before: column; }
.content .product-cta { display: flex; justify-content: center; gap: 40px; margin: 0; }
.content .product-cta .button { flex: 0 1 45%; display: flex; align-items: center; justify-content: center; padding: 9px 20px; background: #c4ba4d; color: #fafdfe; font-size: 16px; font-weight: 700; line-height: 1.7; border-radius: 14px; text-align: center; }
.content .product-cta .button:hover { background: #9d953e; opacity: 1; }
.content .product-more { margin: 8px 0 0; text-align: center; font-size: 14px; line-height: 1.7; }
.content .product .product-name a { color: inherit; text-decoration: none; background: none; padding: 0; }
.product-image a { display: block; background: none; padding: 0; }
.content .product .product-more a { color: #9e9e9e; background: none; padding: 0; }
@media (max-width: 991px) {
    .product-image, .product-body { flex-basis: 100%; }
    .content .product-specs { columns: auto; }
    .content .product-specs .spec-column { break-before: auto; margin-top: 20px; }
}
@media (max-width: 479px) { .content .product-cta .button { font-size: 14px; } }
/* Review summary ("Niet veel tijd?", a product block with an h2): title and score beside the logo, then the 18px text
   and a full-width button across the box, as on WordPress. On phones the logo sits above the title. */
.product:has(> h2.product-name) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; margin: 20px 0; }
.product:has(> h2.product-name) > .product-grid { display: contents; }
.content .product > h2.product-name { grid-column: 1; margin: 0; font-size: 32px; line-height: 1.7; text-align: justify; }
.content .product:has(> h2.product-name) > .product-score { grid-column: 1; margin: 0; font-size: 24px; font-weight: 700; }
.product:has(> h2.product-name) .product-image { grid-column: 2; grid-row: 1 / span 2; padding: 0; }
.content .product:has(> h2.product-name) .product-image img { width: 120px; border-radius: 0; }
.product:has(> h2.product-name) .product-body, .product:has(> h2.product-name) > :is(.product-cta, .product-more) { grid-column: 1 / -1; }
.product:has(> h2.product-name) .product-body { padding: 0; }
.product:has(> h2.product-name) .product-text { font-size: 18px; }
.content .product:has(> h2.product-name) .product-cta .button { flex: 1 1 100%; font-size: 18px; }
@media (max-width: 600px) {
    .product:has(> h2.product-name) { grid-template-columns: minmax(0, 1fr); }
    .content .product > h2.product-name { font-size: 26px; text-align: left; }
    .product:has(> h2.product-name) .product-image { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 8px; }
    .content .product:has(> h2.product-name) .product-image img { width: 90px; }
}
.button { display: inline-block; background: var(--indigo); color: #fff; font-weight: 600; padding: 12px 28px; border-radius: 12px; }
.button:hover { text-decoration: none; opacity: .9; }

/* Pages */
.page-hero { padding: 64px 0 40px; }
.page-hero h1 { font-size: 64px; line-height: 1.1; color: var(--navy); margin: 0; font-weight: 800; overflow-wrap: break-word; }
.hero-kicker { color: #a9b0e8; font-size: 36px; font-weight: 700; margin: 0; line-height: 1.2; }
.hero-intro { color: #aaa; font-size: 18px; margin: 4px 0 0; }
.hero-intro p { margin: 0; }
/* Landing pages (Sim only, Internet vergelijken): coloured title band with white text */
.hero-navy, .hero-periwinkle { color: #fff; padding: 64px 0; margin-bottom: 40px; }
.hero-navy { background: var(--navy); text-align: center; }
.hero-periwinkle { background: var(--periwinkle); }
.hero-navy h1, .hero-periwinkle h1 { color: #fff; }
.hero-navy .hero-intro, .hero-periwinkle .hero-intro { color: #fff; font-size: 16px; margin-top: 20px; }
.hero-navy .hero-intro { max-width: 760px; margin-left: auto; margin-right: auto; }
.page { max-width: 1140px; }
/* Author header as on WordPress: 36px name, 16px role, then expertise and education in black semibold */
.author-hero h1 { font-size: 36px; line-height: 1.2; color: #000; }
.author-hero .author-role { min-height: 1.7em; margin: 0; font-size: 16px; color: #000; }
.author-hero .author-linkedin { margin: 0 0 8px; line-height: 0; }
.author-hero .author-fact { margin: 0 0 8px; color: #000; font-weight: 600; }
.author-hero .author-fact:last-child { margin-bottom: 0; }
.category-hero { text-align: center; padding-bottom: 56px; }
.category-hero h1 { color: #000; }
.category-hero .breadcrumb { margin-bottom: 12px; }
.page h2 { font-size: 40px; }
.page-band { background: var(--lavender); padding: 24px 0 40px; }
.page-band + .site-footer, main:has(.page-band:last-child) + .site-footer { margin-top: 0; }
.page-contact { padding-top: 56px; }
.page-contact .contact-icon { margin: 0 0 8px; }
.content.page-contact h2 { font-size: 32px; margin: 0 0 12px; }
.page-contact p { max-width: 420px; margin: 0 0 16px; }
.button-yellow { background: #c4ba4d; padding: 8px 14px; border-radius: 10px; font-weight: 700; }

/* Home */
.home-hero { background: var(--navy) center/cover no-repeat; color: #fff; text-align: center; padding: 120px 0 200px; position: relative; }
.home-hero .container { position: relative; z-index: 1; }
.home-hero h1 { font-size: 60px; line-height: 1.3; margin: 40px auto 40px; max-width: 840px; font-weight: 700; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.home-hero h1 span { color: var(--indigo); }
.home-intro { background: var(--lavender); color: #545454; max-width: 480px; margin: 40px auto -90px; padding: 30px 40px; border-radius: 20px; box-shadow: 0 10px 14px rgba(23, 43, 77, .2); font-size: 18px; line-height: 1.7; }
.home-intro p { margin: 0; }
.home-hero-light { background: var(--lavender); color: #000; padding-bottom: 160px; }
.home-hero-light h1 { text-shadow: none; font-weight: 800; }
.home-hero-light h1 a { color: var(--indigo); }
.home-hero-light .home-intro { background: #fff; text-align: left; }
.home-hero .wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 90px; fill: #fafdfe; }
.home-press { background: #fafdfe; padding: 90px 0 40px; }
.press-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: center; justify-items: center; }
.press-logos img { width: 72px; opacity: .3; }
.home-kicker { color: var(--periwinkle); font-size: 18px; margin: 0; }
.home-title { font-size: 48px; line-height: 1; font-weight: 700; margin: 0 0 20px; }
.home-topics { padding: 80px 0 90px; }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 20px; }
.topic { text-align: center; display: flex; flex-direction: column; align-items: center; }
.topic img { width: 100%; aspect-ratio: 232 / 200; object-fit: cover; border-radius: 15px; display: block; margin-bottom: 8px; }
.topic h2 { font-size: 20px; font-weight: 800; margin: 0; line-height: 1.7; }
.topic h2 a, .topic-link { color: inherit; }
.topic-link { color: var(--navy); font-size: 14px; line-height: 1.7; }
.home-cta { text-align: center; margin: 43px 0 0; }
.home-usps { background: var(--periwinkle); }
.home-usps ul { list-style: none; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; }
.home-usps li { color: #fafdfe; font-size: 14px; display: flex; align-items: center; gap: 14px; line-height: 1.5; }
.home-usps li::before { content: ""; width: 25px; height: 25px; flex: none; border-radius: 50%; background: #93fd93 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.home-featured { background: #fafdfe; padding: 70px 0 80px; }
.featured-big img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 15px; display: block; }
.featured-label { display: block; color: var(--navy); font-size: 16px; margin: 20px 0; }
.featured-big h3 { font-size: 36px; line-height: 1.3; margin: 0 0 20px; font-weight: 700; text-transform: capitalize; }
.featured-big h3 a { color: #000; }
.featured-excerpt { color: var(--grey); font-size: 16px; margin: 0 0 16px; }
.featured-side { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.featured-small { padding: 10px 20px; border-right: 2px solid #e6e6ef; color: inherit; }
.featured-small:first-child { padding-left: 0; }
.featured-small .featured-label { font-size: 14px; margin: 0; line-height: 1.7; }
.featured-small h4 { color: var(--indigo); font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0; text-transform: capitalize; }
/* Home on tablets and phones, as on WordPress: smaller hero title, the featured section's title centred, the three
   small featured titles black, 20px and semibold; section titles stay 48px and are centred on phones */
@media (max-width: 1120px) { .featured-small h4 { color: #000; font-size: 20px; font-weight: 600; } }
@media (max-width: 991px) { .home-hero h1 { font-size: 40px; } .home-featured :is(.home-kicker, .home-title) { text-align: center; } }
@media (max-width: 767px) { .home-hero h1 { font-size: 36px; } }
@media (max-width: 479px) { .home-hero h1 { font-size: 30px; } .home-kicker, .home-title { text-align: center; } .home-contact .home-title { font-size: 36px; } }
.featured-small:hover { text-decoration: none; }
.featured-small:hover h4 { text-decoration: underline; }
.home-contact { background: var(--lavender); text-align: center; padding: 27px 0 32px; }
.contact-icon { color: var(--navy); display: block; margin: 0 auto 5px; }
.home-contact .home-title { margin: 7px 0 3px; }
.home-contact p { color: var(--grey); margin: 0 0 26px; }
.home-contact p:last-child { margin: 0; }
.button-green { background: var(--green); padding: 8px 13px; font-size: 18px; }
main:has(.home-contact) + .site-footer { margin-top: 0; }
.latest h2 { font-size: 32px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { color: var(--text); font-weight: 600; line-height: 1.4; }
.card img { border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; width: 100%; margin-bottom: 8px; }

@media (max-width: 800px) {
    .footer-grid, .cards, .featured-side { grid-template-columns: 1fr; }
    .content table:not(.products-2-table) { display: block; width: auto; max-width: 100%; margin: 24px 0; overflow-x: auto; }
    .page-hero h1 { font-size: 38px; }
    .home-hero { padding: 60px 0 160px; }
    .topic-grid, .press-logos { grid-template-columns: 1fr; gap: 24px; }
    .press-logos { gap: 20px; }
    .press-logos img { width: 226px; max-height: 85px; object-fit: contain; }
    .topic { width: 100%; max-width: 260px; margin: 0 auto; }
    .home-usps ul { justify-content: center; }
    .featured-small { padding: 10px 20px 20px 0; margin-bottom: 20px; }
}

/* WordPress column blocks, e.g. pros and cons */
.columns { display: flex; gap: 28px; margin: 24px 0; }
.column { flex: 1; min-width: 0; }
@media (max-width: 800px) { .columns { flex-direction: column; } }

/* Pros and cons: two boxes next to each other that read as one (adjacent table cells share a row) */
.voordelen, .nadelen { display: table-cell; width: 50%; vertical-align: top; background: var(--lavender); padding: 20px 20px 4px; }
.voordelen { border-radius: 18px 0 0 18px; }
.nadelen { border-radius: 0 18px 18px 0; }
.voordelen:not(:has(+ .nadelen)), .nadelen:not(.voordelen + .nadelen) { border-radius: 18px; }
.content .voordelen h4, .content .nadelen h4 { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.voordelen ul, .nadelen ul { list-style: none; padding: 0; margin: 0 0 16px; }
.voordelen li, .nadelen li { position: relative; padding-left: 28px; margin-bottom: 4px; }
.voordelen li::before, .nadelen li::before { position: absolute; left: 0; font-weight: 800; }
.voordelen li::before { content: "✓"; }
.nadelen li::before { content: "✕"; }
@media (max-width: 600px) {
    .voordelen, .nadelen { display: block; width: auto; border-radius: 18px; }
    .voordelen { border-radius: 18px 18px 0 0; }
    .nadelen { border-radius: 0 0 18px 18px; }
}

/* Affiliate buttons in content ("Check op Bol.com →") */
.content .button-primary, .content .bol-button { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 8px 20px; background: #c4ba4d; color: #fff; font-weight: 700; border-radius: 14px; text-align: center; line-height: 1.4; }
.content .button-primary:hover, .content .bol-button:hover { text-decoration: none; opacity: .9; }
.content .columns:has(.button-primary, .bol-button) { margin: 20px 0; gap: 20px; }
.content hr { border: 0; border-top: 2px solid #808080; margin: 9px 0; }

/* Archives: categories and authors */
.page-hero .breadcrumb a { color: var(--indigo); }
.author-hero { background: var(--lavender); padding: 50px 0 70px; margin-bottom: 24px; }
.author-hero .container { display: flex; gap: 20px; align-items: flex-start; }
/* On phones the photo sits above the name, as on WordPress, so long expertise words keep the full width */
@media (max-width: 600px) { .author-hero .container { flex-direction: column; align-items: flex-start; gap: 16px; } }
.linkedin { color: #0a66c2; display: inline-block; line-height: 0; }

/* Post lists on category and author pages */
.post-list { list-style: none; padding: 0; margin: 32px 0; }
.post-list li { display: flex; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 2px solid #ccc; margin: 0; }
.post-list li:first-child { padding-top: 0; }
.post-list-image { flex: 0 0 222px; }
.post-list-image img { width: 222px; height: 125px; object-fit: cover; border-radius: 15px; display: block; }
.content .post-list h3 { font-size: 20px; line-height: 1.4; margin: 0 0 6px; font-weight: 800; }
.post-list h3 a { color: #000; }
.post-list p { margin: 0; font-size: 18px; font-weight: 500; }
@media (max-width: 600px) {
    .post-list li { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
    .post-list-image { flex: none; }
    .post-list-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .content .post-list h3 { font-size: 20px; }
    .post-list p { font-size: 16px; }
}
.content .cards { margin: 32px 0; }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0; }
.pagination a, .pagination span { padding: 6px 14px; border-radius: 10px; background: var(--lavender); }
.pagination span { background: var(--indigo); color: #fff; }

/* Content block: YouTube video */
.video { margin: 32px 0; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }

/* "Belangrijkste punten" box at the top of an article */
.key-takeaways { background: #e1e8e8; border-radius: 16px; padding: 4px 20px 8px; margin: 0 0 8px; }
.content .key-takeaways h3 { margin-top: 16px; }

/* Product blocks of the old WordPress plugin ("s7stema"), kept as raw HTML in some buying guides.
   products-1: up to three products side by side; products-4: one card per product; products-2-table: comparison. */
.products-1__wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 24px 0; }
.products-1__item { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 14px 20px; border-radius: 18px; box-shadow: 0 4px 60px rgba(0, 0, 0, .09); color: #515151; }
.content .products-1__name { font-size: 20px; line-height: 1.3; margin: 0 0 16px; text-align: center; color: #000; }
.products-1__image-wrapper { text-align: center; margin-bottom: 16px; }
.products-1__image-wrapper img { max-height: 180px; width: auto; }
.products-1__attributes-wrapper { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.products-1__attribut { width: 50%; font-size: 12px; line-height: 1.6; padding-right: 6px; }
.products-1__attribut-label, .products-4__attribut-label { font-weight: 700; }
.products-1__link { font-size: 14px !important; }
.products-1__link, .products-4__link, .products-items__link { display: block; text-align: center; background: #e5da67; border: 2px solid #e5da67; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.6; padding: 7px 12px; margin-bottom: 10px; }
.products-1__link:hover, .products-4__link:hover, .products-items__link:hover { background: #cac15c; text-decoration: none; }
.products-4__item { border-radius: 18px; box-shadow: 0 4px 60px rgba(0, 0, 0, .07); padding: 25px; margin: 0 0 40px; }
.content .products-4__item h3 { margin-top: 0; }
.products-4__item-col-1 { display: flex; gap: 20px; }
.products-4__image-wrapper { flex: 0 0 45%; }
.products-4__image-wrapper img { width: 100%; display: block; }
.content .products-4__attributes-wrapper h4 { margin-top: 0; font-size: 18px; }
.products-4__attribut { font-size: 15px; line-height: 1.8; }
.products-4__link-wrapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.products-4__link-wrapper > *, .products-4__link-wrapper .products-4__link { flex: 1 1 220px; margin: 0; }
.products-4__desc_text { font-size: 16px; }
.products-4__content { display: flex; gap: 20px; }
.products-4__content_positive, .products-4__content_negative { flex: 1; border-radius: 18px; padding: 4px 16px; margin-bottom: 7px; }
.products-4__content_positive { background: #f1ffed; }
.products-4__content_negative { background: #ffe7e7; }
.content .products-4__content h5 { font-size: 18px; margin: 16px 0 0; }
.products-4__content ul { padding-left: 22px; font-size: 14px; line-height: 1.4; }
.products-4__content li { margin-bottom: 12px; }
.products_tooltip_wrap { position: relative; }
.products-itemswrap__content_buttons_tooltip { display: none; position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% - 6px); min-width: 260px; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 0 16px; font-size: 14px; }
.products_tooltip_wrap:hover .products-itemswrap__content_buttons_tooltip, .products_tooltip_wrap:focus-within .products-itemswrap__content_buttons_tooltip { display: block; }
.tooltip_item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5da67; }
.tooltip_item:last-child { border-bottom: 0; }
.tooltip_store_logo { width: 70px; display: flex; align-items: center; }
.tooltip_store_logo img { border-radius: 0; max-height: 28px; width: auto; }
.tooltip_item .products-items__link { margin: 0; padding: 4px 14px; font-size: 14px; }
.products-2-table__wrapper { overflow-x: auto; margin: 24px 0; }
.content .products-2-table { width: 100%; margin: 0; min-width: 600px; border: 1px solid rgba(0, 0, 0, .1); }
.content .products-2-table td, .content .products-2-table th { text-align: center; font-size: 14px; border: 1px solid rgba(0, 0, 0, .12); }
.content .products-2-table tr:nth-child(odd) { background: #f6f6f6; }
.content .products-2-table img { max-height: 90px; width: auto; }
@media (max-width: 600px) {
    .products-4__item-col-1, .products-4__content { flex-direction: column; }
    .content h2 { font-size: 26px; }
    .content h3 { font-size: 22px; }
}

/* Code blocks: long terminal commands wrap instead of running out of the column */
.content pre { background: var(--lavender); border-radius: 12px; padding: 16px 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }

/* Content block: callout (lavender explainer box, red warning box) */
.callout { background: var(--lavender); border-radius: 15px; padding: 20px 30px; margin: 20px 0; }
.callout-warning { background: #e29393; border-radius: 20px; padding: 20px; margin: 10px 0 30px; }
.content .callout p, .content .callout ul, .content .callout ol { margin: 18px 0; }
.content .callout > .callout-title, .content .callout > h3 { font-size: 26px; font-weight: 800; line-height: 1.7; margin: 0; }
.content .callout > :nth-child(2) { margin-top: 0; }
.content .callout > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .callout { padding: 20px; } .content .callout > .callout-title, .content .callout > h3 { font-size: 22px; } }

/* Sources ("Bronnen", the only h3 without an anchor): small numbered list, the number above its source, as on WordPress */
.content h3:not([id]) + ul { list-style: none; padding: 0; font-size: .8em; line-height: 1.7; color: #777; }
.content h3:not([id]) + ul > li { margin-bottom: .3em; }
.content h3:not([id]) + ul > li > a { display: block; }

/* Text pages (privacy and cookie policy): plain black title right above the text */
.document { max-width: 948px; padding-top: 48px; }
.document h1 { font-size: 40px; line-height: 1.2; font-weight: 800; margin: 0 0 8px; }
.document .content > h2:first-child { margin-top: 0; }
/* Cookie tables: indigo with white text */
.document .content table { width: 100%; margin: 18px 0; border-collapse: separate; border-spacing: 0; border-radius: 7px; overflow: hidden; background: #364cc2; color: #fff; }
.document .content th, .document .content td { padding: 14px 18px; vertical-align: middle; }
.document .content table tr:first-child th { border-bottom: 3px solid #fff; }
.document .content tbody td { border-top: 1px solid #364cc2; }
.document .content tbody tr:nth-child(odd) { background: none; }
@media (max-width: 800px) {
    .document h1 { font-size: 32px; }
    /* On phones each cookie is a small card: name in bold, then provider, lifetime and description */
    .document .content table, .document .content tbody, .document .content tr, .document .content td { display: block; width: auto; }
    .document .content thead { display: none; }
    .document .content tbody tr { padding: 12px 18px; }
    .document .content tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .35); }
    .document .content tbody td { padding: 0; border: 0; }
    .document .content tbody td:first-child { font-weight: 700; }
    .document .content tbody tr:not(:has(td:not(:empty))) { display: none; }
}

/* Contact page: centred title, three white cards */
.contact-hero { text-align: center; padding-bottom: 24px; }
.contact-hero p { margin: 16px 0 0; }
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; max-width: 900px; }
.contact-card { display: flex; flex-direction: column; padding: 28px 24px; border-radius: 20px; box-shadow: 0 10px 40px rgba(2, 26, 107, .12); color: #757575; font-size: 15px; line-height: 1.6; }
.contact-card:hover { text-decoration: none; }
.contact-card-icon { fill: var(--indigo); margin-bottom: 20px; }
.contact-card h2 { color: #000; font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0 0 4px; }
.contact-card-text p { margin: 0; overflow-wrap: anywhere; }
.contact-card-link { margin-top: auto; padding-top: 36px; color: var(--indigo); font-size: 16px; text-decoration: underline; }
@media (max-width: 800px) { .contact-cards { grid-template-columns: 1fr; max-width: 420px; } }

/* Content block: media (illustration beside text, alternating sides) */
.media { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: center; margin: 48px 0; }
.media-right { grid-template-columns: minmax(0, 1fr) 260px; }
.media-right .media-image { order: 2; }
.content .media-image { border-radius: 0; width: 100%; }
.media-text > :first-child { margin-top: 0; }
.media-text > :last-child { margin-bottom: 0; }
.content .media-text h2 { font-size: 40px; margin: 0 0 8px; }
.content .media-text h3 { margin-top: 0; }
.button-navy { display: block; background: var(--navy); text-align: center; border-radius: 10px; }
.content .media-button { margin-top: 24px; }
@media (max-width: 800px) {
    .media, .media-right { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .media-right .media-image { order: 0; }
    .media-image { max-width: 220px; justify-self: center; }
}

/* Content block: tabs */
.tabs { margin: 40px 0; }
.tab-titles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px; background: var(--periwinkle); border-radius: 15px 15px 0 0; }
.content .tab-title { margin: 0; font-size: 18px; line-height: 1.4; }
.tab-title label { display: block; padding: 10px 18px; border-radius: 10px; color: #fff; cursor: pointer; }
.tabs:has(.tab-radio:nth-of-type(1):checked) .tab-title:nth-child(1) label,
.tabs:has(.tab-radio:nth-of-type(2):checked) .tab-title:nth-child(2) label,
.tabs:has(.tab-radio:nth-of-type(3):checked) .tab-title:nth-child(3) label { background: #fff; color: var(--navy); }
.tabs:has(.tab-radio:focus-visible) .tab-titles { outline: 2px solid var(--indigo); outline-offset: 2px; }
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tab-panel { display: none; background: var(--lavender); border-radius: 18px; padding: 28px 32px; }
.tab-radio:checked + .tab-panel { display: block; }
.tab-radio:checked + .tab-panel-image { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.tab-panel h3:first-child { margin-top: 0; }
.content .tab-panel img { border-radius: 0; }
@media (max-width: 800px) { .tab-radio:checked + .tab-panel-image { grid-template-columns: minmax(0, 1fr); } .tab-panel { padding: 20px; } }

/* Sections of the older home pages (/home/, /home-2-0-wip/) */
.home-podcast { padding: 60px 0 20px; text-align: center; }
.home-podcast .video { max-width: 720px; margin: 24px auto 0; }
.home-categories { background: var(--indigo); padding: 48px 0; }
.home-categories ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 40px; }
.home-categories a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; width: 120px; text-align: center; }
.category-icon { width: 100px; height: 100px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(3, 26, 107, .25); }
.category-icon svg, .promise-item svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.category-icon svg { color: #555; }
.home-guides { background: var(--indigo); color: #fff; padding: 60px 0; }
.home-guides .home-title { color: #fff; }
.guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.guide-group { background: #fff; border-radius: 15px; padding: 20px 24px; color: var(--text); }
.guide-group h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--navy); }
.guide-group ul { list-style: none; margin: 0; padding: 0; }
.guide-group li { border-top: 1px solid #e6e6ef; }
.guide-group a { display: block; padding: 8px 0; color: var(--text); font-size: 16px; }
.guide-group a::after { content: "›"; float: right; color: var(--indigo); font-weight: 700; }
.home-latest { background: var(--navy); color: #fff; padding: 60px 0; }
.home-latest .home-title { color: #fff; }
.latest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; }
.latest-card { color: #fff; font-weight: 600; line-height: 1.4; font-size: 16px; }
.latest-card:hover { text-decoration: none; }
.latest-card:hover .latest-title { text-decoration: underline; }
.latest-image { position: relative; display: block; margin-bottom: 10px; }
.latest-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; }
.latest-image time { position: absolute; left: 10px; bottom: 10px; background: var(--indigo); color: #fff; font-size: 13px; padding: 2px 10px; border-radius: 8px; }
.home-promise { padding: 80px 0; }
.promise-box { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; background: var(--lavender); border-radius: 15px; padding: 36px 30px; margin-top: 16px; }
.promise-intro p { margin: 0 0 24px; }
.promise-item { text-align: center; font-size: 16px; hyphens: auto; overflow-wrap: break-word; }
.promise-item svg { color: var(--navy); display: block; margin: 0 auto 12px; }
.promise-item p { margin: 0; }
.home-team { background: #fafdfe; padding: 60px 0; text-align: center; }
.team-grid { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.team-grid img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; }
.team-grid h4 { margin: 0; font-size: 20px; font-weight: 800; }
.team-grid h4 a { color: #000; }
.team-grid p { margin: 0 0 6px; color: var(--grey); font-size: 15px; }
.home-about { padding: 80px 0; }
.home-about .container { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 48px; align-items: center; }
@media (max-width: 800px) {
    .guide-grid, .latest-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .promise-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .promise-intro { grid-column: 1 / -1; }
    .promise-box { padding: 24px 16px; gap: 20px 12px; }
    .promise-item { font-size: 14px; }
    .team-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .home-about .container { grid-template-columns: minmax(0, 1fr); }
    .home-categories a { width: 90px; font-size: 14px; }
    .category-icon { width: 76px; height: 76px; }
}
@media (max-width: 500px) { .guide-grid, .latest-grid { grid-template-columns: minmax(0, 1fr); } }

/* The number of a source sits on its own line above it */
.content .source-number { display: block; font-weight: 600; }

/* Long words in titles and long bare URLs wrap instead of pushing the page sideways on phones (titles break whole
   words only, as on WordPress: no hyphenation) */
.post h1, .page-hero h1 { overflow-wrap: break-word; }
.content { overflow-wrap: break-word; }

/* Detailed product sections ("#1 Name / subtitle", specs, photo): specs left, a small photo right, as on WordPress */
@media (min-width: 801px) {
    .content h3:has(.subtitle) + p:has(> br):has(+ p > img:only-child) { float: left; width: 58%; margin-top: 0; }
    .content h3:has(.subtitle) + p:has(> br) + p:has(> img:only-child) { float: right; width: 38%; margin-top: 0; }
    .content h3:has(.subtitle) + p:has(> br) + p:has(> img:only-child) + * { clear: both; }
}