/* ---------------------------------------------------------------------------
   GEGENEREERD BESTAND — NIET MET DE HAND BEWERKEN.
   Gemaakt door includes/scripts/build_css_bundle.php. Wijzig een bronbestand
   hieronder en draai daarna:  php includes/scripts/build_css_bundle.php
   --------------------------------------------------------------------------- */

/* ==== /includes/scripts/jconfirm/jconfirm.min.css ==== */
/*!
 * jquery-confirm v3.3.0 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2017 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */@-webkit-keyframes jconfirm-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes jconfirm-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}body[class*=jconfirm-no-scroll-]{overflow:hidden!important}.jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999999;font-family:inherit;overflow:hidden}.jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;-webkit-transition:opacity .4s;transition:opacity .4s}.jconfirm .jconfirm-bg.jconfirm-bg-h{opacity:0!important}.jconfirm .jconfirm-scrollpane{-webkit-perspective:500px;perspective:500px;-webkit-perspective-origin:center;perspective-origin:center;display:table;width:100%;height:100%}.jconfirm .jconfirm-row{display:table-row;width:100%}.jconfirm .jconfirm-cell{display:table-cell;vertical-align:middle}.jconfirm .jconfirm-holder{max-height:100%;padding:50px 0}.jconfirm .jconfirm-box-container{-webkit-transition:-webkit-transform;transition:-webkit-transform;transition:transform;transition:transform,-webkit-transform}.jconfirm .jconfirm-box-container.jconfirm-no-transition{-webkit-transition:none!important;transition:none!important}.jconfirm .jconfirm-box{background:white;border-radius:4px;position:relative;outline:0;padding:15px 15px 0;overflow:hidden;margin-left:auto;margin-right:auto}@-webkit-keyframes type-blue{1%,100%{border-color:#3498db}50%{border-color:#5faee3}}@keyframes type-blue{1%,100%{border-color:#3498db}50%{border-color:#5faee3}}@-webkit-keyframes type-green{1%,100%{border-color:#2ecc71}50%{border-color:#54d98c}}@keyframes type-green{1%,100%{border-color:#2ecc71}50%{border-color:#54d98c}}@-webkit-keyframes type-red{1%,100%{border-color:#e74c3c}50%{border-color:#ed7669}}@keyframes type-red{1%,100%{border-color:#e74c3c}50%{border-color:#ed7669}}@-webkit-keyframes type-orange{1%,100%{border-color:#f1c40f}50%{border-color:#f4d03f}}@keyframes type-orange{1%,100%{border-color:#f1c40f}50%{border-color:#f4d03f}}@-webkit-keyframes type-purple{1%,100%{border-color:#9b59b6}50%{border-color:#b07cc6}}@keyframes type-purple{1%,100%{border-color:#9b59b6}50%{border-color:#b07cc6}}@-webkit-keyframes type-dark{1%,100%{border-color:#34495e}50%{border-color:#46627f}}@keyframes type-dark{1%,100%{border-color:#34495e}50%{border-color:#46627f}}.jconfirm .jconfirm-box.jconfirm-type-animated{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.jconfirm .jconfirm-box.jconfirm-type-blue{border-top:solid 7px #3498db;-webkit-animation-name:type-blue;animation-name:type-blue}.jconfirm .jconfirm-box.jconfirm-type-green{border-top:solid 7px #2ecc71;-webkit-animation-name:type-green;animation-name:type-green}.jconfirm .jconfirm-box.jconfirm-type-red{border-top:solid 7px #e74c3c;-webkit-animation-name:type-red;animation-name:type-red}.jconfirm .jconfirm-box.jconfirm-type-orange{border-top:solid 7px #f1c40f;-webkit-animation-name:type-orange;animation-name:type-orange}.jconfirm .jconfirm-box.jconfirm-type-purple{border-top:solid 7px #9b59b6;-webkit-animation-name:type-purple;animation-name:type-purple}.jconfirm .jconfirm-box.jconfirm-type-dark{border-top:solid 7px #34495e;-webkit-animation-name:type-dark;animation-name:type-dark}.jconfirm .jconfirm-box.loading{height:120px}.jconfirm .jconfirm-box.loading:before{content:'';position:absolute;left:0;background:white;right:0;top:0;bottom:0;border-radius:10px;z-index:1}.jconfirm .jconfirm-box.loading:after{opacity:.6;content:'';height:30px;width:30px;border:solid 3px transparent;position:absolute;left:50%;margin-left:-15px;border-radius:50%;-webkit-animation:jconfirm-spin 1s infinite linear;animation:jconfirm-spin 1s infinite linear;border-bottom-color:dodgerblue;top:50%;margin-top:-15px;z-index:2}.jconfirm .jconfirm-box div.jconfirm-closeIcon{height:20px;width:20px;position:absolute;top:10px;right:10px;cursor:pointer;opacity:.6;text-align:center;font-size:27px!important;line-height:14px!important;display:none;z-index:1}.jconfirm .jconfirm-box div.jconfirm-closeIcon:empty{display:none}.jconfirm .jconfirm-box div.jconfirm-closeIcon .fa{font-size:16px}.jconfirm .jconfirm-box div.jconfirm-closeIcon .glyphicon{font-size:16px}.jconfirm .jconfirm-box div.jconfirm-closeIcon .zmdi{font-size:16px}.jconfirm .jconfirm-box div.jconfirm-closeIcon:hover{opacity:1}.jconfirm .jconfirm-box div.jconfirm-title-c{display:block;font-size:22px;line-height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;padding-bottom:15px}.jconfirm .jconfirm-box div.jconfirm-title-c.jconfirm-hand{cursor:move}.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{font-size:inherit;display:inline-block;vertical-align:middle}.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c i{vertical-align:middle}.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c:empty{display:none}.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;font-family:inherit;display:inline-block;vertical-align:middle}.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title:empty{display:none}.jconfirm .jconfirm-box div.jconfirm-content-pane{margin-bottom:15px;height:auto;-webkit-transition:height .4s ease-in;transition:height .4s ease-in;display:inline-block;width:100%;position:relative;overflow-x:hidden;overflow-y:auto}.jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll{overflow-y:hidden}.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar{width:3px}.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-track{background:rgba(0,0,0,0.1)}.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-thumb{background:#666;border-radius:3px}.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{overflow:auto}.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content img{max-width:100%;height:auto}.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content:empty{display:none}.jconfirm .jconfirm-box .jconfirm-buttons{padding-bottom:11px}.jconfirm .jconfirm-box .jconfirm-buttons>button{margin-bottom:4px;margin-left:2px;margin-right:2px}.jconfirm .jconfirm-box .jconfirm-buttons button{display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;min-height:1em;-webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;-webkit-tap-highlight-color:transparent;border:0;background-image:none}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue{background-color:#3498db;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue:hover{background-color:#2980b9;color:#FFF}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green{background-color:#2ecc71;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green:hover{background-color:#27ae60;color:#FFF}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red{background-color:#e74c3c;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover{background-color:#c0392b;color:#FFF}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-orange{background-color:#f1c40f;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-orange:hover{background-color:#f39c12;color:#FFF}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default{background-color:#ecf0f1;color:#000;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover{background-color:#bdc3c7;color:#000}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-purple{background-color:#9b59b6;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-purple:hover{background-color:#8e44ad;color:#FFF}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark{background-color:#34495e;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s}.jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark:hover{background-color:#2c3e50;color:#FFF}.jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c{color:#e74c3c!important}.jconfirm .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c{color:#3498db!important}.jconfirm .jconfirm-box.jconfirm-type-green .jconfirm-title-c .jconfirm-icon-c{color:#2ecc71!important}.jconfirm .jconfirm-box.jconfirm-type-purple .jconfirm-title-c .jconfirm-icon-c{color:#9b59b6!important}.jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c{color:#f1c40f!important}.jconfirm .jconfirm-box.jconfirm-type-dark .jconfirm-title-c .jconfirm-icon-c{color:#34495e!important}.jconfirm .jconfirm-clear{clear:both}.jconfirm.jconfirm-rtl{direction:rtl}.jconfirm.jconfirm-rtl div.jconfirm-closeIcon{left:5px;right:auto}.jconfirm.jconfirm-white .jconfirm-bg,.jconfirm.jconfirm-light .jconfirm-bg{background-color:#444;opacity:.2}.jconfirm.jconfirm-white .jconfirm-box,.jconfirm.jconfirm-light .jconfirm-box{-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.2);box-shadow:0 2px 6px rgba(0,0,0,0.2);border-radius:5px}.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0}.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons{float:right}.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button{}.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{-webkit-box-shadow:none;box-shadow:none;color:#333}.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default:hover,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover{background:#ddd}.jconfirm.jconfirm-white.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-light.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0}.jconfirm.jconfirm-black .jconfirm-bg,.jconfirm.jconfirm-dark .jconfirm-bg{background-color:darkslategray;opacity:.4}.jconfirm.jconfirm-black .jconfirm-box,.jconfirm.jconfirm-dark .jconfirm-box{-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.2);box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white}.jconfirm.jconfirm-black .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0}.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons{float:right}.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default{-webkit-box-shadow:none;box-shadow:none;color:#fff;background:0}.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default:hover,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default:hover{background:#666}.jconfirm.jconfirm-black.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-dark.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0}.jconfirm .jconfirm-box.hilight.jconfirm-hilight-shake{-webkit-animation:shake .82s cubic-bezier(0.36,0.07,0.19,0.97) both;animation:shake .82s cubic-bezier(0.36,0.07,0.19,0.97) both;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.jconfirm .jconfirm-box.hilight.jconfirm-hilight-glow{-webkit-animation:glow .82s cubic-bezier(0.36,0.07,0.19,0.97) both;animation:glow .82s cubic-bezier(0.36,0.07,0.19,0.97) both;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}@-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-2px,0,0);transform:translate3d(-2px,0,0)}20%,80%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}40%,60%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}}@keyframes shake{10%,90%{-webkit-transform:translate3d(-2px,0,0);transform:translate3d(-2px,0,0)}20%,80%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}40%,60%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}}@-webkit-keyframes glow{0%,100%{-webkit-box-shadow:0 0 0 red;box-shadow:0 0 0 red}50%{-webkit-box-shadow:0 0 30px red;box-shadow:0 0 30px red}}@keyframes glow{0%,100%{-webkit-box-shadow:0 0 0 red;box-shadow:0 0 0 red}50%{-webkit-box-shadow:0 0 30px red;box-shadow:0 0 30px red}}.jconfirm{-webkit-perspective:400px;perspective:400px}.jconfirm .jconfirm-box{opacity:1;-webkit-transition-property:all;transition-property:all}.jconfirm .jconfirm-box.jconfirm-animation-top,.jconfirm .jconfirm-box.jconfirm-animation-left,.jconfirm .jconfirm-box.jconfirm-animation-right,.jconfirm .jconfirm-box.jconfirm-animation-bottom,.jconfirm .jconfirm-box.jconfirm-animation-opacity,.jconfirm .jconfirm-box.jconfirm-animation-zoom,.jconfirm .jconfirm-box.jconfirm-animation-scale,.jconfirm .jconfirm-box.jconfirm-animation-none,.jconfirm .jconfirm-box.jconfirm-animation-rotate,.jconfirm .jconfirm-box.jconfirm-animation-rotatex,.jconfirm .jconfirm-box.jconfirm-animation-rotatey,.jconfirm .jconfirm-box.jconfirm-animation-scaley,.jconfirm .jconfirm-box.jconfirm-animation-scalex{opacity:0}.jconfirm .jconfirm-box.jconfirm-animation-rotate{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.jconfirm .jconfirm-box.jconfirm-animation-rotatex{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.jconfirm-animation-rotatexr{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.jconfirm-animation-rotatey{-webkit-transform:rotatey(90deg);transform:rotatey(90deg);-webkit-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.jconfirm-animation-rotateyr{-webkit-transform:rotatey(-90deg);transform:rotatey(-90deg);-webkit-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.jconfirm-animation-scaley{-webkit-transform:scaley(1.5);transform:scaley(1.5);-webkit-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.jconfirm-animation-scalex{-webkit-transform:scalex(1.5);transform:scalex(1.5);-webkit-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.jconfirm-animation-top{-webkit-transform:translate(0px,-100px);transform:translate(0px,-100px)}.jconfirm .jconfirm-box.jconfirm-animation-left{-webkit-transform:translate(-100px,0px);transform:translate(-100px,0px)}.jconfirm .jconfirm-box.jconfirm-animation-right{-webkit-transform:translate(100px,0px);transform:translate(100px,0px)}.jconfirm .jconfirm-box.jconfirm-animation-bottom{-webkit-transform:translate(0px,100px);transform:translate(0px,100px)}.jconfirm .jconfirm-box.jconfirm-animation-zoom{-webkit-transform:scale(1.2);transform:scale(1.2)}.jconfirm .jconfirm-box.jconfirm-animation-scale{-webkit-transform:scale(0.5);transform:scale(0.5)}.jconfirm .jconfirm-box.jconfirm-animation-none{visibility:hidden}.jconfirm.jconfirm-supervan .jconfirm-bg{background-color:rgba(54,70,93,0.95)}.jconfirm.jconfirm-supervan .jconfirm-box{background-color:transparent}.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-blue{border:0}.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-green{border:0}.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-red{border:0}.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-orange{border:0}.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-purple{border:0}.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-dark{border:0}.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-closeIcon{color:white}.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c{text-align:center;color:white;font-size:28px;font-weight:normal}.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c>*{padding-bottom:25px}.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0}.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content-pane{margin-bottom:25px}.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content{text-align:center;color:white}.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons{text-align:center}.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button{font-size:16px;border-radius:2px;background:#303f53;text-shadow:none;border:0;color:white;padding:10px;min-width:100px}.jconfirm.jconfirm-supervan.jconfirm-rtl .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0}.jconfirm.jconfirm-material .jconfirm-bg{background-color:rgba(0,0,0,0.67)}.jconfirm.jconfirm-material .jconfirm-box{background-color:white;-webkit-box-shadow:0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12);box-shadow:0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12);padding:30px 25px 10px 25px}.jconfirm.jconfirm-material .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0}.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-closeIcon{color:rgba(0,0,0,0.87)}.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-title-c{color:rgba(0,0,0,0.87);font-size:22px;font-weight:bold}.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-content{color:rgba(0,0,0,0.87)}.jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons{text-align:right}.jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons button{text-transform:uppercase;font-weight:500}.jconfirm.jconfirm-material.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0}.jconfirm.jconfirm-bootstrap .jconfirm-bg{background-color:rgba(0,0,0,0.21)}.jconfirm.jconfirm-bootstrap .jconfirm-box{background-color:white;-webkit-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2);box-shadow:0 3px 8px 0 rgba(0,0,0,0.2);border:solid 1px rgba(0,0,0,0.4);padding:15px 0 0}.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0}.jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-closeIcon{color:rgba(0,0,0,0.87)}.jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c{color:rgba(0,0,0,0.87);font-size:22px;font-weight:bold;padding-left:15px;padding-right:15px}.jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content{color:rgba(0,0,0,0.87);padding:0 15px}.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons{text-align:right;padding:10px;margin:-5px 0 0;border-top:solid 1px #ddd;overflow:hidden;border-radius:0 0 4px 4px}.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button{font-weight:500}.jconfirm.jconfirm-bootstrap.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0}.jconfirm.jconfirm-modern .jconfirm-bg{background-color:slategray;opacity:.6}.jconfirm.jconfirm-modern .jconfirm-box{background-color:white;-webkit-box-shadow:0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12);box-shadow:0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12);padding:30px 30px 15px}.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-closeIcon{color:rgba(0,0,0,0.87);top:15px;right:15px}.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c{color:rgba(0,0,0,0.87);font-size:24px;font-weight:bold;text-align:center;margin-bottom:10px}.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;-webkit-transform:scale(0);transform:scale(0);display:block;margin-right:0;margin-left:0;margin-bottom:10px;font-size:69px;color:#aaa}.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{text-align:center;font-size:15px;color:#777;margin-bottom:25px}.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons{text-align:center}.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button{font-weight:bold;text-transform:uppercase;-webkit-transition:background .1s;transition:background .1s;padding:10px 20px}.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button+button{margin-left:4px}.jconfirm.jconfirm-modern.jconfirm-open .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{-webkit-transform:scale(1);transform:scale(1)}

/* ==== /includes/designs/b/assets-v3/css/style.css ==== */
/* ============================================================
   A-meubel.nl — Homepage styles  (matched to design reference)
   ============================================================ */

:root{
  --blue:#0065b3;          /* primary royal blue */
  --blue-dark:#16406f;
  --blue-tint:#eef3fa;     /* faint blue fill for FAQ */
  --orange:#c45519;       /* WCAG AA (2026-07-15): verdiept van #e0611c -> wit-op-oranje/oranje-tekst 4,51:1 */
  --orange-dark:#b04d17;  /* hover, iets donkerder dan --orange (5,36:1) */
  --gray-bg:#f3f4f5;
  --text:#3a3f45;
  --muted:#6a7078;        /* WCAG AA (2026-07-15): verdiept van #7b828a -> 5,00:1 op wit / 4,54:1 op --gray-bg */
  --line:#e6e8eb;
  --green:#00875b;        /* WCAG AA (2026-07-15): verdiept van #00b67a -> wit-op-groen 4,55:1 (Trustpilot-stijl) */
  --star:#ffb400;
  --fav-red:#e0241b;
  --radius:10px;
  --container:1357px; /* was 1180px; +15% verbreed op verzoek (2026-06-12) */
  --shadow:0 6px 22px rgba(20,40,70,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Geen horizontale beweging/overscroll: stray overflow wegknippen (clip breekt position:sticky niet). */
html,body{overflow-x:clip;max-width:100%}
body{
  font-family:'Poppins',Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.55;
  font-size:15px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.container-wide{width:100%;max-width:1560px;margin:0 auto;padding:0 22px}

[style*="background-image"]{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#dce0e5;
}

/* ============ TOP BAR ============ */
.topbar{background:var(--blue);color:#fff}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:20px}
.topbar__item{display:flex;align-items:center;gap:9px;white-space:nowrap;color:#fff;text-decoration:none;transition:opacity .15s}
.topbar__item:hover{opacity:.82;color:#fff;text-decoration:none}
.topbar__item img{height:20px;width:20px;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1)}
.topbar__ico{height:18px;width:18px;flex-shrink:0;color:#fff}
.topbar__item strong{display:block;font-size:12px;font-weight:700;line-height:1.2}
.topbar__item span{display:block;font-size:10.5px;opacity:.9;line-height:1.2}
.topbar__actions{display:none}
.topbar__map{display:none}

/* ============ HEADER ============ */
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header__inner{display:flex;align-items:center;gap:26px;min-height:84px}
.logo{display:flex;align-items:center;line-height:1;white-space:nowrap}
.logo img{height:54px;width:auto;display:block}
.logo--light img{height:46px;filter:brightness(0) invert(1)}

.mainnav{display:flex;gap:30px;font-size:15px;font-weight:700;color:var(--blue);margin-left:auto}
.mainnav a:hover{color:var(--orange)}

.search{display:flex;align-items:center;flex:0 1 320px;border:1.5px solid #d9dee4;border-radius:26px;overflow:hidden;background:#fff}
.search input{border:0;flex:1;padding:11px 6px 11px 18px;font:inherit;font-size:13px;outline:none;background:transparent}
.search__btn{border:0;background:none;color:var(--orange);padding:0;margin-right:12px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.cart{flex-shrink:0;color:var(--orange);display:inline-flex;align-items:center}
.header__icons{display:flex;align-items:center;gap:18px;flex-shrink:0}
.header__icon{color:var(--blue);display:inline-flex;align-items:center;position:relative}
.header__icon:hover{color:var(--orange)}
.search-toggle{display:none;background:none;border:0;cursor:pointer}
/* header-hartje zoomt mee met het favoriet-hartje op de productpagina */
.header__icon--fav.fav-pop svg{animation:favPop .42s ease}
.header__icon--cart{position:relative}
.header__badge{position:absolute;top:-5px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--orange);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:10px;min-width:44px;min-height:44px}
/* Mobiele off-canvas nav-drawer (categorieën + info) — alleen mobiel. */
.navdrawer,.navdrawer-backdrop{display:none}
.hamburger span{width:24px;height:2px;background:var(--blue);border-radius:2px}

/* ============ HERO CARD (image + usps) ============ */
.hero{padding-top:16px}
.hero__card{border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}

/* hero image area */
.hero__image{position:relative;min-height:540px;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;background-position:center 72%;
  /* Geoptimaliseerde hero (2048px): WebP ~220KB met JPEG-fallback ~354KB (was 8MB). */
  background-image:url('/includes/designs/b/assets-v3/images/Background Hero.jpg');
  background-image:-webkit-image-set(url('/includes/designs/b/assets-v3/images/Background Hero.webp') type('image/webp'), url('/includes/designs/b/assets-v3/images/Background Hero.jpg') type('image/jpeg'));
  background-image:image-set(url('/includes/designs/b/assets-v3/images/Background Hero.webp') type('image/webp'), url('/includes/designs/b/assets-v3/images/Background Hero.jpg') type('image/jpeg'))}
.hero__image::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,18,33,.5) 0%,rgba(8,18,33,.12) 45%,rgba(8,18,33,0) 70%)}

.hero__content{position:absolute;top:0;left:0;z-index:2;padding:50px 0 0 52px;max-width:780px;color:#fff}
.hero__rating{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.tp-name{font-weight:600;font-size:16px}
.tp-name b{color:var(--green)}
.tp-stars{display:inline-flex;gap:2px}
.tp-stars i{background:var(--green);color:#fff;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-style:normal}
.tp-stars i.half{background:linear-gradient(90deg,var(--green) 50%,#dcdfe6 50%)}
.tp-score{font-weight:700;font-size:16px}
.hero__eyebrow{font-size:23px;font-weight:600;line-height:1.2;margin-bottom:16px;text-transform:uppercase}
.hero__title{font-size:58px;font-weight:800;line-height:1.04;text-transform:uppercase;letter-spacing:.5px}
.hero__title span{color:var(--orange)}
/* #12 primaire CTA in de hero */
.hero__cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:var(--orange);color:#fff;
  border-radius:30px;padding:15px 34px;font-size:16px;font-weight:700;text-decoration:none;text-transform:uppercase;
  letter-spacing:.4px;box-shadow:0 6px 20px rgba(0,0,0,.30);transition:background .15s,transform .15s,box-shadow .15s}
.hero__cta:hover{background:var(--orange-dark);transform:translateY(-1px);box-shadow:0 9px 24px rgba(0,0,0,.34)}
.hero__cta-arw{font-size:19px;line-height:1;transition:transform .15s}
.hero__cta:hover .hero__cta-arw{transform:translateX(4px)}

.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  background:var(--blue);border:0;cursor:pointer;font-size:26px;line-height:1;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.hero__arrow--prev{left:18px}
.hero__arrow--next{right:18px}

/* USP strip overlaid on the bottom of the image */
.hero__usps{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:8px 18px;padding:16px 30px;
  background:linear-gradient(0deg,rgba(8,18,33,.62) 0%,rgba(8,18,33,0) 100%)}
.hero__usps span{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap;cursor:default;pointer-events:none}
.hero__usps .check{width:19px;height:19px;border-radius:50%;background:#2f6fc0;flex-shrink:0;position:relative}
.hero__usps .check::before{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}

/* ============ CATEGORY PILLS ============ */
.catpills{padding:26px 0}
/* 2026-07-21 (David desktop-2): homepage-pills plakken bij scrollen tegen de sticky header
   (84px hoog + 1px border). Alleen desktop; witte achtergrond + subtiele schaduw zodat
   content er netjes onderdoor schuift. z-index onder de header (50) en topbar (55). */
@media(min-width:1025px){
  .catpills--home{position:sticky;top:85px;z-index:45;background:#fff;box-shadow:0 8px 18px -12px rgba(0,0,0,.25)}
}
.catpills__inner{display:flex;align-items:center;gap:12px}
/* standaard: pills passen → gecentreerd, geen pijlen (symmetrisch) */
.catpills__row{display:flex;gap:12px;align-items:center;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
.catpills__row::-webkit-scrollbar{display:none}
.catpills__arrow{display:none;flex-shrink:0;width:36px;height:36px;border-radius:50%;border:0;background:var(--orange);
  color:#fff;cursor:pointer;font-size:18px;line-height:1;align-items:center;justify-content:center}
/* alleen bij overflow (smal scherm): pijlen tonen + links uitlijnen zodat de
   eerste pill bereikbaar blijft en scrollen vanaf het begin werkt */
.catpills--scroll .catpills__arrow{display:flex}
.catpills--scroll .catpills__row{justify-content:flex-start}
/* homepage-variant onder de hero: gecentreerd en doorlopend (wrap), geen scroll/pijlen */
/* Categorie-pills (homepage én collectiepagina) zelfde stijl: ronde-rechthoek, groter,
   en de hele rij ("string") vult adaptief de paginabreedte (geen slider meer). */
.catpills .catpills__row{flex-wrap:wrap;justify-content:center;overflow-x:visible}
.catpills .pill{border-radius:16px;padding:16px 22px;font-size:15px;flex:1 1 auto;justify-content:center}
/* Homepage-pills met hover-flyout (subcategorieën). De wrapper is het flex-item; de pill vult 'm. */
.catpills .catpills__row .pill-wrap{position:relative;flex:1 1 auto;display:flex}
.catpills .catpills__row .pill-wrap > .pill{flex:1 1 auto;width:100%}
.pill-menu{position:absolute;top:calc(100% + 11px);left:0;z-index:60;display:none;box-sizing:border-box;
  grid-template-columns:auto auto;column-gap:26px;row-gap:0;width:auto;max-width:92vw;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(8,18,33,.18);
  padding:11px;padding-right:180px;min-height:150px;overflow:visible;text-align:left}
/* kleine subcategorie-afbeelding in de rechterbovenhoek; wisselt mee met het gehoverde item */
.pill-menu__thumb{position:absolute;top:11px;right:11px;width:148px;height:110px;border-radius:10px;
  background:#eef1f5 center/cover no-repeat;opacity:0;transition:opacity .15s;pointer-events:none}
.pill-menu__thumb--default{opacity:1}
.pill-menu__item:hover .pill-menu__thumb{opacity:1;z-index:5}
.pill-wrap:hover .pill-menu,.pill-wrap:focus-within .pill-menu{display:grid}
/* onzichtbare hover-brug + caret naar de pill */
.pill-menu::before{content:"";position:absolute;top:-13px;left:0;right:0;height:13px}
.pill-menu::after{content:"";position:absolute;top:-7px;left:34px;width:13px;height:13px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.pill-menu__item{display:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap;
  transition:background .12s,color .12s}
.pill-menu__item::before{content:"\203A";color:var(--orange);font-weight:800;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.pill-menu__item:hover{background:var(--blue-tint);color:var(--orange)}
.pill-menu__item:hover::before{opacity:1;transform:translateX(0)}
/* "Alle <categorie>" — kop-link bovenaan, los van de oranje pill én de subcat-items */
.pill-menu__all{grid-column:1 / -1;justify-content:flex-start;background:none;color:var(--orange);
  font-weight:800;font-size:14px;padding:4px 13px 11px;margin:0 0 6px;border-bottom:1px solid var(--line);border-radius:0}
.pill-menu__all::before{content:none}
.pill-menu__all::after{content:"\2192";margin-left:auto;font-weight:800;transition:transform .12s}
.pill-menu__all:hover{background:none;color:var(--orange-dark)}
.pill-menu__all:hover::after{transform:translateX(3px)}
/* rechter pills: flyout rechts uitlijnen zodat 'ie niet buiten beeld valt */
.catpills__row .pill-wrap:nth-last-child(-n+2) .pill-menu{left:auto;right:0}
.catpills__row .pill-wrap:nth-last-child(-n+2) .pill-menu::after{left:auto;right:34px}
.catpills .pill__ico{height:20px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;padding:10px 20px;
  border-radius:24px;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .15s}
.pill:hover{background:var(--orange-dark)}
.pill__ico{height:16px;width:auto;display:block}
/* Trustpilot-balk boven de homepage-categorieën (alleen mobiel zichtbaar; zie media query). */
.tp-bar{display:none;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-decoration:none;color:var(--text)}
.tp-bar .tp-name{font-weight:700;font-size:15px}
.tp-bar .tp-name b{color:var(--green)}
.tp-bar__reviews{font-size:13px;text-decoration:underline;color:var(--text)}
/* 2026-07-21 (David d3/m2): reviewteller in de PDP-ratingregel — desktop naast, mobiel erachter */
.buybox__rating .tp-count{font-size:13px;text-decoration:underline;color:var(--text);margin-left:8px}
.tp-bar__score{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;font-weight:800;font-size:13px;padding:3px 9px;border-radius:4px}
.tp-bar__score i{font-style:normal;font-size:12px}

/* ============ SECTIONS ============ */
.section{padding:44px 0}
.section--alt{background:var(--gray-bg)}
.section__title{text-align:left;font-size:26px;font-weight:700;margin-bottom:26px;color:var(--blue)}
.section__intro{text-align:left;color:var(--muted);margin:-18px 0 26px;font-size:14px}

/* ============ SLIDER / PRODUCTS ============ */
.slider{position:relative;display:flex;align-items:center;gap:6px}
.slider__track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:6px 2px 10px;flex:1;scrollbar-width:none}
.slider__track::-webkit-scrollbar{display:none}
.slider__arrow{flex-shrink:0;width:42px;height:42px;background:none;border:0;cursor:pointer;
  font-size:38px;font-weight:900;color:var(--blue);display:flex;align-items:center;justify-content:center;z-index:2}
.slider__arrow:hover{color:var(--orange)}
.slider__arrow--prev{margin-right:-10px}
.slider__arrow--next{margin-left:-10px}

.product{flex:0 0 calc(25% - 15px);min-width:235px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;scroll-snap-align:start;transition:box-shadow .15s,transform .15s}
.product:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.product__media{position:relative;aspect-ratio:4/3;border-radius:8px;margin-bottom:14px;background-size:cover;background-position:center;background-color:#fff;overflow:hidden}
/* 3:2 kaartframe voor banken/woonkamers/tafels — matcht de werkelijke fotoverhouding
   (banken zijn exact 3:2 → perfecte pasvorm, geen lege ruimte). */
.products-grid--wide .product__media{aspect-ratio:3/2}
/* Collectie-/zoekkaart: afbeelding tot aan de rand van de kaart (full-bleed bovenin),
   bovenhoeken afgerond als de kaart; tekst houdt zijn padding. */
.products-grid:not(.wishlist-grid):not(.products-grid--portrait) .product__media{margin:-16px -16px 14px;border-radius:var(--radius) var(--radius) 0 0}
/* Kaart-slideshow: horizontaal swipebare slides + stippen. */
.product__slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:8px}
.product__slides::-webkit-scrollbar{display:none}
.product__slide{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden}
.product__slide::after{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat}
.product__dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none}
.product__dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.22);transition:background .15s;pointer-events:auto;cursor:pointer}
.product__dot.is-active{background:var(--orange)}
.product__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;
  border:0;background:none;color:var(--orange);font-size:32px;font-weight:900;line-height:1;display:flex;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.product__nav:hover{color:var(--orange-dark)}
.product__nav--prev{left:4px}
.product__nav--next{right:4px}
/* portret-kaarten: alleen de stoelen-collectie (zie category.php $db3c_portrait) */
/* Stoelen-categorie: vierkante kaart met afgeronde hoeken (standaardvorm), foto vult het kader. */
.products-grid--portrait .product__media{aspect-ratio:1/1;border-radius:8px;margin-bottom:14px}
/* Stoelen-foto's (portret 340x453) volledig in het vierkante kader tonen i.p.v. bijsnijden:
   'contain' laat de hele stoel zien; dode hoeken worden wit (via .product__media background-color:#fff). */
.products-grid--portrait .product__slide::after{background-size:contain}
/* Favorieten + zoekresultaten zetten de foto als achtergrond DIRECT op .product__media (geen slide);
   thumbnails behouden hun beeldverhouding, dus 'cover' sneed portret-/brede foto's af. 'contain'
   toont het hele product (dode hoeken wit via background-color:#fff). (fotomaat-fix 2026-07-15) */
.wishlist-grid .product__media,
.products-grid--search .product__media{background-size:contain}
/* Kasten-collectie: verticale foto's volledig in het 4:3-kader ('contain'); witruimte
   links/rechts is bewust ok (David 23-07, punt 4) — dode hoeken wit via background-color:#fff. */
.products-grid--containfit .product__slide::after{background-size:contain}
.product__badge{position:absolute;top:10px;right:10px;background:var(--orange);color:#fff;font-size:13px;font-weight:800;
  width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1.05;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.product__badge small{font-size:7px;font-weight:600;text-transform:uppercase}
/* "Laagste prijs"-badge kleiner op productkaarten (collectie/home/zoeken/favorieten + de
   gerelateerde kaarten op de PP). De grote badge op de PP-hoofdfoto (.gallery__main) blijft. */
.product__media .product__badge:not(.product__badge--sale){width:42px;height:42px;font-size:11px;top:8px;right:8px}
.product__media .product__badge:not(.product__badge--sale) small{font-size:6px}
/* Sale-badge groeit mee met de inhoud (percentage past altijd, nooit afgekapt) */
.product__badge--sale{background:#d12f2f;font-size:15px;width:auto;min-width:56px;padding:0 9px;border-radius:28px}
.product__badge--sale small{font-size:7px}
.product__badge-express{position:absolute;top:74px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  background:#1b8849;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  padding:5px 9px;border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.product__badge-express svg{width:13px;height:13px}
.product__express{display:inline-flex;align-items:center;gap:4px;margin:-4px 0 8px;color:#1b8849;
  font-size:13px;font-weight:700;text-decoration:none}
.product__express:hover{text-decoration:underline}
/* #6 Leverindicatie "Maatwerk, X–Y wkn" — neutraal/informatief (grijs), naast het groene "Snel leverbaar" */
.product__delivery{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.product__tag--gone{position:absolute;top:10px;left:10px;z-index:2;background:#6b7280;color:#fff;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  padding:5px 9px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.product--inactive .product__media{filter:grayscale(1);opacity:.7}
.product--inactive .fav-btn--primary{background:#6e7788;border-color:#6e7788;pointer-events:none;opacity:.6}
.product__cat{font-size:12px;color:var(--orange);font-weight:600;margin-bottom:3px}
.product__name{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:9px}
/* #8 Trustpilot-score op de kaart (A-meubel 4,4) — vertrouwen vroeg in het grid */
.product__rating{display:flex;align-items:center;gap:6px}
.product__stars{display:inline-flex;gap:1px}
.product__stars i{width:14px;height:14px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;border-radius:2px}
.product__stars i.half{background:linear-gradient(90deg,var(--green) 50%,#dcdfe6 50%)}
.product__rating-score{font-size:12px;font-weight:700;color:var(--text)}
.product__rating-src{font-size:11px;color:var(--muted)}
.product__price{font-size:19px;font-weight:800;color:var(--orange)}
/* #1 Doorklik-CTA op collectiekaarten — compacte knop, hoekradius gelijk aan de kaart.
   Gelijk verticaal ritme (9px) tussen de tekstregels: naam / prijs / express / meta / knop. */
.products-grid .product{display:flex;flex-direction:column}
.products-grid .product__name{margin:0}
.products-grid .product__rating{margin-top:9px}
.products-grid .product__price{margin-top:9px}
.products-grid .product__express,.products-grid .product__delivery{margin:9px 0 0}
.products-grid .product__meta{margin-top:9px}
.product__cta{display:block;text-align:center;margin-top:9px;background:var(--orange);color:#fff;
  border-radius:var(--radius);padding:9px 18px;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s}
.product__cta:hover{background:var(--orange-dark)}
/* #2 AJAX-filter: subtiele laadstaat van het resultatenblok tijdens het ophalen */
#db3cResults{transition:opacity .12s}
#db3cResults.is-loading{opacity:.45;pointer-events:none}

/* ============ COLLECTIONS ============ */
/* 2026-07-21 (David desktop-1): 4 gelijke tegels; hogere rij (260px) zodat de cover-foto's
   ruim in beeld blijven. --wide/--full worden niet meer gebruikt op de homepage. */
.collections{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:20px}
.collection{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.collection--wide{grid-column:span 3}
.collections .collection--full{grid-column:1 / -1}
.collection__bar{position:relative;z-index:2;width:100%;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:13px 18px}
.collection__bar strong{display:block;font-size:17px;font-weight:700}
.collection__bar span{font-size:12.5px}
.collection__ico{font-size:24px;opacity:.85}

/* ============ OPENINGSTIJDEN ============ */
/* 07-08: de brede tabel (min-width 840px) is tussen 760 en 840px horizontaal scrollbaar, maar
   dat was niet te zien — op touch verschijnt er geen scrollbalk. Een zachte gradiënt langs de
   rechterrand maakt duidelijk dat er meer staat. `overscroll-behavior-x: contain` houdt de veeg
   binnen de tabel. */
.hours{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  background-image:linear-gradient(to left,rgba(8,18,33,.07),rgba(8,18,33,0) 26px);
  background-repeat:no-repeat;background-position:right center;background-size:26px 100%;background-attachment:local}
.hours__mobile,.hours__cities{display:none}
.hours__table{border-collapse:collapse;width:100%;font-size:12px;min-width:840px}
.hours__table th,.hours__table td{padding:10px 8px;text-align:center;white-space:nowrap}
.hours__table thead th{color:var(--muted);font-weight:600;font-size:11px;border-bottom:2px solid var(--line)}
.hours__cityhead{color:var(--orange);font-weight:700;text-decoration:none;white-space:nowrap;transition:color .15s ease}
.hours__cityhead:hover{color:var(--orange-dark);text-decoration:underline}
.hours__table tbody th{text-align:left;font-weight:600;color:var(--text);padding-left:16px}
.hours__table tbody tr{border-bottom:1px solid var(--line)}
.hours__table tbody tr:last-child{border-bottom:0}
.hours__today th,.hours__today td{color:var(--orange);font-weight:700}
.hours__city{background:var(--orange);color:#fff;font-size:12px;font-weight:600;padding:9px 10px;border-radius:14px;
  text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px}
.hours__city:hover{background:var(--orange-dark);color:#fff}
/* 07-08-2026: stad-knop met outlet krijgt de naam boven en een groene badge eronder. De knop
   blijft even breed (de grid-kolom bepaalt de breedte) en wordt alleen iets hoger; de hele knop
   blijft één link, dus de klikbaarheid van de naam verandert niet. */
.hours__city--outlet{flex-direction:column;gap:4px;padding-top:7px;padding-bottom:7px;line-height:1.25}
.hours__city-badge{display:inline-block;background:var(--green);color:#fff;border-radius:4px;
  padding:1px 6px;font-size:10px;font-weight:700;letter-spacing:.2px;white-space:nowrap;max-width:100%}
/* 07-08 (David): "XXL outlet aanwezig" is definitief; de compacte variant is vervallen. Op zeer
   smalle knoppen (<=380px viewport, 2 kolommen) past die tekst niet op één regel — daar wrapt hij
   binnen de knop over twee regels in plaats van tegen de rand te lopen. De knopbreedte wordt door
   het grid bepaald en verandert dus niet; de knop wordt alleen iets hoger. */
@media(max-width:380px){
  .hours__city-badge{white-space:normal;font-size:9.5px;line-height:1.25;padding:2px 5px}
}
/* 2026-07-24 (David R6): op /over-ons/openingstijden staat de tabel in .prose en won
   ".prose a" (specificiteit) van .hours__city -> oranje tekst op oranje knop = "knoppen
   zonder locatietekst" (alleen mobiel zichtbaar, want daar renderen de stadsknoppen). */
.prose .hours__city{color:#fff;text-decoration:none;font-weight:600}
.prose .hours__city:hover{color:#fff}
.prose .hours__cityhead{text-decoration:none}
.prose__subkop{font-size:17px;margin:0 0 14px}
.hours__mobile{width:100%;border-collapse:collapse;font-size:14px}
.hours__mobile th{text-align:left;font-weight:600;color:var(--text);padding:12px 16px;width:50%}
.hours__mobile td{text-align:right;padding:12px 16px;color:var(--text)}
.hours__mobile tr{border-bottom:1px solid var(--line)}
.hours__mobile tr:last-child{border-bottom:0}
.hours__mobile .hours__today th,.hours__mobile .hours__today td{color:var(--orange);font-weight:700}
/* locatie-knoppen als voetregel in de tabel → uitgelijnd onder de juiste kolom */
.hours__table tfoot td{padding:14px 4px 4px;text-align:center}
.hours__table tfoot td:first-child{padding:0}
.hours__pill{display:block;background:var(--orange);color:#fff;border-radius:999px;padding:7px 6px;
  font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.hours__pill:hover{background:var(--orange-dark)}
/* Mobiel: brede 11-koloms tabel weg, compacte Dag/Tijd-tabel + stad-knoppen i.p.v. zijwaarts scrollen. */
@media(max-width:760px){
  .hours{overflow-x:visible}
  .hours__table{display:none}
  .hours__mobile{display:table}
  .hours__cities{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:14px 16px 16px}
}

/* ============ STORES + FAQ ============ */
.stores__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.stores__title{font-size:30px;color:var(--blue);margin-bottom:20px;font-weight:700;line-height:1.15}
.stores__title span{color:var(--orange)}
.stores__text p{margin-bottom:15px;color:#52585f;font-size:14.5px}
.stores__map{position:relative;display:flex;justify-content:center;align-items:center;min-height:510px}
.stores__map::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80%;max-width:380px;aspect-ratio:1/1;border-radius:50%;background:var(--orange);z-index:0}
.stores__mapimg{position:relative;z-index:1;width:100%;max-width:460px;aspect-ratio:1093/1174;
  background-color:transparent;background-size:contain;background-position:center;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.18))}
/* Stores-kaart ("kom langs"): transparante klik-hotspots over de in de afbeelding gebakken
   markers; elke linkt naar /woonwinkel-<slug> met dezelfde naam-tooltip (.pin__label) als de
   contact-kaart. Bij hover een subtiele witte ring als affordance. (2026-07-25) */
.storepin{position:absolute;transform:translate(-50%,-50%);width:clamp(24px,6.2%,42px);aspect-ratio:1;
  border-radius:50%;cursor:pointer;z-index:1;transition:box-shadow .16s ease,background .16s ease}
.storepin:hover,.storepin:focus-within{z-index:6;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 3px rgba(255,255,255,.55),0 7px 16px rgba(16,40,80,.28)}

.faq{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.faq__item{border:1.5px solid var(--blue);border-radius:30px;overflow:hidden;background:#fff}
.faq__item.is-open{border-radius:18px}
.faq__q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;padding:13px 22px;
  font:inherit;font-weight:500;font-size:14px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq__icon{transition:transform .2s;font-size:16px}
.faq__item.is-open .faq__icon{transform:rotate(180deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq__a p{padding:0 22px 15px;font-size:13px;color:#555}

/* ============ REVIEWS ROW ============ */
/* 2026-07-22 (David): blogblok weg -> 2 kolommen i.p.v. 3 */
.reviews{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}
.reviews__heading{font-size:22px;font-weight:600;margin-bottom:20px;color:#4a4f55}

.blogcard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(20,40,70,.05);overflow:hidden}
.blogcard__media{aspect-ratio:16/10;margin:12px;border-radius:10px}
.blogcard__body{padding:6px 18px 14px}
.blogcard__body h4{font-size:14.5px;font-weight:700;margin-bottom:8px;color:var(--blue)}
.blogcard__body p{font-size:12.5px;color:#555;line-height:1.6}
.blogcard__footer{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px dashed var(--line)}
.blogcard__avatar{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.blogcard__author{font-size:12px;color:#555;font-weight:500}
.blogcard__more{margin-left:auto;color:var(--blue);font-size:24px;line-height:1;font-weight:700}

.reviewcard{background:#f4f5f6;border-radius:14px;padding:24px 26px}
.reviewcard__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.reviewcard__head strong{font-size:15px;color:var(--blue);display:block}
.reviewcard__meta{font-size:11px;color:var(--blue);display:block;margin-top:2px}
.reviewcard__lead{font-weight:700;font-size:13px;color:#3a3f45;margin-bottom:8px}
.reviewcard p{font-size:12.5px;color:#555;margin-bottom:12px;line-height:1.65}
.reviewcard__date{font-size:11px;font-weight:700;color:var(--blue)}
.stars{color:var(--star);letter-spacing:2px;font-size:17px}

.trustpilot-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 34px;margin-top:46px;
  box-shadow:0 2px 10px rgba(20,40,70,.05)}
.trustpilot-box__logo{height:30px;width:auto;display:block;margin-bottom:20px}
.tp-star{color:var(--green)}
.trustpilot-box__score{font-size:50px;font-weight:800;color:#191919;line-height:1}
.trustpilot-box__label{font-size:21px;font-weight:700;color:#191919;margin:14px 0 10px}
.tp-stars--lg i{width:29px;height:29px;font-size:17px}
.trustpilot-box .tp-stars i.half{background:linear-gradient(90deg,var(--green) 50%,#dcdfe6 50%)}
.trustpilot-box__count{font-size:14.5px;color:#191919;margin-top:14px}

/* ============ NEWSLETTER ============ */
.newsletter{padding:42px 0}
.newsletter__grid{display:grid;grid-template-columns:1fr 2fr;gap:26px;align-items:stretch}
.newsletter__img{min-height:240px;border-radius:16px;background-color:#cfd4d9}
.newsletter__box{background:var(--blue);color:#fff;border-radius:16px;padding:42px 46px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap}
.newsletter__intro{flex:1;min-width:240px}
.newsletter__box h2{font-size:30px;font-weight:800;line-height:1.18;margin-bottom:16px}
.newsletter__intro p{font-size:14px;opacity:.92;line-height:1.55}
.newsletter__form{display:flex;flex-direction:column;gap:14px;width:280px;flex-shrink:0}
.newsletter__form input{border:0;border-radius:30px;padding:12px 22px;font:inherit;font-size:13.5px;width:100%}
.newsletter__form button{align-self:flex-start;background:var(--orange);color:#fff;border:0;border-radius:30px;
  padding:11px 32px;font:inherit;font-weight:600;cursor:pointer}
.newsletter__form button:hover{background:var(--orange-dark)}

/* ============ CONTACT ============ */
.contact{background:var(--gray-bg);padding:52px 0 0;overflow:hidden}
.contact__grid{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;align-items:end}
.contact__text{align-self:center;padding-bottom:52px}
.contact__text h2{font-size:23px;color:var(--blue);font-weight:700;margin-bottom:14px;line-height:1.3}
.contact__text>p{color:#52585f;margin-bottom:28px;font-size:14px}
.contact__text>p strong{color:#52585f;font-weight:700}
.contact__list{display:flex;flex-direction:column;gap:22px}
.contact__list li{display:flex;gap:16px;align-items:center}
.contact__ico{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.contact__list strong{color:var(--text);font-size:16px;font-weight:700;display:block;line-height:1.3}
.contact__list span{color:var(--orange);font-size:12.5px;line-height:1.4;display:block}
.contact__list span b{font-weight:700}
.contact__visual{position:relative;min-height:460px}
.contact__map{position:absolute;right:0;bottom:0;width:72%;max-width:480px}
.contact__mapinner{position:relative;width:100%;aspect-ratio:420/490}
.contact__mapbase{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:brightness(0) invert(0.72)}
.pin{position:absolute;transform:translate(-50%,-100%);line-height:0;z-index:1}
.pin img{display:block;width:34px;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
/* Homepage-showroomkaart: verzorgde naam-tooltip (pill + oranje locatie-accent + zachte pop-in)
   en marker-accent bij hover/focus (2026-07-25) */
.pin:hover,.pin:focus-within{z-index:6}
.pin:hover img,.pin:focus-visible img{transform:scale(1.18) translateY(-1px)}
.pin__label{position:absolute;bottom:100%;left:50%;
  transform:translate(-50%,5px) scale(.9);transform-origin:bottom center;
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,#1e5089,var(--blue-dark,#16406f));
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;line-height:1;white-space:nowrap;
  padding:7px 13px;border-radius:999px;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 10px 24px rgba(16,40,80,.34),0 1px 1px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,.09) inset;
  transition:opacity .18s ease,transform .26s cubic-bezier(.34,1.56,.64,1),visibility .18s;z-index:6}
.pin__label::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--orange,#c45519);box-shadow:0 0 0 3px rgba(196,85,25,.25)}
/* Open/dicht-indicator in de kaart-tooltip: stip groen (open) / rood (dicht) + status-tekst
   (o.b.v. de openingstijden van vandaag). (2026-07-25) */
.pin__label--open::before{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.32)}
.pin__label--closed::before{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.32)}
.pin__status{margin-left:1px;padding-left:8px;border-left:1px solid rgba(255,255,255,.26);
  font-weight:700;font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.pin__label--open .pin__status{color:#86efac}
.pin__label--closed .pin__status{color:#fca5a5}
.pin__label::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:-1px;
  border:6px solid transparent;border-top-color:var(--blue-dark,#16406f);
  filter:drop-shadow(0 3px 2px rgba(16,40,80,.16))}
.pin:hover .pin__label,.pin:focus-within .pin__label,
.storepin:hover .pin__label,.storepin:focus-within .pin__label{opacity:1;visibility:visible;transform:translate(-50%,-10px) scale(1)}
.contact__person{position:absolute;left:0;bottom:0;width:46%;height:78%;z-index:2;
  background-position:bottom center;background-size:contain;background-repeat:no-repeat;background-color:transparent}

/* ============ FOOTER ============ */
.footer{background:var(--orange);color:#fff;padding:40px 0 0}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;padding-bottom:14px}
.footer .logo--light .logo__name{color:#fff;font-weight:800}
.footer .logo--light .logo__tld{color:#fff}
.footer__social-wrap{text-align:right}
.footer__social-wrap h4{color:#fff;font-size:18px;font-weight:800;margin-bottom:14px}
.footer__social{display:flex;gap:16px;justify-content:flex-end}
.footer__social a{display:flex;align-items:center;justify-content:center}
.footer__social a img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1)}
.footer__social a svg{width:25px;height:25px;fill:#fff}
.footer__social a:hover{opacity:.8}

.footer__block{padding:14px 22px 6px}
.footer__heading{color:#fff;font-size:19px;font-weight:800;margin-bottom:16px}
.footer__cols{display:grid;gap:30px}
.footer__cols--3{grid-template-columns:repeat(3,minmax(0,220px))}
.footer__cols--2{grid-template-columns:repeat(2,minmax(0,280px))}
.footer__cols li{margin-bottom:9px}
.footer__cols a{font-size:13.5px;font-weight:500}
.footer__cols a:hover{text-decoration:underline}
/* 2026-07-29 herstructurering infomenu's: footer in 3 taakkolommen (Klantenservice /
   Over A-meubel / Inspiratie). .footer__links-row (oude platte rij) blijft staan voor revert. */
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;padding:14px 22px 6px}
.footer__links-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.footer__links-col a{font-size:13.5px;font-weight:500;color:#fff}
.footer__links-col a:hover{text-decoration:underline}
@media(max-width:820px){.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.footer__cols{grid-template-columns:1fr;gap:18px}}
.footer__links-row{display:flex;flex-wrap:wrap;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.footer__links-row li{display:flex;align-items:center}
.footer__links-row li:not(:last-child)::after{content:"|";margin:0 12px;color:rgba(255,255,255,.55)}
.footer__links-row a{font-size:13.5px;font-weight:500;color:#fff}
.footer__links-row a:hover{text-decoration:underline}

.footer__bottom{background:#fff;color:#555;margin-top:30px;padding:16px 0}
.footer__bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.footer__bottom p{font-size:12px;line-height:1.6}
.footer__bottom a{color:#555;text-decoration:underline}
.footer__badges{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{background:#f3f4f5;border:1px solid var(--line);padding:5px 11px;border-radius:5px;font-size:12px;font-weight:700;color:#444}
.badge--tp{color:#191919}.badge--tp::first-letter{color:var(--green)}
.badge--ideal{color:#cc0066}
.badge--logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;padding:7px 12px}
.badge--logo img,.badge__img{height:22px;width:auto;display:block;object-fit:contain}

/* ============ COLLECTION PAGE ============ */
.breadcrumbs{padding:6px 0;font-size:12.5px;color:var(--muted)}
.breadcrumbs a:hover{color:var(--orange)}
.breadcrumbs span{margin:0 7px;color:var(--orange)}
.breadcrumbs strong{color:var(--blue);font-weight:600}

.pagehead{padding:6px 0 18px}
.pagehead__title{font-size:32px;font-weight:800;color:var(--blue);margin-bottom:8px}
.pagehead__intro{max-width:680px;font-size:14px;color:#52585f}

.cat-layout{display:grid;grid-template-columns:264px 1fr;gap:30px;align-items:start;padding-bottom:50px}

/* filters */
.filters__toggle{display:none}
.filter{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.filter__title{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:12px}
.filter__price{display:flex;align-items:center;gap:8px}
.filter__price input{width:100%;min-width:0;border:1.5px solid var(--line);border-radius:20px;padding:8px 12px;font:inherit;font-size:12.5px;outline:none}
.filter__price input:focus{border-color:var(--blue)}
.filter__price span{color:var(--muted)}
.filter__apply{margin-top:12px;background:var(--orange);color:#fff;border:0;border-radius:20px;padding:8px 22px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.filter__apply:hover{background:var(--orange-dark)}
.check{display:flex;align-items:center;gap:9px;font-size:13px;color:#444;padding:5px 0;cursor:pointer}
.check input{accent-color:var(--orange);width:15px;height:15px;cursor:pointer}
.check .dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.check em{font-style:normal;color:var(--muted);font-size:11.5px;margin-left:auto}
.filter--usp{background:var(--blue);border:0;color:#fff;display:flex;flex-direction:column;gap:10px}
.filter--usp span{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500}
.check-round{width:17px;height:17px;border-radius:50%;background:#2f6fc0;flex-shrink:0;position:relative}
.check-round::before{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}

/* toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.toolbar__count{font-size:13.5px;color:#52585f}
.toolbar__count strong{color:var(--blue)}
.toolbar__sort{font-size:13px;color:#52585f;display:flex;align-items:center;gap:9px}
.toolbar__sort select{border:1.5px solid var(--line);border-radius:20px;padding:8px 14px;font:inherit;font-size:12.5px;color:var(--blue);font-weight:600;background:#fff;cursor:pointer;outline:none}

/* actieve-filter-chips */
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 18px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--blue-tint);color:var(--blue);
  font-size:13px;font-weight:600;line-height:1;padding:7px 12px;border-radius:18px;text-decoration:none;
  border:1px solid var(--line);transition:background .15s}
.chip:hover{background:#e3e9f2}
.chip__x{font-size:16px;line-height:.8;color:var(--muted)}
.chip:hover .chip__x{color:var(--blue)}
.chip--clear{background:none;border-color:transparent;color:var(--muted);text-decoration:underline}
.chip--clear:hover{background:none;color:var(--blue)}

/* grid */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.products-grid .product{min-width:0}
.product__sale{position:absolute;top:10px;right:10px;background:var(--blue);color:#fff;font-size:13px;font-weight:800;
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.product__price s{color:var(--muted);font-weight:600;font-size:14px;margin-right:7px}

/* pagination */
.pagination{display:flex;justify-content:center;gap:10px;padding:34px 0 6px}
.pagination__item{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all .15s}
.pagination__item:hover{border-color:var(--orange);color:var(--orange)}
.pagination__item--active{background:var(--orange);border-color:var(--orange);color:#fff}
.pagination__item--active:hover{color:#fff}
.pagination__item--next{font-size:20px}

/* seo block — natuurlijke 2-koloms doorlopende tekst (koppen blijven bij hun alinea) */
.seo__title{font-size:24px;font-weight:700;color:var(--blue);margin-bottom:18px}
.seo__cols{column-count:2;column-gap:40px}
@media(max-width:780px){.seo__cols{column-count:1}}
.seo__cols h2,.seo__cols h3,.seo__cols h4{font-size:16px;font-weight:700;color:var(--blue);
  margin:0 0 8px;break-after:avoid}
.seo__cols h2:not(:first-child),.seo__cols h3:not(:first-child),.seo__cols h4:not(:first-child){margin-top:18px}
.seo__cols p{font-size:13.5px;color:#52585f;line-height:1.7;margin:0 0 12px;break-inside:avoid}
.seo__cols p:first-child,.seo__cols h2:first-child,.seo__cols h3:first-child{margin-top:0}
.seo__cols a{color:var(--blue);text-decoration:underline}
.seo__cols ul,.seo__cols ol{margin:0 0 12px;padding-left:20px;font-size:13.5px;color:#52585f;line-height:1.7}

/* ============ PRODUCT PAGE ============ */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;padding-bottom:50px}

.gallery__main{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:14px;
  background-size:contain;background-position:center;background-color:#fff;overflow:hidden}
/* 3:2 hoofdfoto voor banken/woonkamers/tafels (zelfde als de collectiekaarten) */
.gallery__main--wide{aspect-ratio:3/2}
/* PDP hoofdgalerij als swipebare slider */
.gallery__slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:14px}
.gallery__slides::-webkit-scrollbar{display:none}
.gallery__slide{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden;cursor:zoom-in}
.gallery__slide::after{content:"";position:absolute;inset:0;background:var(--img) center/contain no-repeat}
/* Theatre/lightbox bij klik op de productfoto */
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(8,18,33,.92);display:flex;align-items:center;justify-content:center;padding:40px}
.lightbox__img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;background:#fff}
.lightbox__close{position:absolute;top:16px;right:22px;width:44px;height:44px;font-size:34px;line-height:1;color:#fff;background:none;border:0;cursor:pointer}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;border:0;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}
.lightbox__nav:hover{background:rgba(255,255,255,.32)}
/* Keuze-popup: dwingt stof/kleur-keuze af vóór toevoegen aan winkelwagen */
.pickpop{position:fixed;inset:0;z-index:10001;background:rgba(8,18,33,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.pickpop__box{position:relative;background:#fff;border-radius:16px;max-width:380px;width:100%;padding:28px 24px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.3)}
.pickpop__close{position:absolute;top:8px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.pickpop__title{font-size:19px;font-weight:800;color:var(--blue);margin:0 0 8px}
.pickpop__txt{font-size:14px;color:var(--text);line-height:1.5;margin:0 0 20px}
.pickpop__cta{width:100%}
/* Winkelwagen-popup na toevoegen: blijft staan tot de bezoeker zelf sluit */
.cartpop{position:fixed;inset:0;z-index:10001;background:rgba(8,18,33,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.cartpop__box{position:relative;background:#fff;border-radius:16px;max-width:400px;width:100%;padding:30px 24px 24px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.3)}
.cartpop__close{position:absolute;top:8px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.cartpop__check{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--green,#2ea44f);color:#fff;font-size:26px;margin-bottom:12px}
.cartpop__title{font-size:18px;font-weight:800;color:var(--blue);margin:0 0 18px}
.cartpop__btns{display:flex;flex-direction:column;gap:10px}
.cartpop__cta{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:10px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.cartpop__cta--primary{background:var(--orange);color:#fff;border:0}
.cartpop__cta--primary:hover{background:var(--orange-dark)}
.cartpop__cta--ghost{background:#fff;color:var(--blue);border:1.5px solid var(--line)}
.cartpop__cta--ghost:hover{border-color:var(--blue)}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;
  border:0;background:none;color:var(--orange);font-size:42px;font-weight:900;line-height:1;display:flex;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.gallery__nav:hover{color:var(--orange-dark)}
.gallery__nav--prev{left:6px}
.gallery__nav--next{right:6px}
.gallery__thumbs{display:flex;gap:12px;margin-top:14px}
.thumb{width:86px;height:66px;border:2px solid var(--line);border-radius:10px;cursor:pointer;padding:0;
  background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#fff;transition:border-color .15s;overflow:hidden}
.thumb:hover{border-color:var(--orange)}
.thumb--active{border-color:var(--orange)}

.pdp-usps{margin-top:22px;background:var(--blue);color:#fff;border-radius:12px;padding:18px 22px;
  display:flex;flex-direction:column;gap:10px}
.pdp-usps span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700} /* 2026-07-23 (David): alle PDP-USP's vet */
.pdp-usps--belowtabs{display:none}

/* categorie boven de productnaam: zelfde blauw als de titel (kaarten elders blijven oranje) */
.buybox .product__cat{color:var(--blue)}
.buybox__title{font-size:30px;font-weight:800;color:var(--blue);margin:2px 0 10px}
/* #10 korte USP-subtitel onder de producttitel */
.buybox__subtitle{margin:-2px 0 13px;font-size:14.5px;line-height:1.45;color:var(--muted);font-weight:500}
.buybox__rating{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.buybox__rating a{font-size:12.5px;color:var(--blue);text-decoration:underline}
/* #7 Concrete klantreviews in de buybox (net onder de CTA) — social proof op het beslismoment */
.buybox__reviews{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.buybox__reviews-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text);margin:0 0 12px}
.buybox__reviews-head .tp-stars i{width:16px;height:16px;font-size:10px}
.minireviews{position:relative;min-height:66px}
.minireviews .minireview{display:none}
.minireviews .minireview.is-active{display:block;animation:db3pRvFade .45s ease}
@keyframes db3pRvFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.minireview{margin:0;padding:0;border:0}
.minireview__text{margin:0 0 3px;font-size:13px;line-height:1.45;color:var(--text)}
.minireview__name{font-size:12px;font-style:normal;font-weight:600;color:var(--muted)}
.buybox__reviews-link{display:inline-block;font-size:12.5px;color:var(--blue);text-decoration:underline}
.buybox__price{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.buybox__price s{color:var(--muted);font-size:18px;font-weight:600}
.buybox__price strong{color:var(--orange);font-size:38px;font-weight:800;line-height:1}
.buybox__vat{font-size:12px;color:var(--muted)}
.stock{display:flex;align-items:center;gap:8px;font-size:13px;color:#2e7d32;font-weight:600;margin-bottom:22px}
.stock i{width:9px;height:9px;border-radius:50%;background:#2e7d32}

.opt{margin-bottom:18px}
.opt__label{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:9px}
.opt__label strong{color:var(--blue)}
.swatches{display:flex;gap:10px}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;outline:2px solid var(--line);cursor:pointer;transition:outline-color .15s}
.swatch:hover{outline-color:var(--orange)}
.swatch--active{outline-color:var(--orange)}
.optpills{display:flex;gap:10px}
.optpill{border:1.5px solid var(--line);background:#fff;color:var(--blue);border-radius:22px;padding:9px 26px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.optpill:hover{border-color:var(--orange);color:var(--orange)}
.optpill--active{background:var(--blue);border-color:var(--blue);color:#fff}
.optpill--active:hover{color:#fff}

.buybox__actions{display:flex;gap:14px;align-items:stretch;margin:24px 0 16px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:26px;overflow:hidden;background:#fff}
.qty__btn{width:44px;min-height:44px;border:0;background:#fff;color:var(--blue);font-size:19px;cursor:pointer;align-self:stretch}
.qty__btn:hover{background:var(--gray-bg)}
.qty input{width:22px;border:0;text-align:center;font:inherit;font-weight:700;color:var(--blue);outline:none;padding:0}
.btn-cart{flex:1;display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--orange);color:#fff;border:0;border-radius:26px;padding:14px 30px;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.btn-cart:hover{background:var(--orange-dark)}
/* Outlet: "bekijk in showroom"-knop i.p.v. winkelwagen (blauw = naar showroom, geen koop-actie). */
.btn-showroom{background:var(--blue);text-decoration:none}
.btn-showroom:hover{background:var(--blue-dark)}
.buybox__outletnote{font-size:13px;color:var(--text);background:var(--blue-tint);border-radius:8px;padding:11px 14px;margin:12px 0 0;line-height:1.5}
/* Vergrendeld aantal (magazijn-opruiming per X) + uitleg-popup. */
.qty--locked{opacity:.92}
.qty--locked .qty__btn{cursor:not-allowed;color:var(--muted)}
.infopop{position:fixed;inset:0;z-index:9999;background:rgba(8,18,33,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.infopop__box{background:#fff;border-radius:14px;max-width:380px;width:100%;padding:24px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.infopop__msg{font-size:14.5px;line-height:1.6;color:var(--text);margin:0 0 18px}
.infopop__ok{background:var(--orange);color:#fff;border:0;border-radius:24px;padding:11px 26px;font-size:14px;font-weight:700;cursor:pointer}
.infopop__ok:hover{background:var(--orange-dark)}

.buybox__pay{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
/* #13 geruststelling bij 'Leg in winkelwagen': 10% aanbetaling + betaalmethoden */
.pdp-assure{margin:14px 0 0;padding:13px 0 2px;border-top:1px solid var(--line)}
.pdp-assure__pay{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);margin:0 0 10px;line-height:1.4}
.pdp-assure__pay svg{color:var(--green);flex-shrink:0}
.pdp-assure__methods{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdp-assure__safe{font-size:12px;color:var(--muted);white-space:nowrap}

.pdp-faq{margin-top:0}
.spec{width:100%;border-collapse:collapse;margin:0 22px 15px;width:calc(100% - 44px);font-size:13px}
.spec th{text-align:left;color:var(--blue);font-weight:600;padding:7px 0;width:46%;vertical-align:top}
.spec td{color:#555;padding:7px 0}
.spec tr+tr{border-top:1px solid var(--line)}

/* ============ ABOUT PAGE ============ */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;margin-bottom:40px}
.about__img{aspect-ratio:4/3;border-radius:14px;background-size:cover;background-position:center}
.about p{font-size:14px;color:#52585f;margin-bottom:14px;line-height:1.7}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:6px 0 40px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center;padding:26px 14px}
.stat strong{display:block;font-size:30px;font-weight:800;color:var(--orange)}
.stat span{font-size:13px;color:var(--blue);font-weight:600}
.usp-band{background:var(--blue);border-radius:14px;color:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding:18px 26px;margin-bottom:50px}
.usp-band span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}

/* ============ VESTIGINGEN ============ */
.stores-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
.store-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.store-card h3{color:var(--blue);font-size:17px;font-weight:700;margin-bottom:6px}
.store-card p{font-size:12.5px;color:#52585f;line-height:1.6;margin-bottom:8px}
.store-card .hours-line{font-size:12px;color:var(--muted)}
.store-card a{display:inline-block;margin-top:10px;color:var(--orange);font-weight:600;font-size:13px}

/* ============ KLANTENPORTAAL ============ */
.portal{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;max-width:940px;margin:0 auto 50px}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 32px}
.panel h2{color:var(--blue);font-size:20px;font-weight:700;margin-bottom:8px}
.panel>p{font-size:13px;color:var(--muted);margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:6px}
.field input,.field select{width:100%;border:1.5px solid var(--line);border-radius:24px;padding:11px 18px;font:inherit;font-size:13px;outline:none;background:#fff}
.field input:focus{border-color:var(--blue)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--orange);color:#fff;border:0;border-radius:26px;padding:13px 34px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:var(--orange-dark)}
.panel .aux{display:flex;justify-content:space-between;margin-top:14px;font-size:12.5px;flex-wrap:wrap;gap:8px}
.panel .aux a{color:var(--blue);text-decoration:underline}
.panel--blue{background:var(--blue);border:0;color:#fff}
.panel--blue h2{color:#fff}
.panel--blue ul{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.panel--blue li{display:flex;gap:10px;align-items:center;font-size:13.5px;font-weight:500}

/* ============ CART ============ */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;padding-bottom:50px}
/* tijdens een AJAX-update: even dimmen + niet klikbaar, zonder de pagina te herladen */
.qty.is-busy,.cartline.is-busy,.cart-options.is-busy{opacity:.55;pointer-events:none;transition:opacity .12s}
.cartline{display:grid;grid-template-columns:120px 1fr auto auto auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.cartline__img{width:120px;height:90px;border-radius:8px;background-size:cover;background-position:center;background-color:#f3f4f5}
/* stoel-foto's (portret) passen in het kader i.p.v. afgesneden (cover) — nu desktop ÉN mobiel (was mobiel-only; David 2026-07-24) */
.cartline__img--contain{background-size:contain;background-color:#fff}
.cartline__name{font-size:15px;font-weight:700;color:var(--blue)}
.cartline__opts{font-size:12px;color:var(--muted);margin-top:3px}
/* 2026-07-21 (David desktop-6): mini-thumbs opstelling (lijntekening, contain) + kleur (cover) */
.cartline__thumbs{display:flex;gap:8px;margin-top:8px}
.cartline__thumb{width:54px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff center/cover no-repeat}
.cartline__thumb--opst{background-size:contain;background-origin:content-box;padding:3px}
.cartline__edit{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--orange);text-decoration:underline}
.cartline__edit:hover{color:var(--orange-dark)}
.cartline__price{font-size:16px;font-weight:800;color:var(--orange);white-space:nowrap}
.cartline__price s{color:var(--muted);font-weight:600;font-size:12.5px;margin-right:6px}
.cartline__remove{border:0;background:none;color:var(--fav-red,#e2342d);font-size:28px;font-weight:700;cursor:pointer;line-height:1;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:-10px -10px 0 0}
.cartline__remove:hover{color:#b71c17}
/* Mobiel (≤760px): kleine thumbnail linksboven, naam ernaast, daaronder aantal + prijs gestapeld */
@media(max-width:760px){
  .cartline{display:grid;grid-template-columns:84px 1fr;grid-template-areas:"img info" "qty price";
    gap:14px;align-items:start;position:relative;padding:18px}
  .cartline__img{grid-area:img;width:84px;height:84px;border-radius:10px;margin:0}
  .cartline > div:not(.qty){grid-area:info;width:auto;min-width:0}
  .cartline .qty{grid-area:qty;margin:0;justify-self:start;align-self:center}
  .cartline__price{grid-area:price;margin:0;font-size:20px;justify-self:end;align-self:center;display:flex;align-items:center}
  .cartline__remove{position:absolute;top:8px;right:8px;margin:0;width:40px;height:40px}
}
.summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px}
.summary h2{font-size:18px;color:var(--blue);font-weight:700;margin-bottom:16px}
.summary__row{display:flex;justify-content:space-between;font-size:13.5px;color:#52585f;padding:7px 0}
.summary__row .free{color:#2e7d32;font-weight:700}
.summary__total{border-top:1.5px solid var(--line);margin-top:8px;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline}
.summary__total b{font-size:15px;color:var(--text)}
.summary__total strong{font-size:24px;font-weight:800;color:var(--orange)}
.summary .btn-primary{width:100%;margin-top:18px}
/* #5 Betaalmethode-logo's (iDEAL/Bancontact e.d.) direct onder "Bestellen & betalen" */
.summary__pay{display:flex;justify-content:center;margin-top:14px}
/* Losse betaalmethode-logo's (iDEAL / Mollie / Wero) — vervangt de oude composiet-PNG met PostNL.
   Compacte, uniforme hoogte overal; de .pay-logos-scope (0,2,0) wint van de generieke
   .badge--logo img-regel (0,1,1) in de footer. */
.pay-logos{display:inline-flex;align-items:center;gap:10px}
.pay-logos .pay-logos__i{height:16px;width:auto;display:block}
.summary__note{text-align:center;font-size:12px;margin-top:12px}
.summary__note a{color:var(--blue);text-decoration:underline}
/* #16 Trustpilot-score bij "Naar de kassa" — social proof op het beslismoment */
.summary__trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;text-decoration:none}
.summary__trust .tp-stars i{width:16px;height:16px;font-size:10px}
.summary__trust-txt{font-size:12.5px;color:var(--text);font-weight:600}
.summary__trust-txt strong{font-weight:800}
.summary__trust:hover .summary__trust-txt{text-decoration:underline}
.summary__usps{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.summary__usps span{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#52585f}

/* ============ CHECKOUT ============ */
.steps{display:flex;gap:26px;margin:4px 0 26px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--muted)}
.step i{width:26px;height:26px;border-radius:50%;background:#cfd4da;color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.step--active{color:var(--blue)}
.step--active i{background:var(--orange)}
/* klikbare stappen: heen-en-weer springen tussen gegevens en betalen */
a.step{text-decoration:none;cursor:pointer;transition:color .15s ease}
a.step:hover{color:var(--orange)}
.step.is-current{font-weight:800}
.step.is-current i{box-shadow:0 0 0 3px #fdece4}
.checkout-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start;padding-bottom:50px}
/* Checkout: de rechterkolom (overzicht + bestelknop) scrolde op desktop mee (position:sticky),
   waardoor "Bestellen & betalen" altijd in beeld stond — ook vóór het invullen. Op besluit van
   David (05-08-2026) staat de knop nu overal gewoon in de paginaflow: geen sticky en geen fixed
   op enig schermformaat. De mobiele variant was een aparte vaste balk (.cta-sticky) en is uit
   includes/designs/b/bestellen.php gehaald; die balk zelf blijft bestaan voor de
   winkelwagenpagina ("Naar de kassa"). */
.fieldset{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:18px}
.fieldset h2{font-size:17px;color:var(--blue);font-weight:700;margin-bottom:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radio{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:10px;cursor:pointer;font-size:13.5px}
.radio:hover{border-color:var(--blue)}
.radio input{accent-color:var(--orange);width:16px;height:16px;flex-shrink:0}
.radio strong{color:var(--text);font-weight:600;display:block}
.radio .sub{display:block;font-size:11.5px;color:var(--muted)}
/* #9 "Gratis"-badge op de Thuisbezorgd-optie (prominent gratis-voordeel) */
.radio__badge{display:inline-block;margin-left:7px;background:var(--green);color:#fff;font-size:11px;font-weight:700;line-height:1.6;padding:0 8px;border-radius:10px;vertical-align:middle}
.radio .badge{margin-left:auto}
.miniline{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.miniline__img{width:64px;height:50px;border-radius:6px;background-size:cover;background-position:center;flex-shrink:0}
.miniline__name{font-size:13px;font-weight:600;color:var(--blue)}
.miniline__qty{font-size:11.5px;color:var(--muted)}
.miniline__price{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--text)}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .collections{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}
  .collection,.collection--wide{grid-column:span 1}
}
@media(max-width:980px){
  .stores__grid{grid-template-columns:1fr;gap:30px}
  .stores__map{order:-1}
  .reviews{grid-template-columns:1fr}
  .trustpilot-box{margin-top:0;max-width:340px}
  .newsletter__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .contact__visual{min-height:380px;margin-top:10px}
  .footer__cols--3{grid-template-columns:repeat(2,1fr)}
  .product{flex:0 0 calc(50% - 10px)}
  .cat-layout{grid-template-columns:minmax(0,1fr)}
  .cat-main,.filters{min-width:0}
  .pdp{grid-template-columns:1fr;gap:30px}
  .about{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stores-cards{grid-template-columns:repeat(2,1fr)}
  .portal,.cart-layout,.checkout-layout{grid-template-columns:1fr}
  .buybox__title{font-size:24px}
  .buybox__price strong{font-size:30px}
  .filters__toggle{display:flex;justify-content:space-between;align-items:center;width:100%;
    background:var(--blue);color:#fff;border:0;border-radius:24px;padding:12px 22px;
    font:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:14px}
  .filters__panel{display:none}
  .filters.is-open .filters__panel{display:block}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seo__cols{grid-template-columns:1fr}
  .hero__content{padding:38px 0 0 38px}
  .hero__title{font-size:44px}
  .hero__eyebrow{font-size:19px}
  .hero__cta{margin-top:22px;padding:13px 26px;font-size:14.5px}
  .hero__image{min-height:480px}
}
@media(max-width:760px){
  .mainnav{display:none}
  /* Mobiele headerindeling: logo links · zoek+showrooms+winkelwagen rechts · hamburger uiterst rechts. */
  .header__inner{gap:0;min-height:70px;flex-wrap:wrap;position:relative;justify-content:space-between;align-items:center}
  .header .logo{position:static;transform:none;top:auto;left:auto;order:1;flex-shrink:0;margin:0}
  .header .logo img{height:38px}
  .header__icons{order:3;gap:2px;margin-left:auto}
  .hamburger{order:4;margin-left:2px}
  /* Telefoon staat op mobiel in het hamburger-menu; favorieten wel in de balk (naast zoeken). */
  .header__icons .header__icon--phone{display:none}
  .header__icon--fav{display:inline-flex}
  .search-toggle{display:inline-flex}
  .search{order:5;flex:1 0 100%;display:none;padding:6px 16px 12px}
  .search.is-expanded{display:flex}
  .search .search-results{min-width:0}
  /* Announcement-bar: alleen de Showrooms-USP links + bel/WhatsApp rechts. Balk is sticky en
     schuift weg bij scrollen omlaag, komt terug bij scrollen omhoog (body.tb-hidden via JS). */
  .topbar{position:sticky;top:0;z-index:55;transition:transform .28s ease}
  body.tb-hidden .topbar{transform:translateY(-100%)}
  .topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;overflow:visible;
    padding-top:3px;padding-bottom:3px}
  /* 07-08-2026 (David): naast "12 Showrooms" hoort ook "Laagste prijsgarantie" op mobiel
     zichtbaar te zijn — beide met icoon, titel én ondertitel, precies zoals op desktop, alleen
     kleiner. De andere twee USP's (CBW Erkend, Montage en levering) en het telefoonitem blijven
     verborgen; wil David er meer, dan is dat een keuze, geen ruimtekwestie die vanzelf oplost.

     07-08-2026, derde ronde (David): er was nog ruimte, dus een maat groter. Titel 9,5 → 11px,
     ondertitel 8 → 9px, icoon 17 → 19px (desktop is 12 / 10,5 / 20 — we zitten er nu vlak onder).

     Dat past alleen als de ruimte anders verdeeld wordt, en dáár zit de eigenlijke wijziging:
     `flex:1 1 0` is `flex:1 1 auto` geworden. Met `1 1 0` kregen beide USP's een even brede
     helft, terwijl ze het niet even breed nódig hebben: "12 Showrooms / Totaal 35.000 m2" is
     ±82px tekst, "Laagste prijsgarantie / Goedkoopste van Nederland" ±120px. De helft van de
     ruimte was voor de één te veel en voor de ander te weinig. Met `1 1 auto` start elk item op
     zijn eigen inhoudsbreedte en wordt alleen de óverschietende ruimte gelijk verdeeld — de
     brede USP krijgt dus wat de smalle niet nodig heeft.

     Ruimterekening bij 380px: 380 − 24 (containerpadding, hieronder van 22 naar 12 per kant)
     = 356; de twee icoonknoppen rechts 30 + 30 + 6 = 66, plus 2× 8px gap = 16. Blijft 274 over.
     Nodig is (19 + 7 + 82) + (19 + 7 + 120) = 108 + 146 = 254. Er is dus ±20px over: beide
     USP's staan compleet op één regel.
     Bij 360px: 360 − 24 − 66 − 16 = 254 — exact wat er nodig is, dus het is daar op de rand.
     Past het net niet, dan BREEKT "Goedkoopste van Nederland" over twee regels (afgesproken met
     David dat dat mag) en wordt er niets afgekapt. Ook dan blijft de balk binnen de 44px:
     11px titel + 2× 9px ondertitel op line-height 1,15 = ±33px, plus 6px padding.
     Onder 360px (oude toestellen, ±320px) zou zowel de titel als de ondertitel gaan breken en
     zou de balk buiten zijn 44px groeien; daar valt hij daarom terug op de vorige, kleinere
     maat — zie de media-query direct onder dit blok. */
  .topbar__item{display:none}
  /* de balk mag op mobiel dichter naar de rand dan de rest van de pagina: dat levert 20px op en
     een egaal gekleurde balk verdraagt dat visueel (de header eronder houdt zijn eigen padding) */
  .topbar .container-wide{padding:0 12px}
  .topbar__item--showroom,.topbar__item--prijs{display:flex;justify-content:center;align-items:center;gap:7px;
    flex:1 1 auto;min-width:0}
  .topbar__item--showroom img,.topbar__item--prijs img{display:block;height:19px;width:19px}
  .topbar__item--showroom strong,.topbar__item--prijs strong{font-size:11px;line-height:1.15;white-space:normal}
  .topbar__item--showroom span,.topbar__item--prijs span{display:block;font-size:9px;line-height:1.15;opacity:.9;white-space:normal}
  /* het NL-kaartje was een mobiel-only vervanging van het locatie-icoon; nu tonen we hetzelfde
     icoon als op desktop, dus die kan uit. */
  .topbar__item--showroom .topbar__map{display:none}
  .topbar__map{display:block;height:30px;aspect-ratio:438/514;flex-shrink:0;background:#fff;
    -webkit-mask:url('/includes/designs/b/assets-v3/images/map-nl.png') center/contain no-repeat;mask:url('/includes/designs/b/assets-v3/images/map-nl.png') center/contain no-repeat}
  /* iets compacter, zodat de twee USP's er compleet naast passen (zie de rekensom hierboven) */
  .topbar__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
  .topbar__act{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#fff}
  .topbar__act svg{width:21px;height:21px}
  .topbar__act--wa{color:#fff}
  /* header schuift mee onder de sticky balk; als de balk verborgen is staat de header bovenaan */
  .header{top:44px;transition:top .28s ease}   /* volgt de balkhoogte hierboven (was 40px) */
  body.tb-hidden .header{top:0}
  /* Iconen: volwaardige tap-targets (>=44px). */
  .header__icon,.header__icon--cart{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .hamburger{display:flex}
  /* Off-canvas nav-drawer */
  .navdrawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  .navdrawer-backdrop.is-open{opacity:1;pointer-events:auto}
  .navdrawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;width:84%;max-width:340px;
    background:#fff;z-index:71;transform:translateX(100%);transition:transform .28s ease;
    box-shadow:-6px 0 24px rgba(0,0,0,.18);overflow-y:auto}
  .navdrawer.is-open{transform:translateX(0)}
  .navdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 14px 18px;border-bottom:1px solid var(--line)}
  .navdrawer__title{font-weight:800;color:var(--blue);font-size:17px}
  .navdrawer__close{background:none;border:0;font-size:30px;line-height:1;color:var(--blue);cursor:pointer;width:44px;height:44px}
  .navdrawer__label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:16px 18px 6px}
  .navdrawer__nav a{display:flex;align-items:center;gap:11px;padding:13px 18px;color:var(--blue);font-weight:600;font-size:15px;
    text-decoration:none;border-bottom:1px solid var(--line)}
  .navdrawer__nav a:hover{background:var(--blue-tint)}
  .navdrawer__nav--info a{font-weight:500}
  /* Inklapbare "Over A-meubel" dropdown in de drawer */
  .navdrawer__acc{display:flex;align-items:center;justify-content:space-between;width:100%;gap:11px;
    padding:13px 18px;color:var(--blue);font-weight:500;font-size:15px;background:none;border:0;
    border-bottom:1px solid var(--line);cursor:pointer;text-align:left;font-family:inherit}
  .navdrawer__acc:hover{background:var(--blue-tint)}
  .navdrawer__acc-chev{flex-shrink:0;transition:transform .25s ease}
  .navdrawer__acc[aria-expanded="true"] .navdrawer__acc-chev{transform:rotate(180deg)}
  /* "Over A-meubel" als uitschuif-subpaneel: schuift van rechts over de drawer (drill-down),
     met "Terug"-knop. Prettiger voor lange lijsten dan inklappen. */
  .navdrawer__sub{position:fixed;top:0;bottom:0;right:0;width:84%;max-width:340px;background:#fff;z-index:72;
    display:flex;flex-direction:column;overflow-y:auto;transform:translateX(100%);visibility:hidden;
    box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:transform .28s ease,visibility 0s linear .28s}
  .navdrawer__sub.is-open{transform:translateX(0);visibility:visible;transition:transform .28s ease}
  .navdrawer__back{display:flex;align-items:center;gap:8px;width:100%;padding:14px 8px 14px 14px;background:none;
    border:0;border-bottom:1px solid var(--line);color:var(--blue);font-weight:700;font-size:16px;cursor:pointer;
    text-align:left;font-family:inherit}
  .navdrawer__back:hover{background:var(--blue-tint)}
  .navdrawer__sub a{padding:14px 18px;font-size:15px;font-weight:500}
  .navdrawer__sub a:last-child{border-bottom:1px solid var(--line)}
  .navdrawer__ico{width:22px;height:22px;flex-shrink:0;background-color:var(--orange);
    -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
  /* Sticky header inklappen tijdens scrollen → meer schermruimte. */
  .header.is-scrolled .header__inner{min-height:56px}
  .header.is-scrolled .logo img{height:32px;transition:height .2s ease}
  /* Hero strak tegen de header (geen top-padding) + geen grijze scheidingslijn onder de header */
  .hero{padding-top:0}
  .header{border-bottom:0}
  /* Lichte mobiele hero-afbeelding (~61KB webp / ~91KB jpg) i.p.v. de desktop-bron. */
  .hero__media{background-image:url('/includes/designs/b/assets-v3/images/Background Hero-mobile.jpg') !important}
  .hero__media{background-image:-webkit-image-set(url('/includes/designs/b/assets-v3/images/Background Hero-mobile.webp') type('image/webp'), url('/includes/designs/b/assets-v3/images/Background Hero-mobile.jpg') type('image/jpeg')) !important}
  .hero__media{background-image:image-set(url('/includes/designs/b/assets-v3/images/Background Hero-mobile.webp') type('image/webp'), url('/includes/designs/b/assets-v3/images/Background Hero-mobile.jpg') type('image/jpeg')) !important}
  /* Titel + USP's als één groep, dicht bij elkaar, verticaal gecentreerd in het midden van de afbeelding. */
  .hero__image{min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:26px 22px}
  .hero__content{position:static;top:auto;bottom:auto;transform:none;padding:0;max-width:100%}
  .hero__eyebrow{font-size:15px;margin-bottom:10px}
  .hero__title{font-size:26px}
  .hero__image::before{background:linear-gradient(0deg,rgba(8,18,33,.6) 0%,rgba(8,18,33,.35) 100%)}
  .hero__usps{position:static;bottom:auto;background:none;margin-top:16px;padding:0;
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:1fr 1fr;gap:8px 16px}
  .hero__usps span{font-size:11.5px;white-space:normal;text-shadow:0 1px 3px rgba(0,0,0,.55)}
  .hero__usps span:nth-child(7){display:none}
  .collections{grid-template-columns:1fr;grid-auto-rows:170px}
  .footer__top{flex-direction:column}
  .footer__social-wrap{text-align:left}
  .footer__social{justify-content:flex-start}
  .footer__cols--3,.footer__cols--2{grid-template-columns:1fr 1fr}
  .section__title,.stores__title{font-size:22px}
}
/* Vangnet onder de 360px die David als ondergrens noemde (iPhone SE en ouder, ±320px). Daar is
   er te weinig ruimte voor de grotere maat hierboven: dan zou naast de ondertitel ook de TITEL
   gaan breken, en met vier tekstregels groeit de balk buiten de 44px waar de sticky header op
   staat afgesteld (.header{top:44px}). Vandaar hier de vorige, compactere maat terug — nog
   steeds compleet met icoon, titel en ondertitel, alleen een tandje kleiner. */
@media(max-width:359px){
  .topbar__item--showroom img,.topbar__item--prijs img{height:17px;width:17px}
  .topbar__item--showroom strong,.topbar__item--prijs strong{font-size:9.5px}
  .topbar__item--showroom span,.topbar__item--prijs span{font-size:8px}
}
@media(max-width:480px){
  .product{flex:0 0 82%}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .products-grid .product{flex:none;padding:10px}
  /* compacte kaart-info op mobiel (2 koloms): alleen de tussenruimtes strakker, lettergroottes blijven */
  .products-grid:not(.wishlist-grid):not(.products-grid--portrait) .product__media{margin:-10px -10px 8px}
  .products-grid .product__cat{margin-bottom:2px}
  /* reserveer 2 regels titelhoogte zodat prijs + opstellingen/kleuren op gelijke hoogte
     uitlijnen tussen kaarten met 1- en 2-regelige titels */
  .products-grid .product__name{margin-bottom:4px;line-height:1.25;min-height:2.5em}
  .products-grid .product__express{margin:-2px 0 6px}
  .products-grid .product__meta{margin-top:5px;gap:10px}
  .toolbar{flex-direction:column;align-items:flex-start}
  .stores-cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
  .footer__cols--3,.footer__cols--2{grid-template-columns:1fr}
  .newsletter__row{flex-direction:column;align-items:stretch}
}

/* ============================================================
   B v3 — functionele toevoeging (NIET uit het ontwerp):
   zoek-suggesties met vanaf-prijs (#searchResults), gerenderd door
   B's eigen main.js (sr__*-markup) op de site-brede autocomplete-API.
   ============================================================ */
/* overflow:visible — de pil (regel ~63) heeft overflow:hidden, maar dat clipte de
   absolute dropdown volledig weg; de pilvorm komt van border-radius+background op
   .search zelf (input/knop zijn transparant), dus visible kan veilig. */
.search{position:relative;overflow:visible}
.search .search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:340px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(16,42,67,.16);z-index:60;
  max-height:440px;overflow:auto;display:none;padding:6px 0;text-align:left}
.search .search-results.is-open{display:block}
.search-results .sr__item{display:flex;align-items:center;gap:11px;padding:8px 16px;
  font-size:13.5px;color:var(--text);text-decoration:none}
.search-results .sr__item:hover,.search-results .sr__item.is-sel{background:var(--blue-tint)}
.sr__thumb{flex:0 0 44px;width:44px;height:44px;border-radius:9px;background:#f1f4f7;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.sr__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sr__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sr__price{flex-shrink:0;white-space:nowrap}
.sr__price b{font-size:14px;font-weight:700;color:var(--orange)}
.sr__none{padding:14px 16px;font-size:13px;color:#626e7b}
.search-results .sr__all{display:block;margin:6px 0 0;padding:11px 16px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;text-align:center}
.search-results .sr__all:hover,.search-results .sr__all.is-sel{background:var(--blue-tint)}

/* ============================================================
   B v3 — Productconfigurator "Stel je bank samen"
   (compacte buybox-kaart + popup met stappen + dynamische prijs)
   ============================================================ */

/* --- buybox basis: voorkom overflow van de rechterkolom --- */
.pdp{min-width:0}
.buybox{min-width:0}
.buybox *{max-width:100%}

/* zelfde look als de Trustpilot-widget in de Reviews-tab: globale .tp-*-stijlen
   (groene sterrenblokjes), geen verkleinende overrides meer */
.buybox__rating{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  text-decoration:none;color:inherit;width:fit-content}
a.buybox__rating:hover .tp-name{text-decoration:underline}

.buybox__counts{display:flex;gap:22px;color:var(--muted);font-size:13px;margin:6px 0 14px}
.buybox__counts strong{color:inherit} /* nummers bold, zelfde grijs als de tekst */

.buybox__usps{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.buybox__usps span{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:700} /* 2026-07-23 (David): alle PDP-USP's vet */
/* groene checkmark zonder cirkel (zelfde groen als de Trustpilot-sterren) */
.buybox__usps .check{flex:0 0 auto;width:16px;height:16px;margin-top:2px;position:relative}
.buybox__usps .check::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:10px;border:solid var(--green);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* --- config-kaart --- */
.buybox__config{border:1px solid var(--line);border-radius:14px;padding:18px;background:#f5f6f7}
.cfg-block{margin-bottom:16px}
.cfg-block__label{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}
/* "Stel je bank samen" = titel (geen knop meer) */
.cfg-title{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 14px;
  color:var(--blue);font-weight:800;font-size:17px}
.cfg-title svg{color:var(--orange)}

/* keuze-stappen (1. opstelling + 2. stof/kleur) */
.cfg-picks{display:grid;grid-template-columns:1fr;gap:10px}
.cfg-pick{display:flex;align-items:center;gap:10px;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:left;min-width:0;transition:border-color .15s,box-shadow .15s,background .15s}
/* 2026-07-21 (David desktop-4): "Wijzig"-chip op gevulde configurator-stappen */
.cfg-pick__change{margin-left:auto;flex:0 0 auto;color:var(--orange);border:1px solid var(--orange);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700;white-space:nowrap;transition:background .15s,color .15s}
.cfg-pick:hover .cfg-pick__change{background:var(--orange);color:#fff}
.cfg-pick:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(20,40,70,.07)}
.cfg-pick__media{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:8px;background-size:cover;background-position:center;background-color:#eef2f6;border:1px solid var(--line)}
.cfg-pick__body{display:flex;flex-direction:column;min-width:0}
.cfg-pick__label{font-size:11px;color:var(--text);font-weight:800;line-height:1.25;text-transform:uppercase;letter-spacing:.4px}
.cfg-pick__value{font-size:13px;font-weight:700;color:var(--blue);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-pick__sub{font-size:11px;color:var(--muted);font-weight:600;line-height:1.25;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* nog te kiezen stof/kleur = oranje gemarkeerd */
.cfg-pick.is-required{border-color:var(--orange);background:#fff7f2}
.cfg-pick.is-required .cfg-pick__value{color:var(--orange)}
.cfg-pick.is-required .cfg-pick__media{background-color:#ffe9dd;border-style:dashed}
/* Zoom-on-hover van de configurator-previewbeelden (alleen Opstelling + Stof & kleur). */
.cfg-pick__media--photo::after{content:"";position:absolute;bottom:calc(100% + 10px);left:0;
  width:400px;height:400px;max-width:90vw;background-image:inherit;background-size:contain;
  background-position:center;background-repeat:no-repeat;background-color:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.22);opacity:0;pointer-events:none;
  transform:scale(.8);transform-origin:bottom left;transition:opacity .15s ease,transform .15s ease;z-index:60}
.cfg-pick__media--photo:hover::after{opacity:1;transform:scale(1)}

/* Extra productopties (Poten / Kies een optie / Meerprijs …): dropdowns in B-stijl */
.cfg-options{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.cfg-option{display:flex;flex-direction:column;gap:5px}
.cfg-option__label{font-size:12.5px;font-weight:700;color:var(--blue)}
.cfg-option__label em{color:var(--orange);font-style:normal}
.cfg-option__field{position:relative}
.cfg-option__field::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cfg-option__select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--text);
  padding:11px 38px 11px 14px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.cfg-option__select:hover{border-color:var(--blue)}
.cfg-option__select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,40,70,.08)}
.cfg-option__select.is-required{border-color:var(--orange);background:#fff7f2}

/* add-to-cart geblokkeerd tot stof/kleur gekozen is + verplicht-melding */
.btn-cart:disabled,.btn-cart[disabled]{background:#cdd6df;cursor:not-allowed;box-shadow:none}
.btn-cart:disabled:hover,.btn-cart[disabled]:hover{background:#cdd6df}
/* #4 Vergrendeld (stof/kleur nog niet gekozen): duidelijke disabled-look, maar klikbaar
   (klik scrollt naar stap 2). Zelfde grijs als de echte disabled-staat. */
.btn-cart[data-locked]{background:#cdd6df;box-shadow:none}
.btn-cart[data-locked]:hover{background:#b9c4cf}
.pdp-sticky__btn.is-locked{background:#cdd6df}
.pdp-sticky__btn.is-locked:hover{background:#b9c4cf}
.cfg-reqhint{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--orange);text-align:center}
.cfg-reqhint[hidden]{display:none}

.cfg-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.cfg-swatches .swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--line);cursor:pointer;padding:0}
.cfg-swatches .swatch--active{outline:2px solid var(--orange);outline-offset:1px}
.cfg-more{background:none;border:0;color:var(--blue);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;padding:4px}
.cfg-chosen{font-size:12.5px;color:var(--muted);margin-top:9px}
.cfg-chosen strong{color:var(--text)}

.buybox__actions{display:flex;align-items:stretch;gap:12px;margin-top:16px}
.btn-fav{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.btn-fav:hover{color:var(--fav-red);border-color:var(--fav-red)}
.btn-fav.is-fav{color:var(--fav-red);border-color:var(--fav-red)}
/* Tegel-variant: hartje als overlay LINKSBOVEN op .product__media (rechtsboven zit de prijs-badge). (2026-07-15) */
.btn-fav--tile{position:absolute;top:8px;left:8px;z-index:3;width:38px;height:38px;box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* ============================================================
   B v3 — favoriet-hartje: rode vulling + zoom-pop bij toevoegen.
   favorites.js zet .is-fav op het hartje na een geslaagde toggle;
   de pop-animatie (.fav-pop) wordt door main.js bij de klik gezet.
   --fav-red staat in :root. ============================================================ */
.js-fav-heart svg{transition:fill .15s,stroke .15s}
.js-fav-heart.is-fav svg{fill:var(--fav-red);stroke:var(--fav-red)}
@keyframes favPop{0%{transform:scale(1)}35%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.fav-pop svg{animation:favPop .42s ease}

.buybox__showroom{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;padding:14px;
  border:1.5px solid rgba(0,101,179,.45);border-radius:30px;background:#fff;color:var(--blue);font-weight:600;font-size:14px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.buybox__showroom:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* --- popup --- */
.cfg-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.cfg-modal[hidden]{display:none}
.cfg-modal__backdrop{position:absolute;inset:0;background:rgba(20,40,70,.55)}
.cfg-modal__dialog{position:relative;z-index:1;width:100%;max-width:560px;max-height:90vh;background:#fff;border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.cfg-modal__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;flex-shrink:0;background:#fff;z-index:3}
.cfg-modal__actions{display:flex;align-items:center;gap:10px}
.cfg-modal__icon{width:40px;height:40px;border:1.5px solid #d9e3ee;border-radius:50%;background:#fff;color:var(--blue);
  display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.cfg-modal__icon:hover{border-color:var(--blue)}
.cfg-modal__icon.js-fav-heart.is-fav{color:var(--fav-red);border-color:var(--fav-red)}
.cfg-modal__scroll{overflow-y:auto;padding:0 24px 18px}
.cfg-modal__hero{height:190px;margin:0 -24px;background-size:cover;background-position:center;background-color:var(--gray-bg)}
.cfg-modal__head{padding-top:16px}
.cfg-modal__title{font-size:20px;font-weight:800;color:var(--blue)}
.cfg-modal__sub{font-size:13px;color:var(--muted);margin-top:2px}
.cfg-modal__heading{font-size:22px;font-weight:800;color:var(--blue);margin:16px 0 14px}

.cfg-step{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.cfg-step__head{width:100%;display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border:0;cursor:pointer;text-align:left}
.cfg-step__ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fdece4;color:var(--orange);display:grid;place-items:center}
.cfg-step__title{flex:1;font-size:15px;font-weight:700;color:var(--blue)}
.cfg-step__title em{display:block;font-style:normal;font-weight:500;font-size:12.5px;color:var(--muted)}
.cfg-step__chev{color:var(--muted);transition:transform .2s}
.cfg-step.is-open .cfg-step__chev{transform:rotate(180deg)}
.cfg-step.is-done .cfg-step__ico{background:var(--green);color:#fff}
.cfg-step.is-done .cfg-step__ico svg{display:none}
.cfg-step.is-done .cfg-step__ico::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px}
.cfg-step__body{display:none;padding:0 16px 18px}
.cfg-step.is-open .cfg-step__body{display:block}
.cfg-step__sub{font-size:14px;font-weight:700;color:var(--blue);margin:4px 0 12px}

.cfg-opstellingen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cfg-opst-card{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px}
.cfg-opst-card.is-active{border-color:var(--orange);box-shadow:0 0 0 3px #fdece4}
.cfg-opst-card__diagram{position:relative;height:92px;border-radius:8px;background:#eef2f6;
  display:flex;align-items:center;justify-content:center;padding:16px 12px 10px 22px;margin-bottom:6px}
.cfg-opst-card__svg{max-height:60px;max-width:100%;width:auto;height:auto;color:var(--blue)}
.cfg-opst-card__bcm{position:absolute;top:3px;left:22px;right:8px;text-align:center;font-size:9.5px;color:#626e7b;letter-spacing:.3px}
.cfg-opst-card__dcm{position:absolute;left:5px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:9.5px;color:#626e7b;letter-spacing:.3px}
.cfg-opst-card.is-active .cfg-opst-card__diagram{background:#fdece4}
.cfg-opst-card.is-active .cfg-opst-card__svg{color:var(--orange)}
.cfg-opst-card__name{font-size:14px;font-weight:700;color:var(--blue)}
.cfg-opst-card__dims{font-size:12px;color:var(--muted)}
.cfg-opst-card__price{font-size:15px;font-weight:800;color:var(--orange)}

.cfg-field__label{display:block;font-size:13px;font-weight:700;color:var(--text);margin:6px 0 8px}
.cfg-select{position:relative;margin-bottom:16px}
.cfg-select select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;appearance:none;background:#fff}
.cfg-select::after{content:"⌄";position:absolute;right:14px;top:9px;color:var(--muted);pointer-events:none}
.cfg-colours{display:flex;flex-wrap:wrap;gap:14px}
.cfg-colour{position:relative;border:0;background:none;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px}
/* vierkant met afgeronde hoeken, zelfde stijl als .cfg-pick__media op de productpagina */
.cfg-colour__dot{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);transition:transform .18s ease}
.cfg-colour.is-active .cfg-colour__dot{outline:2px solid var(--orange);outline-offset:2px}
/* hover = stof vergroten (180px-bronthumb, dus scherp op 2×) en boven de buren tillen */
.cfg-colour:hover{z-index:5}
.cfg-colour:hover .cfg-colour__dot{transform:scale(2);box-shadow:0 6px 18px rgba(16,42,67,.28)}
.cfg-colour__plus{font-size:10.5px;color:var(--muted)}

/* ---- stofcollecties in de kleur-stap: kop + eerste 6 kleuren + "overige" ---- */
.cfg-coll{padding:16px 0;border-bottom:1px solid var(--line)}
.cfg-coll:first-child{padding-top:4px}
.cfg-coll:last-child{border-bottom:0;padding-bottom:4px}
.cfg-coll__head{display:flex;flex-direction:column;gap:1px;margin-bottom:12px;line-height:1.35}
.cfg-coll__name{font-size:14px;font-weight:700;color:var(--blue)}
.cfg-coll__count{font-size:12.5px;color:var(--muted)}
.cfg-coll__price{font-size:14px;margin-top:2px}
.cfg-coll__price s{font-size:12.5px;color:#697886;margin-right:6px}
.cfg-coll__price b{font-weight:800;color:var(--text)}
.cfg-colour--extra{display:none}
.cfg-coll.is-expanded .cfg-colour--extra{display:flex}
.cfg-coll__more{margin-top:12px;border:0;border-radius:8px;background:var(--blue);color:#fff;
  font:inherit;font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer}
.cfg-coll__more:hover{background:#16407a}

.cfg-modal__foot{display:flex;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--line);background:#fff}
.cfg-total{display:flex;flex-direction:column;line-height:1.1}
.cfg-total span{font-size:11px;color:var(--muted)}
.cfg-total strong{font-size:20px;font-weight:800;color:var(--blue)}
.cfg-cta{flex:1;padding:15px;border:0;border-radius:30px;background:var(--orange);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.cfg-cta:hover{background:var(--orange-dark)}
/* secundaire variant: "Bekijk het product" naast de winkelwagen-CTA (laatste stap) */
.cfg-cta--view{background:#fff;color:var(--blue);border:2px solid var(--blue);padding:13px 15px}
.cfg-cta--view:hover{background:var(--blue-tint)}
.cfg-cta--view[hidden]{display:none}

@media (max-width:600px){
  .cfg-modal{padding:0}
  .cfg-modal__dialog{max-width:none;max-height:100vh;height:100vh;border-radius:0}
}

/* ============================================================
   B v3 — FIX: PDP-grid stabiel houden ongeacht aantal foto-thumbs.
   Grid-items hebben standaard min-width:auto → een brede, niet-afbrekende
   thumbnailrij dwong de fotokolom breed en perste de buybox smal (per
   product verschillend = aantal foto's). Items mogen nu krimpen + thumbs wrappen.
   ============================================================ */
.pdp > *{min-width:0}
.gallery{min-width:0}
.gallery__thumbs{flex-wrap:wrap}

/* ============================================================
   B v3 — Product-tabs
   Tab-sectie onder de .pdp (Product informatie / Stel uw vraag /
   Bel mij terug). Eigen v3-markup, gebruikt de bestaande
   designvariabelen (--blue/--orange/--muted/--line).
   ============================================================ */
.ptabs{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.ptabs__nav{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);background:var(--gray-bg)}
.ptabs__tab{appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--muted);
  padding:15px 24px;transition:color .15s,background .15s,border-color .15s}
.ptabs__tab:hover{color:var(--blue)}
.ptabs__tab.is-active{color:var(--blue);background:#fff;border-bottom-color:var(--orange)}
.ptabs__panel{display:none;padding:28px}
.ptabs__panel.is-active{display:block}
/* Mobiel: tabs als nette, gelijke 2-koloms grid i.p.v. ongelijk wrappende rij */
@media(max-width:760px){
  .ptabs__nav{display:grid;grid-template-columns:1fr 1fr}
  .ptabs__tab{padding:13px 10px;font-size:13px;text-align:center;border-bottom:1px solid var(--line)}
  .ptabs__tab:nth-child(odd){border-right:1px solid var(--line)}
  .ptabs__tab.is-active{border-bottom-color:var(--line);box-shadow:inset 0 -3px 0 var(--orange)}
  .ptabs__panel{padding:20px 16px}
}
.ptabs__heading{font-size:18px;font-weight:700;color:var(--blue);margin-bottom:14px}

/* twee kolommen: spec links, omschrijving rechts */
.ptabs__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:900px){.ptabs__cols{grid-template-columns:1fr;gap:28px}}

/* LINKS: specificatielijst */
.ptabs__speclist{margin:0}
.ptabs__specrow{display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ptabs__specrow:last-child{border-bottom:0}
.ptabs__specrow dt{color:var(--muted);font-weight:500}
.ptabs__specrow dd{color:var(--text);font-weight:600;text-align:right}

/* RECHTS: omschrijving */
.ptabs__desc{font-size:14px;color:#555;line-height:1.65}
.ptabs__desc h1,.ptabs__desc h2,.ptabs__desc h3,.ptabs__desc h4{color:var(--blue);margin:14px 0 8px}
.ptabs__desc .ptabs__heading{margin-top:0}
.ptabs__desc p{margin-bottom:10px}
.ptabs__desc a{color:var(--blue)}
.ptabs__desc ul,.ptabs__desc ol{margin:0 0 10px 18px}
.ptabs__levertijd{font-size:13px;color:var(--text);background:var(--blue-tint);
  border-radius:8px;padding:12px 16px;margin-top:8px}
.ptabs__letop{font-size:13px;color:var(--text);background:#fff7e6;border-left:3px solid var(--orange);
  border-radius:6px;padding:11px 14px;margin:18px 0 0;line-height:1.5}
.ptabs__letop strong{color:var(--orange)}
/* Mobiele sticky koopbalk (PDP) — alleen op mobiel en pas als de echte koopknop uit beeld is. */
.pdp-sticky{display:none}
@media(max-width:760px){
  .pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:14px;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.12);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .pdp-sticky.is-shown{display:flex}
  .pdp-sticky__info{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
  .pdp-sticky__old{display:none} /* 2026-07-21 (David mobiel-4): doorgestreepte vanaf-prijs uit de sticky add-to-cart */
  .pdp-sticky__price{font-size:20px;font-weight:800;color:var(--blue)}
  .pdp-sticky__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--orange);color:#fff;border:0;border-radius:26px;padding:14px 18px;font-size:15px;font-weight:700;
    cursor:pointer;min-height:48px}
  .pdp-sticky__btn:hover{background:var(--orange-dark)}
}
/* Mobiele sticky CTA-balk (winkelwagen + checkout) — pas zichtbaar als de echte knop uit beeld is. */
.cta-sticky{display:none}
@media(max-width:760px){
  .cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:14px;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.12);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .cta-sticky.is-shown{display:flex}
  .cta-sticky__info{display:flex;flex-direction:column;line-height:1.15;flex-shrink:0}
  .cta-sticky__info span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
  .cta-sticky__info strong{font-size:20px;font-weight:800;color:var(--blue)}
  .cta-sticky__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--orange);color:#fff;border:0;border-radius:26px;padding:14px 18px;font-size:15px;font-weight:700;
    cursor:pointer;min-height:48px;text-decoration:none}
  .cta-sticky__btn:hover{background:var(--orange-dark);color:#fff}
  /* iOS zoomt niet meer in bij focus zodra invoervelden >=16px zijn. */
  .search input,.field input,.field select,.ptabs__form textarea,.fav-note textarea,.cfg-select select{font-size:16px}
  /* Categorie-pill-slider onder de header is op mobiel overbodig (categorieën staan in het
     hamburger-menu) → verbergen. De homepage-variant (catpills--home, 2-koloms knoppen) blijft. */
  .catpills:not(.catpills--home){display:none}
  /* PDP: thumbnails als horizontale slider i.p.v. gestapeld/omgebroken. */
  .gallery__thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gallery__thumbs::-webkit-scrollbar{display:none}
  .gallery__thumbs .thumb{flex-shrink:0}
  /* PDP: blauwe USP-box uit de galerij-kolom verbergen, de kopie onderaan (boven 'Anderen bekeken ook') tonen. */
  .pdp-usps--gallery{display:none}
  .pdp-usps--belowtabs{display:flex;margin-bottom:30px}
  /* Homepage: Trustpilot uit de hero, als balk boven de categorie-knoppen; knoppen als 2-koloms grid. */
  .hero__rating{display:none}
  .catpills--home .catpills__inner{flex-direction:column;align-items:stretch;gap:16px}
  .catpills--home .tp-bar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px}
  .catpills--home .tp-bar .trustpilot-widget{flex:0 0 auto;height:28px;display:flex;align-items:center}
  .catpills--home .tp-bar__reviews{flex-shrink:0;display:inline-flex;align-items:center;height:28px;
    font-size:13px;line-height:1;white-space:nowrap}
  .catpills--home .catpills__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible}
  .catpills--home .catpills__row .pill-wrap{display:block}
  /* 2026-07-30 (David): knoppen links uitgelijnd — icoon in een vast 26px-vak vooraan,
     naam ernaast; zo staan alle iconen én alle labels op dezelfde x in beide kolommen
     (gecentreerd begon elke naam ergens anders door de wisselende icoonbreedtes). */
  .catpills--home .pill{justify-content:flex-start;width:100%;padding:16px 18px;font-size:15px;border-radius:16px}
  .catpills--home .pill--wide,.catpills--home .pill-wrap--wide{grid-column:1 / -1}
  /* uitzondering (David): de brede outlet-knop over de volle breedte juist wél centreren */
  .catpills--home .pill--wide{justify-content:center}
  /* geen hover op mobiel → flyout verbergen (categorieën staan in het hamburger-menu) */
  .catpills--home .pill-menu{display:none !important}
  .catpills--home .pill__ico{height:20px;width:26px;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1)}
}
.ptabs__spec .ptabs__video{margin-top:18px}

/* YouTube 16:9 responsive */
.ptabs__video{position:relative;width:100%;padding-top:56.25%;margin-top:16px;
  border-radius:10px;overflow:hidden;background:#000}
.ptabs__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* formulieren in de tabs */
.ptabs__form{max-width:640px}
.ptabs__intro{font-size:14px;color:#555;margin-bottom:16px}
.ptabs__radios{display:flex;gap:24px}
.ptabs__radios label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:500;color:var(--text);margin:0}
.ptabs__radios input{width:auto;margin:0}
.ptabs__form .field em{color:var(--orange);font-style:normal}
.ptabs__form textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;
  padding:11px 18px;font:inherit;font-size:13px;outline:none;background:#fff;resize:vertical}
.ptabs__form textarea:focus{border-color:var(--blue)}
.ptabs__alert{border-radius:10px;padding:14px 18px;margin-bottom:18px;font-size:13.5px}
.ptabs__alert ul{margin:6px 0 0 18px}
.ptabs__alert--error{background:#fdecea;border:1px solid #f5c2c0;color:#b3261e}
.ptabs__alert--ok{background:#e7f6ef;border:1px solid #b6e3cd;color:#0b7a4f}

/* ---- nieuwe tabs (afmetingen / garantie / onderhoud / reviews / showrooms) ---- */
.ptabs__note{font-size:13px;color:var(--text);background:var(--blue-tint);
  border-radius:10px;padding:10px 14px;margin:16px 0 14px}
.ptabs__checks{list-style:none;margin:0;padding:0;font-size:14px;color:#555;line-height:1.6}
.ptabs__checks li{position:relative;padding-left:26px;margin-bottom:12px}
.ptabs__checks li::before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;
  border-radius:50%;background:var(--blue-tint);color:var(--blue);font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.ptabs__checks li strong{color:var(--text)}
.ptabs__checks a{color:var(--blue);font-weight:600}
.ptabs__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:760px){.ptabs__cards{grid-template-columns:1fr}}
.ptabs__card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--gray-bg)}
.ptabs__card h4{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:8px}
.ptabs__card p{font-size:13.5px;color:#555;line-height:1.6;margin:0}
.ptabs__card .ptabs__checks{font-size:13.5px}
.ptabs__card .ptabs__checks li{margin-bottom:8px}
.ptabs__card .ptabs__checks li:last-child{margin-bottom:0}
.ptabs__review{max-width:560px}
.ptabs__review p{font-size:14px;color:#555;line-height:1.65;margin:14px 0 18px}
.ptabs__review-score{display:flex;align-items:center;gap:10px}
.ptabs__srgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media (max-width:980px){.ptabs__srgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ptabs__srgrid{grid-template-columns:1fr}}
.ptabs__srcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;cursor:pointer}
.ptabs__srcard.is-here{border-color:var(--blue);background:var(--blue-tint)}
.ptabs__srcard h4{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:6px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ptabs__srcard p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 6px}
.ptabs__srcard p:last-child{margin-bottom:0}
.ptabs__srtag{font-size:11px;font-weight:700;color:#0b7a4f;background:#e7f6ef;
  border-radius:99px;padding:3px 9px;white-space:nowrap}
.ptabs__srlinks a{color:var(--blue);font-weight:600;text-decoration:none}
.ptabs__srlinks a:hover{text-decoration:underline}

/* ============================================================
   B v3 — verberg ALLE doorgestreepte "oude" prijzen (op verzoek 2026-06-11).
   Alleen binnen prijs-contexten, zodat een <s> in een CMS-omschrijving blijft.
   ============================================================ */
.product__price s,
.buybox__price s,
.cartline__price s,
.miniline__price s,
.summary__row s,
.cfg-total s{display:none!important}

/* ============================================================
   B v3 — stof-foto swatches (echte /materials/-thumbnails i.p.v. hex-bolletjes)
   ============================================================ */
.cfg-swatches .swatch--photo{background-size:cover;background-position:center}
.cfg-colour__dot--photo{background-size:cover;background-position:center}

/* ============================================================
   B v3 — configurator stap "Type" (visuele shape-kaarten)
   ============================================================ */
.cfg-types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cfg-type{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--blue);
  font-size:13px;font-weight:700;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cfg-type:hover{border-color:var(--blue)}
.cfg-type.is-active{border-color:var(--orange);box-shadow:0 0 0 3px #fdece4}
.cfg-type__shape{width:100%;height:56px;border-radius:8px;background:#eef2f6;color:var(--blue);
  display:flex;align-items:center;justify-content:center}
.cfg-type.is-active .cfg-type__shape{background:#fdece4;color:var(--orange)}
.cfg-type__shape svg{width:60px;height:auto;display:block}
.cfg-type__label{line-height:1.2;text-align:center}
@media (max-width:600px){.cfg-types{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   B v3 — Showroom-popup ("Bekijk deze bank in de showroom")
   ============================================================ */
.sr-head{padding-top:6px}
.sr-sub{font-size:14px;color:var(--text);line-height:1.5;margin-top:8px}
.sr-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;margin-right:6px;vertical-align:middle}
.sr-badge--yes{background:#e3f5ec;color:#007e55}
.sr-map{margin:16px 0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.sr-map iframe{display:block;width:100%;height:240px;border:0}
.sr-nearest__hint{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.sr-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px}
.sr-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sr-card__name{font-size:15px;font-weight:700;color:var(--blue)}
/* Outlet-badge op de vestigingskaart (07-08-2026, migratie 0017). Sluit aan bij .badge maar
   dan kleiner en inline achter de naam: opvallend genoeg om te zien, klein genoeg om de
   andere vestigingen niet te verdringen. */
.sr-card__badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:4px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;line-height:1.5;vertical-align:middle;letter-spacing:.2px;white-space:nowrap}
/* 07-08: tekst werd "XXL outlet aanwezig" — iets langer. nowrap houdt hem als één geheel
   (hij wipt dan netjes naar de volgende regel i.p.v. midden in de tekst te breken), en op
   smalle schermen een maatje kleiner zodat hij naast de naam blijft passen. */
@media (max-width:480px){ .sr-card__badge{font-size:10px;padding:1px 6px;margin-left:4px} }
.sr-card__addr{font-size:12.5px;color:var(--muted)}
.sr-card__dist{font-size:12.5px;color:var(--orange);font-weight:600}
.sr-card__links{display:flex;gap:8px;flex-shrink:0}
.sr-card__route,.sr-card__call{padding:8px 14px;border-radius:22px;font-size:13px;font-weight:700;white-space:nowrap}
.sr-card__route{background:var(--orange);color:#fff}
.sr-card__route:hover{background:var(--orange-dark)}
.sr-card__call{border:1.5px solid var(--line);color:var(--blue)}
.sr-locate{width:100%;margin-top:14px;padding:12px;border:1.5px dashed var(--line);border-radius:12px;background:#fff;
  color:var(--blue);font-weight:600;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.sr-locate:hover{border-color:var(--blue)}

/* B v3 — showroom-popup: postcode-fallback */
.sr-postcode{margin-top:12px;text-align:center}
.sr-postcode__or{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.sr-postcode__form{display:flex;gap:8px}
.sr-postcode__form input{flex:1;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:14px;outline:none}
.sr-postcode__form input:focus{border-color:var(--blue)}
.sr-postcode__form button{padding:11px 20px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;cursor:pointer;flex-shrink:0}
.sr-postcode__form button:hover{background:var(--blue-dark)}
.sr-postcode__msg{display:block;font-size:12.5px;color:var(--muted);margin-top:8px;min-height:16px}
/* plaats/stad-zoek met suggesties */
.sr-city{position:relative;margin-top:8px}
/* drop-UP: het zoekveld staat onderin de (scrollbare) modal, dus suggesties openen omhoog
   zodat ze niet door de scroll-rand/footer worden afgekapt */
.sr-city__sug{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:30;margin:0;padding:6px;list-style:none;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;box-shadow:0 -8px 24px rgba(0,0,0,.16);max-height:240px;overflow-y:auto;text-align:left}
.sr-city__opt{padding:9px 12px;border-radius:7px;font-size:14px;color:var(--blue);cursor:pointer}
.sr-city__opt:hover{background:var(--blue-tint)}

/* B v3 — type-filter (subcategorieën) in de categorie-sidebar */
.ftypes{display:flex;flex-direction:column;gap:2px}
.ftype{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;
  border-radius:8px;font-size:13px;color:var(--text);text-decoration:none}
.ftype:hover{background:#f3f5f7}
.ftype em{font-style:normal;font-size:12px;color:var(--muted)}
.ftype--active{background:var(--blue);color:#fff;font-weight:600}
.ftype--active:hover{background:var(--blue-dark)}
.ftype--active em{color:rgba(255,255,255,.9)}
/* ingeklapt: alleen de eerste 6 links; 'Toon alle X types' klapt uit */
.ftype--extra{display:none}
.ftypes.is-open .ftype--extra{display:flex}
.ftypes__more{margin-top:6px;border:0;background:transparent;color:var(--blue);
  font:inherit;font-size:12.5px;font-weight:600;padding:7px 10px;cursor:pointer;text-align:left;text-decoration:underline}
.ftypes__more:hover{color:var(--orange)}

/* B v3 — weergave-switch (2/3/4/5 kolommen) naast het sorteren */
.toolbar__right{display:flex;align-items:center;gap:18px}
.gridswitch{display:flex;gap:6px}
.gridswitch button,.gridswitch a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;color:#6d7883;padding:0;text-decoration:none}
.gridswitch button:hover,.gridswitch a:hover{border-color:var(--blue);color:var(--blue)}
.gridswitch button.is-active,.gridswitch a.is-active{border-color:var(--blue);background:var(--blue);color:#fff}
.gridswitch svg{display:block}
/* kolom-overrides alleen op desktop; daaronder gelden de responsive regels (980px: 2, 480px: 1) */
@media(min-width:981px){
  .products-grid--c4{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:980px){
  .gridswitch{display:none}
}

/* ============ COOKIEMELDING (design B) ============
   Markup komt uit de gedeelde chrome (website_public.php) maar wordt door B niet
   gestyled (geen website.css/Bootstrap). Verborgen tot main.js .is-shown zet → geen
   flash van ongestylede inhoud onder de footer. */
/* 2026-08-01 (David): B gelijkgetrokken aan design A — de banner blokkeert de site niet
   meer. De laag spant nog steeds het scherm op (zodat de kaart op dezelfde plek uitlijnt:
   onderaan tot 760px, daarboven gecentreerd), maar de waas is weg en aanrakingen gaan er
   dwars doorheen naar de pagina. Alleen de kaart zelf vangt nog kliks. De kaart blijft
   staan tot de bezoeker kiest; er verandert niets aan de consent-keten, de events of
   cookie_session.php — dit is uitsluitend CSS. */
.js-cookies-alert{display:none;position:fixed;inset:0;z-index:1000;
  background:transparent;pointer-events:none;align-items:flex-end;justify-content:center;padding:20px}
.js-cookies-alert.is-shown{display:flex}
/* Consent al gegeven (server-side cookie) → hard verborgen, beat alle scripts; heropenen mag wél. */
.js-cookies-alert.db3-consented{display:none!important}
.js-cookies-alert.db3-consented.is-shown{display:flex!important}
.js-cookies-alert > .container{background:#fff;border-radius:16px;max-width:720px;width:100%;
  margin:0;padding:26px 28px;box-shadow:0 24px 60px rgba(8,18,33,.4);max-height:88vh;overflow-y:auto;
  pointer-events:auto} /* 2026-08-01: de kaart vangt de kliks, de laag eromheen niet */
@media(min-width:760px){ .js-cookies-alert{align-items:center} }
.js-cookies-alert .cookie-tabs .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.js-cookies-alert .tab-button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);
  background:#fff;color:var(--blue);font:inherit;font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:20px;cursor:pointer}
.js-cookies-alert .tab-button:hover{border-color:var(--blue)}
.js-cookies-alert .tab-button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.js-cookies-alert .tab-button img{display:none} /* losse check/close-icoontjes uit website.css verbergen */
.js-cookies-alert .tab-item{font-size:13.5px;color:#52585f;line-height:1.55}
.js-cookies-alert .tab-item p{margin:0 0 10px}
.js-cookies-alert .cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.js-cookies-alert .cookie-checkbox label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:600;color:var(--blue);cursor:pointer}
.js-cookies-alert .cookie-checkbox input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer}
.js-cookies-alert .cookie-buttons{display:inline-flex}
.js-cookies-alert .btn{border:0;border-radius:24px;font:inherit;font-size:14px;font-weight:600;
  padding:11px 26px;cursor:pointer}
.js-cookies-alert .btn-warning{background:var(--orange);color:#fff}
.js-cookies-alert .btn-warning:hover{background:var(--orange-dark)}
.js-cookies-alert .js-cookie-confirm:not(.js-confirm-all){background:var(--blue);color:#fff}
.js-cookies-alert .js-cookie-confirm:not(.js-confirm-all):hover{background:var(--blue-dark)}
.js-cookies-alert .cookie-links ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:16px 0 0;padding:0}
.js-cookies-alert .cookie-links a{font-size:12.5px;color:var(--muted);text-decoration:underline}
.js-cookies-alert .cookie-links a:hover{color:var(--orange)}

/* ============ "Toegevoegd aan winkelwagen"-tekstwolk (design B) ============
   De gedeelde alerts (.js-product-added-alert / .js-favorite-alert) komen uit de chrome maar
   worden door B niet gestyled → stonden ongestyled onder de footer. Verbergen. In plaats
   daarvan toont product.php's addToCart een spraakbel die aan het winkelwagen-icoon hangt. */
.js-product-added-alert,.js-favorite-alert{display:none}
.header__icons{position:relative}
.cart-bubble{position:absolute;top:calc(100% + 12px);right:0;z-index:1000;display:none;
  align-items:center;gap:9px;white-space:nowrap;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;box-shadow:0 14px 38px rgba(8,18,33,.2);
  font-size:13.5px;font-weight:600;color:var(--text)}
.cart-bubble.is-shown{display:flex;animation:db3pBubbleIn .26s ease}
/* pijltje omhoog naar het cart-icoon (rechtsboven in de bel) */
.cart-bubble::before{content:"";position:absolute;top:-7px;right:16px;width:13px;height:13px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.cart-bubble__check{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;background:#2e9e5b;color:#fff;font-size:13px;font-weight:800}
.cart-bubble__cta{color:var(--orange);font-weight:700;text-decoration:underline}
.cart-bubble__cta:hover{color:var(--orange-dark)}
@keyframes db3pBubbleIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ============ FAVORIETEN / WISHLIST (design B) ============
   Hergebruikt de homepage-.product-kaart in .products-grid; extra: verwijderknop op de
   foto, configregel, twee actieknoppen en een notitieveld. JS = favorites.js (.js-fav-*). */
.product--fav{display:flex;flex-direction:column}
.product--fav .product__media{position:relative}
.product--fav .product__media-link{position:absolute;inset:0;z-index:1}
.product--fav .product__badge{z-index:2}
.fav-remove{position:absolute;top:10px;left:10px;z-index:3;width:32px;height:32px;border-radius:50%;
  border:0;background:#fff;color:var(--blue);box-shadow:0 3px 10px rgba(8,18,33,.18);cursor:pointer;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.fav-remove:hover{background:var(--orange);color:#fff}
.product--fav .product__config{font-size:12px;color:var(--muted);margin:-4px 0 9px;line-height:1.4}
.product--fav .product__price{margin-bottom:14px}
.fav-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.fav-btn{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid transparent;
  border-radius:24px;font:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;cursor:pointer;
  text-align:center;text-decoration:none}
.fav-btn--primary{background:var(--orange);color:#fff}
.fav-btn--primary:hover{background:var(--orange-dark)}
.fav-btn--ghost{background:#fff;border-color:var(--line);color:var(--blue)}
.fav-btn--ghost:hover{border-color:var(--blue)}
.fav-note{margin-top:10px}
.fav-note textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:12.5px;color:var(--text);resize:vertical;min-height:46px;outline:none}
.fav-note textarea:focus{border-color:var(--blue)}
.fav-empty{text-align:center;max-width:460px;margin:10px auto 0;padding:50px 24px;
  background:#fff;border:1px solid var(--line);border-radius:16px}
.fav-empty__ico{display:inline-flex;color:var(--orange);margin-bottom:6px}
.fav-empty__title{font-size:20px;font-weight:800;color:var(--blue);margin-bottom:10px}
.fav-empty p{font-size:14px;color:#52585f;line-height:1.55;margin-bottom:8px}
.fav-empty .fav-btn{margin-top:16px}

/* ============ CONTENTPAGINA'S "Over A-meubel" (design B) ============
   /over-ons/* via designs/b/over-ons.php — 2-koloms: prose-content + zijnavigatie. */
.docpage{display:grid;grid-template-columns:1fr 264px;gap:40px;align-items:start;padding-bottom:56px}
.docpage__main{min-width:0}
/* prose: nette typografie voor CMS-HTML (h1/h2/h3/p/ul/ol/table/img/a/blockquote) */
.prose{font-size:15px;line-height:1.7;color:var(--text)}
.prose > :first-child{margin-top:0}
.prose h1{font-size:28px;font-weight:800;color:var(--blue);margin:0 0 16px}
.prose h2{font-size:21px;font-weight:700;color:var(--blue);margin:30px 0 12px}
.prose h3{font-size:17px;font-weight:700;color:var(--blue);margin:24px 0 10px}
.prose p{margin:0 0 16px}
.prose a{color:var(--orange);font-weight:600;text-decoration:underline}
.prose a:hover{color:var(--orange-dark)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 7px}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.prose strong,.prose b{color:var(--text)}
.prose blockquote{margin:0 0 16px;padding:12px 18px;border-left:4px solid var(--orange);background:#f7f4f1;border-radius:0 8px 8px 0;color:#52585f}
.prose hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:#f3f5f7;color:var(--blue);font-weight:700}
.prose .table-not-responsive{overflow-x:auto}
.db3o-phone,.db3o-btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;
  border:0;border-radius:24px;padding:11px 24px;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.db3o-phone:hover,.db3o-btn:hover{background:var(--orange-dark);color:#fff;text-decoration:none}
.prose a.db3o-btn{color:#fff;text-decoration:none} /* 2026-07-21 (David B2): .prose a (oranje) won op specificiteit van de knop -> tekst was oranje op oranje */
/* zijnavigatie */
.docnav{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;position:sticky;top:20px}
.docnav__title{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:10px}
/* 2026-07-29 herstructurering infomenu's: tussenkopjes per taakgroep in de zijbalk */
.docnav__group{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a94a0;margin:14px 11px 5px}
.docnav__group:first-of-type{margin-top:4px}
/* 2026-07-30 (stap 1): contextuele zijbalk — terug-link naar de hub + klein voorwaarden-blok */
.docnav__hub{display:block;font-size:13px;font-weight:600;color:var(--orange);text-decoration:none;margin-bottom:10px}
.docnav__hub:hover{text-decoration:underline}
.docnav__legal a{font-size:12.5px;padding:5px 11px;color:#5c6670}
/* 2026-07-30 (mobiel, David): "Terug naar …"-knop naar de familie-voordeur i.p.v. de eerdere
   swipebare chips-rij — vervangt de zijbalk ≤900px */
.subnav-back{display:none}
@media(max-width:900px){
  /* negatieve top-marge: trekt de knop tegen de (site-brede, dus niet aan te passen)
     pagehead-padding aan — mobiel zo min mogelijk loze ruimte */
  .subnav-back{display:inline-flex;align-items:center;gap:6px;margin:-8px 0 10px;padding:8px 14px;
    border:1px solid var(--blue);border-radius:8px;background:#fff;color:var(--blue);
    font-size:13.5px;font-weight:600;text-decoration:none}
  .subnav-back:active{background:var(--blue-tint)}
}
/* Kolomkoppen in de footer zijn nu links (stap 3) — zelfde opmaak als de platte kop */
.footer__heading a{color:inherit;text-decoration:none}
.footer__heading a:hover{text-decoration:underline}
.docnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.docnav a{display:block;padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--text);text-decoration:none}
.docnav a:hover{background:#f3f5f7}
.docnav a.is-active{background:var(--blue);color:#fff;font-weight:600}
/* vestigingen-grid op locatiepagina's */
/* 07-08-2026 (David): op brede schermen drie vestigingen naast elkaar. Breekpunten:
     >=1200px  3 kolommen   (contentkolom is daar breed genoeg naast de docnav-zijbalk)
     641-1199  2 kolommen   (ongewijzigd)
     <=640px   1 kolom      (ongewijzigd, staat verderop)
   De uitlijnfix van vanmiddag blijft werken: elke foto heeft een vast kader, dus de kaarten
   in een rij beginnen nog steeds op dezelfde lijn — dat is onafhankelijk van het aantal kolommen. */
.docloc{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(min-width:1200px){
  .docloc{grid-template-columns:repeat(3,1fr);gap:14px}
  /* smallere kaart: kaart-thumbnail iets kleiner zodat Route + Bel + thumb op één regel passen.
     80x96 blijft onder de native 100x120, dus nog steeds verkleinen en niet vergroten. */
  .srcard__mapthumb img{width:80px;height:96px}
  .srcard__hours td:first-child{width:96px}
  .srcard__name{font-size:15px}
}
.docloc__item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:13.5px;line-height:1.55;color:var(--text)}
.docloc__item a{color:var(--orange);font-weight:600}
.docloc__item[data-location-href]{cursor:pointer} /* klikbare vestigingskaart, zoals design A */
/* 2026-07-29: alleen uitlijnen, verder niets veranderd aan de kaarten. Drie dingen liepen scheef
   doordat de tabelmarkup per vestiging verschilt: (1) de kolombreedte werd per kaart apart berekend,
   waardoor de daglabels en de tijden op elke kaart op een andere plek begonnen; (2) vier vestigingen
   hebben een extra "(gem. …)"-regel, waardoor hun winkelfoto lager hing dan die van de buurkaart;
   (3) de winkelfoto's hebben verschillende beeldverhoudingen en werden dus verschillend groot. */
.docpage .docloc__item{display:flex;flex-direction:column}
.docpage .docloc__item table{table-layout:fixed}
.docpage .docloc__item table td:first-child{width:170px}   /* kaartje + daglabels: overal even breed */
/* 07-08 (David: "kaart oogt onscherp"): de kaartjes zijn 100x120 px groot, maar werden door
   `width:100%` opgerekt tot de 170px van de kolom — 1,7x vergroot, dus zichtbaar wazig. Ze
   worden nu nooit groter dan hun eigen formaat getoond en staan gecentreerd in de cel. Design A
   toonde ze al op 100px en had het probleem daarom niet. */
.docpage .docloc__item table img{width:100%;max-width:100px;height:auto;display:block;margin:0 auto}
.docpage .docloc__item .location-image{margin:auto 0 0}    /* foto onderaan de kaart uitlijnen */
.docpage .docloc__item .location-image img{width:225px;max-width:100%;height:auto;border-radius:8px;display:block}
/* 2026-07-29: de bronfoto's zijn 225x129px; ze vol breed trekken gaf ~1,8x opschaling (en het
   dubbele op retina) en dus onscherpe gevels. Daarom op eigen grootte laten staan. Alle twaalf
   bestanden zijn even groot (alleen Nijmegen 225x127), dus de kaarten blijven onderling gelijk. */
@media(max-width:900px){
  .docpage{grid-template-columns:1fr;gap:26px}
  /* 2026-07-30 (stap 1): zijbalk op tablet/mobiel volledig weg — de "Terug naar …"-knop
     onder de pagehead neemt het over (een lange lijst bóven de content was juist onrustig). */
  .docnav{display:none}
  .docloc{grid-template-columns:1fr}
}

/* ---- contentpagina-subtemplates (contact-formulier, openingstijden) in B-stijl ----
   Deze gedeelde partials gebruiken Bootstrap/website.css-classes die B niet laadt. */
/* Bootstrap-achtige responsive helpers (anders tonen desktop- én mobiel-variant tegelijk) */
.hidden-xs{display:block}
.visible-xs{display:none}
@media(max-width:767px){ .hidden-xs{display:none} .visible-xs{display:block} }
.docpage .table-responsive{overflow-x:auto;margin:0 0 18px}
/* opening-times / city-knoppen + algemene btn-warning binnen contentpagina's */
.docpage .btn-warning{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);
  color:#fff;border:0;border-radius:20px;padding:8px 16px;font:inherit;font-size:13px;font-weight:600;
  text-decoration:none;cursor:pointer;margin:2px}
.docpage .btn-warning:hover{background:var(--orange-dark);color:#fff}
/* contactformulier */
.docpage .form-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-top:18px}
.docpage .form h2{font-size:18px;font-weight:700;color:var(--blue);margin:0 0 14px}
.docpage .form-group{margin-bottom:14px}
.docpage .form-group label{display:block;font-size:13px;font-weight:600;color:var(--blue);margin-bottom:5px}
.docpage .form-group label em{color:var(--orange);font-style:normal}
.docpage .form-control{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 13px;
  font:inherit;font-size:14px;color:var(--text);outline:none;background:#fff}
.docpage .form-control:focus{border-color:var(--blue)}
.docpage textarea.form-control{min-height:120px;resize:vertical}
.docpage .form .radio{display:inline-flex;align-items:center;gap:7px;margin:0 16px 10px 0;font-size:14px}
.docpage .form .radio input{width:16px;height:16px;accent-color:var(--orange)}
.docpage .form button[type="submit"],.docpage .form .btn{margin-top:6px;border-radius:24px;padding:11px 26px;font-size:14px}
/* meldingen */
.docpage .alert{border-radius:10px;padding:13px 16px;margin:0 0 16px;font-size:14px;border:1px solid var(--line)}
.docpage .alert-success{background:#eaf7ef;border-color:#bfe6cd;color:#1f7a44}
.docpage .alert-danger{background:#fdecec;border-color:#f3c2c2;color:#a12a2a}
.docpage .alert ul{margin:6px 0 0;padding-left:20px}
/* mobiele openingstijden-tabs (JS van website.js ontbreekt in B → toon alle panelen) */
.docpage .openingtimes-tabs .head{display:none}
.docpage .openingtimes-tabs .tab-content{display:block !important}

/* B v3 — productkaart-tellers (opstellingen + kleuren) met icoontjes */
.product__meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;font-size:12px;color:var(--muted)}
.product__meta-item{display:inline-flex;align-items:center;gap:5px}
.product__meta-item svg{flex-shrink:0;color:var(--blue)}
.product__meta-item strong{color:var(--text);font-weight:700}

/* ============ Contact: duidelijke bel-knop ============ */
.db3o-call{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;text-decoration:none;
  border-radius:14px;padding:14px 22px;margin:6px 0 22px;box-shadow:0 8px 22px rgba(224,97,28,.28);transition:background .15s}
.db3o-call:hover{background:var(--orange-dark);color:#fff;text-decoration:none}
.db3o-call__ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.18)}
.db3o-call__txt{display:flex;flex-direction:column;line-height:1.25}
.db3o-call__txt small{font-size:12px;font-weight:600;opacity:.92}
.db3o-call__txt strong{font-size:21px;font-weight:800;letter-spacing:.3px}

/* ============ Service: nette bestand-upload knop (B laadt geen website.css) ============ */
input[type="file"]{font:inherit;font-size:13.5px;color:var(--muted);max-width:100%}
input[type="file"]::file-selector-button{font:inherit;font-size:13.5px;font-weight:700;background:var(--orange);
  color:#fff;border:0;border-radius:24px;padding:11px 22px;margin-right:14px;cursor:pointer;transition:background .15s}
input[type="file"]::file-selector-button:hover{background:var(--orange-dark)}
input[type="file"]::-webkit-file-upload-button{font:inherit;font-size:13.5px;font-weight:700;background:var(--orange);
  color:#fff;border:0;border-radius:24px;padding:11px 22px;margin-right:14px;cursor:pointer}
.receipt-image-field,.service-item-image-field{display:inline-flex;align-items:center;gap:8px;
  background:#f7f8f9;border:1.5px dashed var(--line);border-radius:12px;padding:14px 16px;margin:8px 0}
.receipt-note{display:flex;gap:8px;margin-top:10px;font-size:12.5px;color:var(--muted);max-width:580px;line-height:1.5}

/* ============ Openingstijden-tabel (over-ons) netjes + horizontaal scrollbaar ============ */
.docpage .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.docpage .table-responsive > h2{padding:16px 18px 4px;margin:0;font-size:18px}
.docpage .table-responsive table.table{width:auto;min-width:100%;margin:0;white-space:nowrap;border:0}
.docpage .table-responsive table.table th,.docpage .table-responsive table.table td{border:0;border-bottom:1px solid var(--line);text-align:center;padding:10px 14px;vertical-align:middle}
.docpage .table-responsive table.table thead th{background:var(--blue);color:#fff;font-weight:700}
.docpage .table-responsive table.table tbody tr:nth-child(odd){background:#f7f8f9}
.docpage .opening-times-buttons td{border-bottom:0;padding:12px 8px}
.docpage .opening-times-buttons .btn-warning{display:block;width:100%;white-space:nowrap}
/* mobiele stad-tabs zonder JS: tab-kop verbergen, steden onder elkaar */
.openingtimes-tabs .head{display:none}
.openingtimes-tabs .body > .tab{display:block;margin-bottom:18px}

/* Vestigingen-cards: telefoonnummer als nette bel-knop (CMS-content, geen markup-toegang) */
.docloc__item a[href^="tel:"]{display:inline-flex;align-items:center;gap:7px;background:var(--orange);color:#fff;
  text-decoration:none;font-weight:700;font-size:13px;line-height:1;border-radius:20px;padding:8px 16px;margin:3px 0}
.docloc__item a[href^="tel:"]:hover{background:var(--orange-dark);color:#fff;text-decoration:none}
.docloc__item a[href^="tel:"]::before{content:"";flex:0 0 auto;width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Contact-sectie (boven footer): telefoon/e-mail klikbaar, in tekstkleur met oranje hover */
.contact__link{color:inherit;text-decoration:none}
.contact__link:hover{color:var(--orange)}

/* ============ Winkelwagen-opties (vlekkenprotectie / bezorgservice / betaling) ============ */
.cart-options{display:flex;flex-direction:column;gap:12px;margin:6px 0 22px}
.cart-opt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 18px}
.cart-opt__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.cart-opt__title{font-size:15px;font-weight:700;color:var(--blue)}
.cart-opt__cost{font-size:13px;color:var(--muted);white-space:nowrap;text-align:right;line-height:1.3}
.cart-opt__cost small{display:block;font-size:11px;color:var(--muted)}
.cart-opt__cost strong{font-size:15px;font-weight:800;color:var(--text)}
.cart-opt__cost .free{color:#2e9e5b;font-weight:800}
.cart-opt__choice{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);
  padding:3px 0;cursor:pointer;line-height:1.35}
/* #11 prijs per vlekkenprotectie-optie, rechts uitgelijnd */
.cart-opt__choice-txt{flex:1}
.cart-opt__choice-price{white-space:nowrap;font-weight:700;font-size:13px;color:var(--text)}
.cart-opt__choice-price--free{color:#2e9e5b}
.cart-opt__choice input{width:16px;height:16px;accent-color:var(--orange);cursor:pointer;flex-shrink:0}
.cart-opt__choice.is-disabled{color:var(--muted);cursor:not-allowed}
.cart-opt__note{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.45}

/* winkelwagen-opties: ?-help-tooltip naast de titel */
.cart-opt__title{display:inline-flex;align-items:center}
.cart-opt__help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:7px;
  border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;cursor:help;position:relative;flex-shrink:0}
.cart-opt__tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:250px;max-width:70vw;
  background:#1d2b3a;color:#fff;font-size:12px;font-weight:400;line-height:1.5;padding:11px 13px;border-radius:8px;
  opacity:0;visibility:hidden;transition:opacity .15s;z-index:30;box-shadow:0 8px 22px rgba(8,18,33,.3);text-align:left;pointer-events:none}
.cart-opt__tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1d2b3a}
.cart-opt__help:hover .cart-opt__tip,.cart-opt__help:focus .cart-opt__tip{opacity:1;visibility:visible}
/* overzicht-box: betaal nu / resterend bij aflevering */
.summary__row--paynow{margin-top:8px;font-weight:700;color:var(--text)}
.summary__row--paynow strong{font-weight:800}
.summary__row--rest{color:var(--muted);font-size:13px}

/* ============ MINI-WINKELWAGEN (hover-dropdown onder het cart-icoon) ============
   .cart-wrap omsluit het cart-icoon + de dropdown, zodat de hover-zone doorloopt.
   Toont op hover/focus-within wat er in de winkelwagen zit. JS (main.js) ververst
   de inhoud on-hover en na 'toevoegen aan winkelwagen'. */
.cart-wrap{position:relative;display:flex;align-items:center}
.minicart{position:absolute;top:calc(100% + 14px);right:0;z-index:1200;width:340px;max-width:88vw;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 46px rgba(8,18,33,.22);
  padding:14px 16px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;color:var(--text);text-align:left}
.minicart::before{content:"";position:absolute;top:-7px;right:14px;width:13px;height:13px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
/* onzichtbare brug zodat de muis van icoon naar dropdown kan zonder te sluiten */
.minicart::after{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.cart-wrap:hover .minicart,.cart-wrap:focus-within .minicart,.minicart.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.minicart__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.minicart__head strong{font-size:15px}
.minicart__count{font-size:12.5px;color:var(--muted)}
.minicart__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 0 14px;color:var(--muted)}
.minicart__empty p{margin:0;font-size:13.5px}
.minicart__lines{max-height:340px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.minicart__line{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.minicart__line:last-of-type{border-bottom:0}
.minicart__img{flex:0 0 auto;width:54px;height:54px;border-radius:9px;border:1px solid var(--line);
  background:#fff center/contain no-repeat}
.minicart__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.minicart__name{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.minicart__line:hover .minicart__name{color:var(--orange)}
.minicart__variant{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minicart__qty{font-size:11.5px;color:var(--muted)}
.minicart__lp{flex:0 0 auto;font-size:13px;font-weight:800;white-space:nowrap}
.minicart__more{display:block;padding:9px 0 2px;font-size:12.5px;font-weight:600;color:var(--orange);text-decoration:none}
.minicart__more:hover{text-decoration:underline}
.minicart__foot{margin-top:10px;padding-top:11px;border-top:1px solid var(--line)}
.minicart__sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:14px}
.minicart__sub strong{font-size:16px;font-weight:800}
.minicart__btn{display:block;text-align:center;background:var(--orange);color:#fff;font-weight:700;
  border-radius:10px;padding:11px 14px;text-decoration:none;transition:background .15s ease}
.minicart__btn:hover{background:var(--orange-dark)}
@media(max-width:680px){.minicart{display:none!important}}

/* ============ CONFIGURATOR IN TABS (Opstellingen + Kleuren en bekleding) ============
   De configurator zit nu in de product-tabs i.p.v. een modal. De cfg-*-bouwstenen
   (opstelling-kaarten, type-pills, stofcollecties, swatches) worden hergebruikt; hier
   alleen de tab-specifieke layout + de nieuwe filterbalk en "Kies opstelling"-knop. */
/* Opstelling-kaarten in de tab: nette, gelijke kaarten met de foto bovenaan en
   prijs + knop netjes onderaan uitgelijnd (ongeacht of de naam 1 of 2 regels is). */
/* 2026-07-24 (David R2, ECHTE oorzaak — WebKit-grid-ontsporing, workflow-diagnose):
   kaal `1fr` = minmax(auto,1fr): het auto-MINIMUM laat een kaart met grote
   min-content-bijdrage (viewBox-SVG zonder maten = 300x150-default in WebKit) de track
   voorbij de containerbreedte duwen. Samen met height:100% (percentage<->rijhoogte-
   cyclus) en het aspect-ratio-kanaal hieronder groeiden de kaarten op iOS bij elke
   scroll-relayout verder ("eindeloos inzoomen", rechts afgeknipt door overflow-x:clip
   — vandaar ook de ✓ Gekozen-balk zonder tekst). Blink heeft die terugkoppeling niet,
   dus Chrome-emulatie toonde niets. minmax(0,1fr) + min-width:0 maakt de blow-out
   wiskundig onmogelijk; height:100% is overbodig (grid rekt standaard). */
.cfg-opstellingen--tab{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:8px}
@media(max-width:1040px){.cfg-opstellingen--tab{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.cfg-opstellingen--tab{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.cfg-opstellingen--tab{grid-template-columns:minmax(0,1fr)}}
.cfg-opstellingen--tab .cfg-opst-card{text-decoration:none;color:inherit;min-width:0;
  padding:14px;gap:0;border-radius:14px;transition:border-color .15s ease,box-shadow .15s ease}
.cfg-opstellingen--tab a.cfg-opst-card:hover{border-color:var(--orange);box-shadow:0 8px 22px rgba(8,18,33,.09)}
/* thumbnail-vak: vaste 4:3-verhouding, foto netjes gecentreerd */
.cfg-opstellingen--tab .cfg-opst-card__diagram{height:auto;aspect-ratio:4/3;margin-bottom:12px;
  padding:16px 14px 12px 26px;background:#fff;border:1px solid var(--line)}
/* R2: op touch-apparaten het breedte<->hoogte-transferkanaal (aspect-ratio) vervangen
   door een vaste hoogte — het tweede ingredient van de WebKit-relayout-lus. Desktop
   (muis) behoudt de 4:3-verhouding en oogt identiek. */
@media (hover: none) {
  .cfg-opstellingen--tab .cfg-opst-card__diagram{aspect-ratio:auto;height:140px}
}
/* witte thumbnail-achtergrond, ook op de gekozen kaart */
.cfg-opstellingen--tab .cfg-opst-card.is-active .cfg-opst-card__diagram{background:#fff}
.cfg-opstellingen--tab .cfg-opst-card__photo{background-size:contain}
.cfg-opstellingen--tab .cfg-opst-card__svg{max-height:74px}
.cfg-opstellingen--tab .cfg-opst-card__bcm,
.cfg-opstellingen--tab .cfg-opst-card__dcm{font-size:10px;color:#687889;font-weight:600}
/* naam altijd 2 regels hoog → prijs/knop lijnen over alle kaarten uit */
.cfg-opstellingen--tab .cfg-opst-card__name{font-size:14.5px;line-height:1.3;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cfg-opstellingen--tab .cfg-opst-card__dims{font-size:11.5px;margin-top:3px}
/* prijs + knop onderaan vastzetten (kaart = flex-kolom) */
.cfg-opstellingen--tab .cfg-opst-card__price{font-size:16px;margin-top:auto;padding-top:8px}
.cfg-opst-card__cta{display:block;margin-top:12px;text-align:center;background:var(--orange);color:#fff;
  font-weight:700;font-size:13px;border-radius:9px;padding:10px 12px;transition:background .15s ease}
.cfg-opst-card:hover .cfg-opst-card__cta{background:var(--orange-dark)}
.cfg-opst-card__cta--chosen,.cfg-opst-card:hover .cfg-opst-card__cta--chosen{background:#eaf6ee;color:#2e9e5b;cursor:default}
.cfg-opst-card.is-chosen{cursor:default}
/* Opstelling-typefilter in de tab = tekstknoppen (geen vorm-silhouet) */
.cfg-typebtns{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.cfg-typebtn{width:auto;border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:all .14s ease}
.cfg-typebtn:hover{border-color:var(--orange)}
.cfg-typebtn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---- materiaal- + kleurfilter boven de stofcollecties ---- */
.cfg-filters{display:flex;flex-direction:column;gap:16px;margin:6px 0 22px}
.cfg-filters .cfg-filter+.cfg-filter{padding-top:16px;border-top:1px solid var(--line)}
.cfg-filter__label{display:block;font-weight:700;font-size:13px;color:var(--blue);margin-bottom:10px}
.cfg-filter__chips{display:flex;flex-wrap:wrap;gap:8px}
.cfg-filter__chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;
  font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:all .14s ease}
.cfg-filter__chip:hover{border-color:var(--orange)}
.cfg-filter__chip.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* kleurenselector: nette rij van kleurvierkantjes + "Alle kleuren"-pill */
.cfg-colourpicker{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.cfg-colourpick{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;
  font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:all .14s ease}
.cfg-colourpick:hover{border-color:var(--orange)}
.cfg-colourpick.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.cfg-colourpick--dot{width:30px;height:30px;padding:2px;border-radius:8px}
.cfg-colourpick--dot:hover{transform:translateY(-1px)}
.cfg-colourpick--dot.is-active{border-color:var(--orange);box-shadow:0 0 0 3px #fdece4}
/* Kleurfilter-wisknop (× ) — verschijnt zodra er een kleur actief is */
.cfg-colour-clear{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;
  border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer}
.cfg-colour-clear:hover{border-color:var(--orange);color:var(--orange)}
.cfg-colour-clear__x{font-size:16px;line-height:.8}
/* Inklapbare "Filter kleuren": standaard dicht, pijl klapt open */
.cfg-filter__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;
  background:none;border:0;cursor:pointer;text-align:left;padding:0;font-weight:700;font-size:13px;color:var(--blue)}
.cfg-filter__chev{flex-shrink:0;transition:transform .25s ease}
.cfg-filter__toggle[aria-expanded="true"] .cfg-filter__chev{transform:rotate(180deg)}
.cfg-filter--collapsible .cfg-colourpicker{display:none;margin-top:12px}
.cfg-filter--collapsible.is-open .cfg-colourpicker{display:flex}
.cfg-colourpick__dot{display:block;width:100%;height:100%;border-radius:6px;background:center/cover no-repeat}

/* ---- stofcollecties in 3 kolommen, elke "code" als kaart ---- */
.cfg-colls--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:4px;align-items:start}
@media(max-width:560px){.cfg-colls--grid{grid-template-columns:1fr}}
.cfg-colls--grid .cfg-coll{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
/* swatches per code in 3 kolommen (6 preview = 2 rijen van 3) */
.cfg-colls--grid .cfg-colours{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cfg-colls--grid .cfg-colour{width:100%}
.cfg-colls--grid .cfg-colour__dot{width:100%;aspect-ratio:1/1;height:auto;border-radius:7px;transition:transform .16s ease,box-shadow .16s ease}
/* zoom-op-hover: swatch vergroot + licht eruit + naam/code als tooltip erboven */
.cfg-colls--grid .cfg-colour:hover{z-index:20}
.cfg-colls--grid .cfg-colour:hover .cfg-colour__dot{transform:scale(1.5);box-shadow:0 12px 28px rgba(16,42,67,.34);border-color:#fff}
.cfg-colls--grid .cfg-colour::after{content:attr(data-name);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(5px);background:#102a43;color:#fff;font-size:11.5px;font-weight:600;
  line-height:1.3;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;padding:5px 10px;
  border-radius:7px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:30}
.cfg-colls--grid .cfg-colour::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(5px);border:5px solid transparent;border-top-color:#102a43;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:30}
.cfg-colls--grid .cfg-colour:hover::after,
.cfg-colls--grid .cfg-colour:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
.cfg-colls--grid .cfg-coll__more{width:100%}

/* Opstelling-thumbnail = echte live opstellingsfoto i.p.v. het SVG-silhouet.
   Diagram-box (grijs, oranje getint als actief) blijft; foto staat 'contain'
   erin met de breedte/diepte-labels eroverheen. */
.cfg-opst-card__diagram--photo{height:112px}
.cfg-opst-card__photo{display:block;width:100%;height:100%;background:center/contain no-repeat}

/* ============================================================
   ACCOUNT / CHECKOUT (design B styling van includes/account.php)
   /account valt terug op de gedeelde account.php (alle backend-logica), maar
   rendert binnen de B-chrome. Hier stylen we die markup (formulieren, blokken,
   grid, knoppen, winkelwagen-tabel, USP-balk, reviews) in de B-huisstijl.
   Alles gescope't onder .content-wrapper (alleen de gedeelde pagina's gebruiken die). */
.content-wrapper{padding:26px 0 54px}
.content-wrapper h1{font-size:24px;font-weight:800;color:var(--blue);line-height:1.2}
.content-wrapper h2{font-size:19px;font-weight:800;color:var(--blue)}
.content-wrapper h3{font-size:16px;font-weight:800;color:var(--blue)}
.content-wrapper .margin-bottom{margin-bottom:16px}
.content-wrapper p{font-size:14px;line-height:1.55}
.content-wrapper a{color:var(--blue)}

/* minimal 12-koloms grid (Bootstrap-namen) */
.content-wrapper .row{display:flex;flex-wrap:wrap;margin:0 -10px}
.content-wrapper .row>[class*="col-"]{padding:0 10px;width:100%;box-sizing:border-box}
@media(min-width:768px){
  .content-wrapper .col-sm-6{width:50%}
  .content-wrapper .col-sm-8{width:66.667%}
  .content-wrapper .col-sm-4{width:33.333%}
  .content-wrapper .col-sm-10{width:83.333%}
}
@media(min-width:992px){
  .content-wrapper .col-md-6{width:50%}
  .content-wrapper .col-md-8{width:66.667%}
  .content-wrapper .col-md-4{width:33.333%}
  .content-wrapper .col-lg-6{width:50%}
}
.content-wrapper [class*="-push-"]{margin-left:auto;margin-right:auto}

/* accountmenu bovenaan (ingelogd) */
.content-wrapper .contentMenu{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;font-size:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.content-wrapper .contentMenu a{color:var(--blue);text-decoration:none;font-weight:600}
.content-wrapper .contentMenu a:first-child{font-weight:800;color:var(--text)}
.content-wrapper .contentMenu a:hover{color:var(--orange)}
.content-wrapper .contentMenu img{display:none}

/* kaartblokken */
.content-wrapper .content-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.content-wrapper .content-block.grey{background:var(--gray-bg)}

/* fieldsets + velden */
.content-wrapper fieldset{border:0;margin:0 0 8px;padding:0}
.content-wrapper legend{font-size:15px;font-weight:800;color:var(--blue);margin:0 0 12px;padding:0;border:0;width:auto}
.content-wrapper .form-group{margin-bottom:13px}
.content-wrapper .form-group label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px}
.content-wrapper label em{color:var(--orange);font-style:normal}
.content-wrapper .form-control{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 13px;
  font-size:14px;color:var(--text);background:#fff;font-family:inherit;box-sizing:border-box}
.content-wrapper .form-control:focus{border-color:var(--blue);outline:none}
.content-wrapper select.form-control{appearance:auto}
.content-wrapper .radio{margin:0 0 6px}
.content-wrapper .radio label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;cursor:pointer}
.content-wrapper .radio input{width:auto}

/* knoppen */
.content-wrapper .btn{display:inline-block;border:0;border-radius:10px;padding:12px 24px;font-size:14px;
  font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s ease;color:#fff}
.content-wrapper .btn-warning,.content-wrapper .btn-success{background:var(--orange)}
.content-wrapper .btn-warning:hover,.content-wrapper .btn-success:hover{background:var(--orange-dark)}

/* meldingen */
.content-wrapper .alert{border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:14px;line-height:1.5}
.content-wrapper .alert h1{font-size:18px;margin:0 0 6px}
.content-wrapper .alert-danger{background:#fdecea;color:#b3261e;border:1px solid #f3c6c2}
.content-wrapper .alert-success{background:#eaf6ee;color:#1e7a44;border:1px solid #bfe3cc}
.content-wrapper .alert-warning{background:#fff7e6;color:#8a5d00;border:1px solid #f3e2b3}
.content-wrapper .alert ul{margin:8px 0 0;padding-left:18px}

/* tabellen (winkelwagen-overzicht + bestelhistorie/orderdetail) */
.content-wrapper .table-responsive{overflow-x:auto}
.content-wrapper .table{width:100%;border-collapse:collapse;font-size:13.5px}
.content-wrapper .table th,.content-wrapper .table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.content-wrapper .winkelwagenTRHeader th,.content-wrapper .winkelwagenTRHeader td{font-weight:700;color:var(--blue);border-bottom:2px solid var(--line)}
.content-wrapper .table img{border-radius:6px;max-width:80px;height:auto}
.content-wrapper .nowrap{white-space:nowrap}

/* USP-balk (home-usps.php) in B-blauw */
.content-wrapper .po-aside{margin-top:6px}
.content-wrapper .po-benefits{background:var(--blue);border-radius:12px;overflow:hidden;color:#fff}
.content-wrapper .po-benefits .title{background:#fff;padding:14px;text-align:center}
.content-wrapper .po-benefits .title img{height:36px;width:auto}
.content-wrapper .po-benefits .content ul{list-style:none;margin:0;padding:8px 6px}
.content-wrapper .po-benefits li a{display:flex;align-items:center;gap:13px;padding:9px 16px;color:#fff;
  text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.3px}
.content-wrapper .po-benefits li a:hover{background:var(--blue-dark)}
.content-wrapper .po-benefits .icon{flex:0 0 24px;display:flex;align-items:center;justify-content:center}

/* reviews / Trustpilot blok */
.content-wrapper .grid-content{margin-top:22px}
.content-wrapper .info-block.review{background:var(--gray-bg);border:1px solid var(--line);border-radius:12px;padding:18px}
.content-wrapper .info-block .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.content-wrapper .info-block .head .title{margin:0;font-size:15px}
.content-wrapper .info-block .rating{display:flex;align-items:center;gap:2px}
.content-wrapper .info-block .rate{font-weight:800;color:var(--text);margin-right:5px;font-size:16px}
.content-wrapper .info-block .rating img{width:18px;height:18px}
.content-wrapper .info-block .review p{font-size:13.5px;color:var(--text);line-height:1.55;margin:0}
.content-wrapper .info-block .image img{max-height:30px;margin-top:10px}

/* Checkout/registratie-formulier: velden 2-op-een-rij i.p.v. gestapeld → bespaart
   verticale ruimte. Alleen de register/login-forms (fieldsets zijn directe kinderen
   van .get-address); account-aanpassen (fieldsets in .content-block) blijft ongemoeid. */
@media(min-width:620px){
  .content-wrapper .get-address>fieldset{display:grid;grid-template-columns:1fr 1fr;
    column-gap:16px;align-items:start;grid-auto-flow:row dense}
  .content-wrapper .get-address>fieldset>legend,
  .content-wrapper .get-address>fieldset>.row{grid-column:1 / -1}
  .content-wrapper .get-address>fieldset>.btn{grid-column:1 / -1;justify-self:start;width:auto}
}

/* Bestelbevestiging (Mollie-retour /bestellen/redirect): status-melding in B-stijl.
   .db3b-status wrapt de returnpage-output zodat 'm binnen de paginabreedte valt. */
.db3b-status{margin-top:8px}
.db3b-status .alert{border-radius:12px;padding:15px 18px;margin:14px 0 0;font-size:14px;line-height:1.5;
  display:flex;align-items:flex-start;gap:10px}
.db3b-status .alert p{margin:0}
.db3b-status .alert-success{background:#eaf6ee;color:#1c7a43;border:1px solid #bfe3cc}
.db3b-status .alert-success::before{content:"✓";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:#2e9e5b;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.db3b-status .alert-danger{background:#fdecea;color:#b3261e;border:1px solid #f3c6c2}

/* Eén-pagina checkout (/bestellen): extra elementen */
.checkout-layout .field select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:14px;color:var(--text);background:#fff;font-family:inherit}
.checkout-layout .field select:focus{border-color:var(--blue);outline:none}
.db3b-titel{display:flex;gap:20px;margin-bottom:14px}
.db3b-titel .radio{margin:0}
.db3b-formerror{background:#fdecea;border:1px solid #f3c6c2;color:#b3261e;border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:14px}
.db3b-formerror ul{margin:8px 0 0;padding-left:18px}
.steps--anchors .step{cursor:pointer}
#db3b-gegevens,#db3b-bezorging,#db3b-betalen{scroll-margin-top:90px}

/* Checkout-stappenbalk als voortgang (scroll-spy): gedaan / actief / te-doen */
.steps--anchors .step.is-done,.steps--anchors .step.is-current{color:var(--blue)}
.steps--anchors .step.is-done i,.steps--anchors .step.is-current i{background:var(--orange)}
.steps--anchors .step.is-current{font-weight:800}
.steps--anchors .step.is-current i{box-shadow:0 0 0 3px #fdece4}
.steps--anchors .step.is-done i{font-size:0}
.steps--anchors .step.is-done i::after{content:"\2713";font-size:13px}

/* Woonwinkel/vestiging-pagina (design B) — zijbalk openingstijden + kaart */
.wk-times{margin-bottom:14px}
.wk-times table{width:100%;border-collapse:collapse;font-size:12.5px}
.wk-times td,.wk-times th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.wk-times tr:last-child td{border-bottom:0}
.wk-route{display:block;text-align:center;margin:2px 0 14px}
.wk-map{border-radius:10px;overflow:hidden}
.wk-map iframe,.wk-map img{width:100%;border:0;display:block;min-height:180px}
.wk-contact{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--blue);text-decoration:none}
.wk-contact:hover{text-decoration:underline}

/* ============ SHOWROOMS-OVERZICHT (design B) ============
   Hergebruikt de .docloc-kaarten van de over-ons-pagina's; paginabreed 3 koloms. */
/* ============ WOONWINKEL / VESTIGING-PAGINA ============ */
.wk{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start;padding-bottom:56px}
.wk__main,.wk__side{min-width:0}
.wk__desc{overflow-wrap:break-word}
.wk__desc img,.wk__desc table{max-width:100%}
.wk__desc table{display:block;overflow-x:auto}
.wk__map{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--gray-bg,#eef2f6)}
.wk__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wk__desc{margin-top:22px}
.wk__card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px}
.wk__card-title{font-size:17px;font-weight:800;color:var(--blue);margin:0 0 12px}
.wk__hours{width:100%;border-collapse:collapse;font-size:13.5px}
.wk__hours th{text-align:left;font-weight:600;color:var(--text);padding:6px 0}
.wk__hours td{text-align:right;color:var(--text);padding:6px 0}
.wk__hours tr{border-bottom:1px solid var(--line)}
.wk__hours tr:last-child{border-bottom:0}
.wk__today th,.wk__today td{color:var(--orange);font-weight:800}
.wk__addr{font-size:14px;line-height:1.55;color:var(--text);margin:0 0 10px}
.wk__line{margin:0 0 6px;font-size:14px}
.wk__line a{color:var(--orange);font-weight:600}
.wk__parking{font-size:13px;color:#1b8849;font-weight:600;margin:8px 0 0}
/* 07-08 (David): de routeknop staat nu bóven de kaart, dus de marge zit onder de knop
   in plaats van erboven. */
.wk__route{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 14px;text-decoration:none}
.wk__back{display:inline-block;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--blue)}
.wk__back:hover{color:var(--orange)}
@media(max-width:860px){
  .wk{grid-template-columns:minmax(0,1fr);gap:20px}
  .wk__map{aspect-ratio:4/3}
  .wk__route{display:flex;width:100%}     /* vol breed op mobiel */
  /* 2026-08-05 (David): mobiele volgorde = kaart → routeknop → Adres & contact →
     Openingstijden → pas dan de tekst. De tekst zit in .wk__main en de kaarten in
     .wk__side, dus met `order` alleen kom je er niet: die werkt per container. Daarom
     lost .wk__main hier op in het raster (display:contents), waarna kaart, knop, tekst
     én zijkolom stuk voor stuk rasteritems zijn en met order door elkaar heen geordend
     kunnen worden. Geen aparte mobiele HTML dus. */
  .wk__main{display:contents}
  /* 07-08 (David): routeknop bóven de kaart, ook op mobiel — dit draait de volgorde van
     05-08 (kaart → knop) om. De rest van de mobiele volgorde blijft zoals hij was. */
  /* De foto is sinds 07-08 ook een rasteritem (wk__main lost hier op in het raster) en moet
     bovenaan blijven; zonder expliciete order zou hij op 0 staan — dat klopt toevallig, maar
     expliciet is hier duidelijker dan toevallig. */
  .wk__photo{order:0}
  .wk__route{order:1;margin:0 0 10px}
  .wk__map{order:2}
  .wk__side{order:3;display:flex;flex-direction:column}
  .wk__desc{order:4;margin-top:4px}
  .wk__card--adres{order:1}
  .wk__card--tijden{order:2}
  .wk__back{order:3;margin-top:0}
}
.docloc--showrooms{grid-template-columns:repeat(3,1fr);margin-top:8px;padding-bottom:56px}
@media(max-width:980px){.docloc--showrooms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.docloc--showrooms{grid-template-columns:1fr}}
/* Uitlijning/spacing gelijktrekken: de CMS-kaarten verschilden per stad (wisselende celruimte,
   en twee afbeeldingen — het NL-kaartje in de tabel + de winkelfoto eronder). Hier overal
   dezelfde maten en uitlijning, en de winkelfoto onderaan elke kaart uitgelijnd. */
.docloc--showrooms .docloc__item{display:flex;flex-direction:column}
.docloc--showrooms .docloc__item table{width:100%;border-collapse:collapse;margin:0 0 14px}
.docloc--showrooms .docloc__item td,
.docloc--showrooms .docloc__item th{padding:3px 8px 3px 0;vertical-align:top}
/* NL-kaartje (in de tabel): vaste breedte zodat naam/adres overal gelijk beginnen */
.docloc--showrooms .docloc__item table img{width:84px;height:auto;margin:0 10px 0 0}
/* winkelfoto (directe child, ná de tabel): vol breed, vaste hoogte, onderaan uitgelijnd */
.docloc--showrooms .docloc__item > img{width:100%;height:150px;object-fit:cover;border-radius:8px;display:block;margin-top:auto}

/* Contactpagina (2026-07-29): de introtekst loopt over de volle breedte; daaronder staan de
   bedrijfsgegevens ("A-Meubel B.V") en het contactformulier NAAST elkaar. De showroomkaarten
   volgen daar weer onder, ook over de volle breedte van de contentkolom. */
/* 2026-07-30 herbouw contactpagina: formulier breed (links), gegevens smal (rechts) */
/* 07-08-2026 (David): op DESKTOP dezelfde volgorde als op telefoon — kanaalkaarten, dan de
   showrooms, dan pas het contactformulier en de bedrijfsgegevens. Tot nu toe stond het formulier
   in een rechterkolom náást de introtekst (opzet 29-07) en dus bóven de winkels.
   Zelfde mechaniek als mobiel al gebruikte: .prose--contact wordt een flexkolom, .contact-split
   lost op in die kolom (display:contents) en de vier blokken krijgen een `order`. Daarmee is er
   nog maar één volgorde-definitie voor alle schermen in plaats van twee die uiteen kunnen lopen. */
.prose--contact{display:flex;flex-direction:column}
.prose--contact .contact-channels{order:1}
.prose--contact .contact-visit{order:2}
.prose--contact .contact-split{display:contents}
.prose--contact .contact-split__form{order:3;margin-top:26px}
.prose--contact .contact-split__gegevens{order:4;margin-top:18px}
.contact-split{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start;margin-top:26px}
/* Kanaalkaarten bovenaan — zelfde kaartstijl als het contactblok op de Klantenservice-hub */
.contact-channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 4px}
/* Administratieve CMS-gegevens (KVK/IBAN/BTW) gedempt onder de contactcard */
.contact-admin{margin-top:14px;font-size:12.5px;color:#5c6670;line-height:1.6}
.contact-admin p{margin:0 0 4px}
/* Showroom-sectie met eigen kop; de parkeer/OV-tekst (CMS) gedempt onder de kaarten */
.contact-visit{margin-top:38px}
.contact-visit__title{font-size:22px;font-weight:800;color:var(--blue-dark);margin-bottom:4px}
.contact-visitinfo{margin-top:20px;font-size:13.5px;color:#5c6670;line-height:1.65;max-width:900px}
.contact-split__gegevens > h2:first-child,
.contact-split__form .form-wrap h2{margin-top:0}
.contact-split__gegevens .contactcard{max-width:none;margin-top:12px}
.contact-split__form .form-wrap{margin-top:0}
@media(max-width:1100px){
  /* naast de zijnav is de contentkolom te smal voor twee kolommen -> weer onder elkaar */
  .contact-split{grid-template-columns:1fr;gap:8px}
  .contact-channels{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Contactpagina op telefoon (2026-07-29, David): elke vestiging ingeklapt achter een oranje balk
   met de plaatsnaam — tikken toont adres + openingstijden. Daaronder eerst het contactformulier en
   pas daarna de bedrijfsgegevens. Op desktop verandert er niets: de balken zijn verborgen, de
   kaarten staan gewoon open en de twee kolommen blijven zoals ze zijn. */
@media(max-width:640px){
  .docloc--collapsible{gap:8px;margin-top:16px}
  .docloc--collapsible .docloc__item{padding:0;border:0;background:none;border-radius:0}
  .docloc--collapsible .docloc__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:13px 16px;border:0;border-radius:4px;background:var(--orange);color:#fff;
    font-size:15px;font-weight:600;text-align:left;cursor:pointer;font-family:inherit}
  /* 2026-07-30 (David): pijl groter en vetter */
  .docloc--collapsible .docloc__toggle i{font-style:normal;font-size:26px;font-weight:900;line-height:1;transform:translateY(-3px);transition:transform .15s}
  .docloc--collapsible .docloc__item.is-open .docloc__toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .docloc--collapsible .docloc__item.is-open .docloc__toggle i{transform:rotate(180deg) translateY(-3px)}
  .docloc--collapsible .docloc__body{display:none}
  .docloc--collapsible .docloc__item.is-open .docloc__body{display:block;border:1px solid var(--line);
    border-top:0;border-radius:0 0 4px 4px;background:#fff;padding:12px 14px}
  /* volgorde op telefoon (2026-07-30 herbouw): kanaalkaarten -> showroombalken (in de
     bezoek-sectie, incl. kop en parkeer/OV-tekst) -> contactformulier -> bedrijfsgegevens */
  /* 07-08: de volgorde staat nu buiten deze media-query (één definitie voor alle schermen);
     hier blijven alleen de krappere mobiele marges over. */
  .prose--contact .contact-visit{margin-top:16px}
  .prose--contact .contact-split__form{margin-top:20px}
  .prose--contact .contact-split__gegevens{margin-top:16px}
  /* 2026-07-30 (David): mobiel zo compact mogelijk — kleinere gaps/padding tussen de secties */
  .contact-channels{gap:8px;margin:0}
  .contact-channels .ksvc-contact__way{padding:11px 14px}
  /* 2026-07-30 (David, ronde 2): subtekst uit de 4 kanaalkaarten (nummer/mail staat al in de
     link-actie zelf) → kaarten half zo hoog; en de bezoek-sectie er dichter op. */
  .contact-channels .ksvc-contact__way span{display:none}
  .prose--contact .contact-visit{margin-top:8px}
  .contact-visit__title{margin-bottom:0}
  .docloc--collapsible.docloc{margin-top:10px}
  .docpage{padding-bottom:28px}
}

/* Contactpagina: compacte gegevens (locatie/telefoon/e-mail) i.p.v. de showroom-grid */
.contactcard{margin-top:22px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px 20px;max-width:460px}
.contactcard__row{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.contactcard__row:last-child{border-bottom:0}
.contactcard__lbl{flex:0 0 90px;font-weight:700;color:var(--blue);font-size:13.5px}
.contactcard__val{font-size:14px;color:var(--text);line-height:1.5}
.contactcard__val a{color:var(--orange);font-weight:600;text-decoration:none}
.contactcard__val a:hover{text-decoration:underline}

/* Favorieten stap 2: deel/mail-melding + "Mail mijn favorieten"-formulier */
.fav-notice{margin:0 0 18px;padding:12px 16px;border-radius:8px;font-size:14px}
.fav-notice--ok{background:#eaf6ec;color:#1e6b2e;border:1px solid #bfe3c6}
.fav-notice--err{background:#fdeceb;color:#a12622;border:1px solid #f2c6c3}
.fav-sharebox{margin-top:34px;padding:22px;background:#f7f5f2;border-radius:12px;max-width:560px}
.fav-sharebox__title{margin:0 0 6px;font-size:18px}
.fav-sharebox p{margin:0 0 14px;font-size:14px;color:#555}
.fav-shareform{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fav-shareform__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* visueel verborgen, wel voorleesbaar */
.fav-shareform__input{flex:1 1 220px;border:1px solid #ccc;border-radius:24px;padding:10px 16px;font:inherit;font-size:14px;min-width:0}

/* ==== 2026-07-21 David mobiel-ronde ==== */
/* mobiel-1: Trustpilot-balk direct onder de header op mobiel; desktop verborgen,
   en het exemplaar ín de homepage-pills-balk verdwijnt op mobiel (anders dubbel). */
.tp-bar--mobiletop{display:none}
@media(max-width:760px){
  .tp-bar--mobiletop{display:flex;align-items:center;justify-content:center;gap:10px;
    padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}
  .catpills--home .tp-bar{display:none}
}
/* mobiel-3: "100% Laagste Prijsgarantie van Nederland" overal als eerste USP op de PDP
   (alleen mobiel); de oude "Laagste prijs van Nederland"-regel daar verbergen (dubbel). */
.usp-first-mobile{display:none !important}
/* PDP-buybox: usp-first is niet meer apart vet — álle buybox-USP's zijn vet (David 23-07) */
@media(max-width:760px){
  .usp-first-mobile{display:flex !important;font-weight:700}
  .pdp-usps .usp-lp{display:none}
}
/* (stoel-contain staat nu globaal bij .cartline__img → geldt desktop + mobiel) */

/* 2026-07-22 (David): banken-collectietegel — portretfoto past in het kader i.p.v. afgesneden */
.collection--fit{background-size:contain !important;background-color:#f4f6f8;background-repeat:no-repeat}
/* 2026-07-22 (David zoeken fool-proof): 0-resultaten-vangnet */
.db3z-empty{margin-top:18px}
.db3z-empty__tips{margin:0 0 26px;padding-left:20px;font-size:14px;line-height:1.9;color:var(--text)}
.db3z-empty__tips a{color:var(--orange);font-weight:600;text-decoration:underline}
.db3z-empty__heading{font-size:19px;font-weight:800;color:var(--blue);margin:0 0 14px}

/* ===== 2026-07-24 (David R2): mobiele configurator — geen ongewenst inzoomen/glitchen.
   iOS zoomt automatisch in op form-controls met font-size < 16px (o.a. de optie- en
   type-filter-selects op de PDP stonden op 12.5-14px) en dubbel-taps triggeren zoom.
   touch-action:manipulation laat scrollen en pinch-zoom op de pagina intact, maar
   schakelt de dubbel-tap-zoom op interactieve elementen uit. */
a, button, label, select, .ptabs__tab, .gallery__slide, .gallery__thumb,
.cfg-opst-card, .cfg-typebtn, .cfg-colourpick, .cfg-pick, .cfg-filter__head,
#ptabs, .ptabs__panel, .cfg-opstellingen, .cfg-typebtns { touch-action: manipulation }
/* 2026-07-24 (David R2, "zoomt eindeloos in bij scrollen/selecteren"): iOS start bij een
   veeg die op selecteerbare tekst begint TEKSTSELECTIE met het meebewegende vergrootglas
   (de loep) — dat oogt als eindeloos inzoomen en bestaat niet in Chrome(-emulatie).
   De configurator-UI is bedien-, niet kopieertekst: selectie + callout + grijze tap-flits
   uit op de interactieve elementen. Gewone tekst (beschrijvingen/specs) blijft gewoon
   selecteerbaar. */
.ptabs__tab, .cfg-opst-card, .cfg-opst-card *, .cfg-typebtn, .cfg-colourpick, .cfg-pick,
.cfg-filter__head, .cfg-colour, .cfg-option__label, .gallery__slide, .gallery__thumb, .qty, .qty * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 767px) {
  /* !important is hier bewust: de klasse-regels (.cfg-option__select 13.5px, .cfg-select
     select 14px, .field select 13px, .toolbar__sort select 12.5px) winnen anders op
     specificiteit en dan zoomt iOS alsnog in bij focus (de 24-07-fix miste daardoor). */
  select, textarea, .qty input,
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"] { font-size: 16px !important }
}

/* Outlet-badge in de oranje uitklapbalk op /over-ons/contact en /showrooms (07-08-2026).
   De balk is volle breedte, dus er is ruimte naast de naam; de badge is bewust een maatje
   kleiner dan de baltekst (15px) en wrapt desnoods mee in plaats van af te kappen. */
.docloc__badge{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px;
  line-height:1.5;vertical-align:middle;white-space:nowrap}
@media(max-width:420px){ .docloc__badge{font-size:10px;padding:1px 6px;margin-left:6px} }
/* De naam + badge samen mogen over twee regels; de balk groeit dan mee in plaats van te knellen. */
.docloc--collapsible .docloc__toggle > span,
.docloc--showrooms .docloc__toggle > span{display:inline-block;line-height:1.35}

/* ===== 2026-07-24 (David R3): showrooms-kaarten op telefoon ingeklapt met uitklapknop */
.docloc__toggle{display:none}
@media (max-width: 767px) {
  .docloc--showrooms .docloc__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:0;padding:2px 0;font:inherit;font-size:15px;font-weight:700;color:var(--text);cursor:pointer}
  .docloc--showrooms .docloc__toggle i{font-style:normal;color:var(--orange);font-size:18px;line-height:1;transform:translateY(-2px);transition:transform .15s}
  .docloc--showrooms .docloc__item.is-open .docloc__toggle i{transform:rotate(180deg) translateY(-2px)}
  .docloc--showrooms .docloc__body{display:none;margin-top:10px}
  .docloc--showrooms .docloc__item.is-open .docloc__body{display:block}
}

/* ===== 2026-07-24 (David R8): lightbox — pinch-zoom + pan + swipe op mobiel */
.lightbox__img{touch-action:none;will-change:transform;user-select:none;-webkit-user-select:none}

/* ===== 2026-07-24 (David R2, ZESDE laag — de echte dader): de kleurswatches vergroten
   op :hover naar 2x (grid 1.5x + schaduw + tooltip). Op iOS PLAKT :hover bij aanraking:
   al scrollend/kiezend door de keuze-sectie zoomt swatch na swatch op onder je vinger =
   "eindeloos inzoomen, alleen in de keuze-sectie". Muis-emulatie (Chrome DevTools) heeft
   nette hover en toonde het dus niet. Op apparaten zonder echte hover gaan alle
   hover-vergrotingen van de configurator uit; de gewone tap-selectie blijft. */
@media (hover: none) {
  .cfg-colour:hover .cfg-colour__dot,
  .cfg-colls--grid .cfg-colour:hover .cfg-colour__dot { transform: none; box-shadow: none; border-color: inherit }
  .cfg-colourpick--dot:hover { transform: none }
  .cfg-pick__media--photo:hover::after { opacity: 0; transform: none }
  .cfg-colls--grid .cfg-colour:hover::before { opacity: 0 }
}

/* ===== 2026-07-24 (David): openingstijden op mobiel als horizontale per-showroom-slider
   (menu-pagina + homepage; zelfde partial). Native scroll-snap = swipen zonder JS;
   kaartbreedte 78% laat de volgende kaart alvast zien (swipe-affordance). Desktop
   toont ongewijzigd de volledige tabel. */
.hours__slider{display:none}
@media(max-width:760px){
  /* 07-08-2026 (melding David: scrollen hapert op mobiel). De slider staat er sinds 24-07 met
     `scroll-snap-type: x mandatory`. Bij MANDATORY moet de browser na elke aanraking naar een
     snap-punt springen, en een verticale veeg die op de slider begint wordt daardoor op sommige
     mobiele browsers opgeslokt: de pagina blijft staan. Drie aanpassingen, geen scroll-hack:
       - `proximity` i.p.v. `mandatory`: het snappen blijft, maar de browser mag de veeg loslaten;
       - `touch-action: pan-x pan-y`: verticaal pannen expliciet toestaan i.p.v. op de standaard
         vertrouwen (die met snap per engine anders uitpakt);
       - `overscroll-behavior-x: contain`: een horizontale veeg die het einde bereikt slaat niet
         door naar de pagina, zonder verticaal iets te blokkeren.
     De badge-commit van vandaag (c9b50e3) is NIET de oorzaak: die raakt alleen .hours__city*,
     geen enkele overflow-/positie-/scrolleigenschap — nagemeten in de diff en in de DOM. */
  /* 07-08-2026, tweede ronde (David: "horizontaal slepen kan niet meer"). In de eerste ronde zette
     ik hier drie dingen neer om het VERTICALE vegen te bevrijden. Twee daarvan mogen weg, want ze
     bemoeien zich met een gebaar dat de browser zelf prima afhandelt:
       - `touch-action: pan-x pan-y` — dit ziet eruit als "beide richtingen toestaan", maar het
         vervangt de standaardwaarde `auto` en neemt daarmee het slim-schakelen tussen assen uit
         handen. Weg; `auto` doet precies wat we willen.
       - `overscroll-behavior-x: contain` — bedoeld tegen doorschieten, maar het grijpt in op
         dezelfde gebaarafhandeling. Ook weg; er is hier niets om tegen te beschermen.
     Wat blijft is de échte oorzaak van de eerste klacht: `mandatory` -> `proximity`. Daarmee mag
     de browser een veeg loslaten in plaats van hem naar een snap-punt te dwingen, en werken
     verticaal én horizontaal allebei met het native gedrag.
     De kaarten staan op 74% (was 78%): een grotere kier naar de volgende kaart maakt zichtbaar
     dát er meer winkels zijn — dat is de affordance, niet een extra script. */
  .hours__slider{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:10px;padding:14px}
  .hours__slider::-webkit-scrollbar{display:none}
  .hours__slide{flex:0 0 74%;scroll-snap-align:center;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:12px 14px;min-width:0}
  .hours__slide-stad{display:block;color:var(--orange);font-size:15px;font-weight:800;text-decoration:none;
    margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hours__slide-tabel{width:100%;border-collapse:collapse;font-size:13px}
  .hours__slide-tabel th{text-align:left;font-weight:600;color:var(--text);padding:6px 0;width:52%}
  .hours__slide-tabel td{text-align:right;padding:6px 0;color:var(--text);white-space:nowrap}
  .hours__slide-tabel tr{border-bottom:1px solid var(--line)}
  .hours__slide-tabel tr:last-child{border-bottom:0}
  .hours__slide-tabel .hours__today th,.hours__slide-tabel .hours__today td{color:var(--orange);font-weight:700}
  /* de tabel in .prose (openingstijden-pagina): stadslink niet oranje-onderstreept laten overrulen */
  .prose .hours__slide-stad{color:var(--orange);text-decoration:none}
}

/* ===== 2026-07-24 (David): /over-ons/openingstijden opgeknapt — pagina oogde kaal.
   Desktop-tabel: zebra-striping + zachte oranje tint op de vandaag-rij (was alleen
   tekstkleur). Mobiel: kopje boven de stad-knoppenrij; slider-kaarten iets zachter. */
.hours__table tbody tr:nth-child(even){background:#fafbfc}
.hours__table tbody tr.hours__today th,.hours__table tbody tr.hours__today td{background:#fff7f2}
.hours__table tbody tr.hours__today th{border-left:3px solid var(--orange);padding-left:13px}
.hours__cities-kop{display:none}
@media(max-width:760px){
  .hours__cities-kop{display:block;margin:2px 16px 0;font-size:12.5px;font-weight:700;color:#687889;
    text-transform:uppercase;letter-spacing:.5px}
  .hours__slide{box-shadow:0 1px 4px rgba(8,18,33,.05)}
  .hours__slide-tabel th{color:#52585f}
}

/* R5: verduidelijking bij het kleurfilter (één keuze mogelijk) */
.filter__title-sub{font-size:11px;font-weight:600;color:#8a93a0;text-transform:none;letter-spacing:0}

/* ============================================================================
 * Serviceformulier — design B (2026-07-24).
 * Het serviceformulier is gedeelde legacy-markup (includes/service.php) die in
 * design A door website.css (.content-wrapper .service-*) wordt gestyled. Design
 * B laadt die CSS niet, waardoor de stap-tabs, velden, upload-blokken en vooral
 * de "Door naar de volgende stap"-knop ongestyled binnenkwamen (de knop is een
 * <div> en leek daardoor platte tekst). Deze sectie stylet exact die legacy-
 * klassen in de v3-look. Foutmeldingen zelf verschijnen als gecentreerde modal
 * via de confirm_message-shim in main.js (geen footer-dump). Alle selectors zijn
 * service-specifiek (#service-*/.service-*/.receipt-*/#send_form) → raken niets
 * anders op design B.
 * ========================================================================== */

/* De template-divs van de meldingen nooit inline in de pagina tonen; de shim
 * leest hun innerHTML en toont die in een modal (belt-and-suspenders naast de
 * inline display:none in de markup). */
#error-pd,#error-cache-full,#error-upload-generic,#error-filesize,#error-fileformat,
#error-csrf,#error-submit,#error-it,#agreement,#agreement-confirm,
#receipt-loading,#image-loading,#service-loading{display:none !important}

/* Stap-indicatoren */
#service-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px;padding:0}
#service-tabs .service-tab-item{
  flex:1 1 auto;text-align:center;padding:10px 14px;border-radius:9px;
  background:var(--gray-bg,#f3f4f5);border:1px solid var(--line,#e6e8eb);
  color:var(--muted,#6a7078);font-weight:600;font-size:14px;line-height:1.25}
#service-tabs .service-tab-item.active{
  background:var(--orange,#c45519);border-color:var(--orange,#c45519);color:#fff}

/* Velden (alleen binnen de service-stappen; .field bestaat ook in de header-zoekbalk) */
#service-personal-details .field,#service-items .field,#service-validation .field{margin-bottom:16px}
#service-personal-details .field label,#service-items .field label{
  display:block;margin-bottom:6px;font-weight:600;color:var(--text,#3a3f45);font-size:14px}
#service-personal-details .field label em,#service-items .field label em{
  color:var(--orange,#c45519);font-style:normal}
#service-personal-details .field input,#service-personal-details .field textarea,
#service-items .field input,#service-items .field select,#service-items .field textarea,
#service-items #item_first_category,#service-items #item_first_parts,#service-items #item_first_description{
  display:block;width:100%;padding:11px 13px;background:#fff;color:var(--text,#3a3f45);
  border:1px solid var(--line,#e6e8eb);border-radius:8px;font:inherit;font-size:15px;
  -webkit-appearance:none;appearance:none}
#service-items #item_first_description,#service-personal-details .field textarea{min-height:120px;resize:vertical}
#service-personal-details .field input:focus,#service-items .field input:focus,
#service-items select:focus,#service-items textarea:focus,#service-personal-details .field textarea:focus{
  outline:none;border-color:var(--orange,#c45519);box-shadow:0 0 0 3px rgba(196,85,25,.12)}

/* Upload-blokken (aankoopbewijs / foto's) — duidelijk klikbare tegels */
.receipt-image,.service-item-image,.service-add-item,.validation-edit{
  display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;
  background:var(--blue-tint,#eef3fa);border:1px dashed #b9c6d8;border-radius:9px;
  color:var(--blue-dark,#16406f);font-weight:600;transition:.2s}
.receipt-image:hover,.service-item-image:hover,.service-add-item:hover,.validation-edit:hover{
  background:#e2ecf8;border-color:var(--blue,#0065b3)}
.receipt-image .receipt-image-field,.service-item-image .service-item-image-field{flex:1 1 auto}
.service-add-item{margin:6px 0 4px;justify-content:center;color:var(--orange,#c45519);
  background:#fbeee6;border-color:#e6b48f}
.service-add-item:hover{background:#f7e2d2;border-color:var(--orange,#c45519)}
#item_first_picture_container,.service-item ul{list-style:none;padding-left:0;margin:8px 0 0}
.receipt-note{display:flex;gap:8px;margin:12px 0;color:var(--muted,#6a7078);font-size:13px;line-height:1.5}
.receipt-note .receipt-note-star{font-weight:700}

/* Samenvatting/validatie (stap 3) */
#service-validation .validation-container{
  background:#fff;border:1px solid var(--line,#e6e8eb);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.validation-edit{display:inline-flex;flex:0 0 auto;padding:8px 14px;margin-top:8px}

/* "Door naar de volgende stap" / "Doorgaan met verzenden" — echte knop */
.service-next-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;padding:14px 28px;border-radius:10px;cursor:pointer;
  background:var(--gray-bg,#f3f4f5);border:1px solid #cfd6df;color:var(--text,#3a3f45);
  font-weight:700;font-size:15px;line-height:1;transition:.2s;user-select:none;
  box-shadow:0 1px 0 rgba(0,0,0,.04)}
.service-next-button:hover{border-color:#b7c0cb;background:#eaedf1}
.service-next-button .next-button-bg{display:none}
.service-next-button .next-button-txt{display:inline-block}
.service-next-button::after{content:"\2192";font-size:17px;line-height:1}
/* actieve (gevalideerde) + de definitieve verzendknop = oranje CTA */
.service-next-button.allowed,#send_form.service-next-button{
  background:var(--orange,#c45519);border-color:var(--orange,#c45519);color:#fff;
  box-shadow:0 8px 20px rgba(196,85,25,.28)}
.service-next-button.allowed:hover,#send_form.service-next-button:hover{
  background:var(--orange-dark,#b04d17);border-color:var(--orange-dark,#b04d17)}

@media (max-width:768px){
  #service-tabs{flex-direction:column;gap:6px}
  #service-tabs .service-tab-item{flex:1 1 100%}
  .service-next-button,#send_form.service-next-button{width:100%}
}

/* ===== Categorie-toolbar mobiel: Filters + aantal + sortering op één regel (2026-07-30) =====
   De volle-breedte Filters-pill (aside) verdwijnt ≤640px; daarvoor in de plaats een compacte
   knop ÍN de toolbar. Het "Sorteer op:"-label wordt daar verborgen (font-size:0-truc), de
   select blijft. Staat NA het 480px-blok in dit bestand, dus deze regels winnen daar. */
.toolbar__filters{display:none}
@media(max-width:640px){
  .filters__toggle{display:none}
  .toolbar{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin-bottom:14px}
  .toolbar__filters{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    background:var(--blue);color:#fff;border:0;border-radius:20px;padding:9px 16px;
    font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .toolbar__filters span{transform:translateY(-2px)}
  .toolbar__count{flex:0 0 auto;white-space:nowrap;margin:0}
  .toolbar__right{flex:0 1 auto;min-width:0}
  .toolbar__sort{gap:0;font-size:0}
  .toolbar__sort select{font-size:12.5px;padding:8px 12px;max-width:100%}
}

/* ===== Categorie-intro inklapbaar op mobiel (2026-07-30) =====
   Volledige tekst blijft in de DOM (SEO); ≤640px geklemd op 2 regels + Lees meer-knop.
   Desktop: knop verborgen, geen clamp. (3→2 regels op verzoek David, 30-07.) */
.pagehead__intromore{display:none}
@media(max-width:640px){
  .pagehead__introwrap:not(.is-open) .pagehead__intro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .pagehead__intromore{display:inline-block;margin-top:6px;padding:0;border:0;background:none;
    font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:inherit}
}

/* ===== Klantenservice-hub (/klantenservice), 2026-07-30 ===== */
.pagehead--ksvc{text-align:center;padding:26px 0 8px}
/* .pagehead__intro heeft max-width:680px zonder auto-marge — blok zelf ook centreren */
.pagehead--ksvc .pagehead__intro{margin-left:auto;margin-right:auto}
.ksvc-section{margin:26px 0 34px}
.ksvc-section__title{font-size:22px;font-weight:800;color:var(--blue-dark);margin-bottom:16px}
.ksvc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ksvc-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 18px;text-decoration:none;color:var(--text);transition:box-shadow .15s,border-color .15s}
.ksvc-card:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.ksvc-card__label{font-size:15.5px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.ksvc-card__sub{font-size:13px;color:#5c6670;line-height:1.45}
.ksvc-card--topic{padding:30px 18px}
.ksvc-contact{background:var(--blue-tint);border-radius:12px;padding:26px 24px;margin:0 0 40px}
.ksvc-contact p{margin:0 0 14px;font-size:14.5px}
.ksvc-contact__ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ksvc-contact__way{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--text)}
.ksvc-contact__way:hover{border-color:var(--blue)}
.ksvc-contact__way strong{color:var(--blue);font-size:14.5px}
.ksvc-contact__way span{font-size:13px;color:#5c6670}
@media (max-width:900px){.ksvc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .ksvc-grid{grid-template-columns:1fr}
  .ksvc-card{padding:20px 16px}
  .ksvc-contact__ways{grid-template-columns:1fr}
  .pagehead--ksvc{text-align:left;padding-top:14px}
}

/* ===== Mobiel: minimale ruimtes tussen de kop-secties (2026-07-30, David) =====
   Kruimel → titel → intro → toolbar → chips → grid strakker op elkaar. Site-breed
   binnen design B (zelfde compact-wens als eerder op contact/infopagina's); staat
   aan het EIND van het bestand en wint dus van eerdere mobiele blokken. */
@media(max-width:640px){
  .breadcrumbs{padding:4px 0 2px}
  .pagehead{padding:2px 0 8px}
  .pagehead__title{font-size:26px;margin-bottom:4px}
  .pagehead__intromore{margin-top:2px}
  .toolbar{margin-bottom:10px}
  .filter-chips{margin:-2px 0 10px}
  .cat-layout{padding-bottom:30px}
}

/* ===== Filter-UX v2 (2026-07-30, David): badge + prijs-presets + sticky Toon-knop ===== */
/* badge met het aantal actieve filters, op beide Filters-knoppen (blauwe achtergrond) */
.filters__badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  margin-left:7px;padding:0 5px;border-radius:10px;background:#fff;color:var(--blue);
  font-size:11.5px;font-weight:800;line-height:1}
/* prijs-presets: één tik i.p.v. typen */
.fprice-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fprice-preset{border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--text);
  font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;cursor:pointer}
.fprice-preset:hover{border-color:var(--blue);color:var(--blue)}
.fprice-preset.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
/* sticky "Toon X items" onderin het paneel — alleen in het toggle-regime (≤980px) */
.filters__show{display:none}
@media(max-width:980px){
  .filters.is-open .filters__show{display:block;position:sticky;bottom:10px;width:100%;
    margin-top:14px;padding:13px 20px;border:0;border-radius:24px;background:var(--orange);
    color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .filters__show:active{background:var(--orange-dark)}
}

/* ===== Filtergroepen inklapbaar op mobiel/tablet (2026-07-30, David, filter-UX #4) =====
   Kopjes zijn buttons; ≤980px klapt elke groep in (content verborgen tot .is-open), met
   chevron + teller van actieve keuzes per groep. Desktop: alles gewoon open, knop inert. */
.filter__head{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;
  font:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:default}
.filter__chev{display:none}
.filter__gcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:11px;font-weight:800;line-height:1}
@media(max-width:980px){
  .filter__head{cursor:pointer}
  .filter__chev{display:inline-block;margin-left:auto;font-style:normal;line-height:1;transform:translateY(-3px);transition:transform .15s}
  .filter.is-open .filter__chev{transform:rotate(180deg) translateY(-3px)}
  .filters__panel .filter:not(.is-open):not(.filter--usp) > :not(.filter__title){display:none}
}

/* Filterpaneel dat ≤640px door JS achter de toolbar is geplaatst: wat lucht naar de chips/grid */
@media(max-width:640px){
  #db3cResults .filters.is-open{margin:2px 0 14px}
}

/* Filterboxen compacter in het accordion-regime (2026-07-30, David) */
@media(max-width:980px){
  .filters__panel .filter{padding:12px 16px;margin-bottom:8px;border-radius:10px}
  .filters__panel .filter:not(.is-open) .filter__title{margin-bottom:0}
}

/* ===== Ankernavigatie (2026-07-30, David): #contact-klik moet perfect uitkomen =====
   html{scroll-behavior:smooth} scrollt al soepel, maar zonder scroll-marge verdween de
   formulierkop achter de sticky chrome (topbar 40px + header ~80px op mobiel; desktop
   alleen de header). Geldt voor alle .anchor-ankers (contact/service-formulieren). */
.anchor{scroll-margin-top:100px}
@media(max-width:980px){
  .anchor{scroll-margin-top:132px}
}

/* Showroom-popup (2026-07-30, David): top-5-lijst met afstanden */
.sr-list{display:flex;flex-direction:column;gap:8px}
.sr-list .sr-card--first{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}

/* 2026-08-01 (David): "Adressen showrooms" in de desktop-hoofdnav + anker op de contactpagina.
   Desktop-only: de hele .mainnav verdwijnt al ≤760px, maar we verbergen het item ook expliciet
   op B's mobiele breakpoint (dubbele borging, geen servercode i.v.m. device-blinde cache).
   scroll-margin-top ≈ sticky headerhoogte + topbar-marge, zodat de kop na de ankerklik netjes
   ónder de sticky header in beeld komt (topbar is op mobiel 44px hoog, zie .header{top:44px}). */
@media(max-width:760px){
  .mainnav__adressen{display:none}
}
#woonwinkels{scroll-margin-top:130px}

/* 2026-08-01 (David, vervolg): "Adressen showrooms" brak over twee regels.
   Oorzaak (doorgerekend met de echte Poppins-700-metrics, upem 1000):
   .header__inner is een flexrij van logo (205px) · .mainnav · .search (basis 320px) ·
   .header__icons (106px) met 3×26px gap = 389px vast. De containerbreedte is
   min(viewport,1357) − 44. Met vier nav-items à 15px is de nav 610px breed, dus
   nav+zoekbalk vroeg 930px terwijl er op 1440/1920px 924px vrij is en op 1280px 847px.
   Tekort ⇒ .mainnav (flex-shrink standaard 1) kromp en het langste item brak af.

   Fix, uitsluitend desktop:
   - de drie overige items van 15 naar 13,5px (−10%); "Adressen showrooms" houdt exact 15px;
   - white-space:nowrap op het item zelf als harde borging tegen elke toekomstige afbreking;
   - .mainnav krijgt flex-shrink:0, zodat het restanttekort landt bij .search — die is met
     flex:0 1 320px expliciet als krimpbaar ontworpen, de nav niet.
   Resultaat (nav = 167 + 3×30 gap + 3×~105,7 = 575px):
     1920/1440px → 1313px content: nav+zoek 895px, 29px vrij, zoekbalk blijft 320px;
     1280px      → 1236px content: zoekbalk 272px (263px met scrollbar);
     1240px      → 1196px content: zoekbalk 232px — de ondergrens die we accepteren.

   Waarom hieronder verbergen i.p.v. pas ≤760px: met nowrap is de minimale nav-breedte
   ~506px. Onder ~1210px past logo+nav+zoekveld(min ~215px)+iconen niet meer in de
   container, en omdat html,body overflow-x:clip hebben zou dat het winkelwagen-icoon
   stilletjes wegknippen op tablets/kleine laptops (1024, 1194). Daarom toont het item
   zich vanaf 1240px; daaronder is de header exact zoals vóór deze wijziging (drie items
   op 15px). De ≤760px-regel hierboven blijft staan voor het mobiele menu. */
.mainnav__adressen{white-space:nowrap}
@media(max-width:1239.98px){
  .mainnav__adressen{display:none}
}
@media(min-width:1240px){
  .mainnav{flex-shrink:0;font-size:13.5px}
  .mainnav__adressen{font-size:15px}
}

/* 2026-08-03 (David, laptop-screenshot): categoriepillen boven de hero op laaggeschermde
   laptops. Doorgerekend met de eigen maten: topbar 44 + header 85 + hero padding-top 16 +
   hero-afbeelding 540 = 685px vóórdat de pillen beginnen; de balk zelf is ~94px (26+42+26).
   Op 1366x768 blijft na browserchrome ~658px viewport over — de balk valt dan volledig
   buiten beeld. Op 1440x900 is dat ~790px (met bladwijzerbalk ~760): net wel of net niet.
   Op 1920x1080 ~970px en staat hij ruim in beeld.
   Daarom: omdraaien zodra de viewport 900px of lager is, en alleen op desktopbreedte
   (>=1025px, dezelfde grens als de sticky-pillenregel hierboven). Onder die breedte is de
   hero 480px hoog en past de balk al; mobiel blijft bewust ongemoeid.
   Geen JS en geen CLS: de volgorde staat vast vanaf de eerste paint. De HTML-volgorde
   verandert niet, dus leesvolgorde en SEO blijven zoals ze waren. */
.home-top{display:contents}
@media (min-width:1025px) and (max-height:900px){
  .home-top{display:flex;flex-direction:column-reverse}
}

/* 2026-08-03 (David, Naarden-casus): balk boven het kleurenoverzicht zodra er op kleur
   gefilterd wordt. Bewust buiten het inklapbare filterpaneel en met een echte knop (44px
   raakvlak) — de meldingen kwamen van telefoons, waar het bestaande wis-kruisje ín het
   dichtgeklapte paneel niet te vinden was. */
.cfg-colourfilter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--blue-tint);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin:0 0 14px}
.cfg-colourfilter-bar[hidden]{display:none}
.cfg-colourfilter-bar__txt{font-size:14px;color:var(--text);flex:1;min-width:180px}
.cfg-colourfilter-bar__btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--orange);color:#fff;font:inherit;font-size:14px;font-weight:700;
  border-radius:22px;padding:11px 18px;min-height:44px}
.cfg-colourfilter-bar__btn:hover{background:var(--orange-dark)}
@media(max-width:760px){
  .cfg-colourfilter-bar{position:sticky;top:calc(85px + 8px);z-index:44}
  .cfg-colourfilter-bar__btn{width:100%;justify-content:center}
}

/* 2026-08-03: benoemde keuze per winkelwagenregel (opstelling + maten, stofnaam). Klein en
   rustig; op mobiel breekt de regel netjes af i.p.v. de smalle kolom op te rekken. */
.cartline__keuze{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.cartline__keuze-opst{color:var(--text);font-weight:600}
.cartline__keuze--stof span{color:var(--text)}
@media(max-width:760px){ .cartline__keuze{font-size:12.5px} }

/* 2026-08-03: keuzebevestiging in de kassasamenvatting. De kolom is smal, dus de tekst blijft
   klein en de staaltjes zijn 26px — herkenbaar maar ze duwen de kolom niet open. */
.miniline__body{min-width:0}
.miniline__keuze{margin:1px 0 0;font-size:12px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.miniline__thumbs{display:flex;gap:6px;margin-top:5px}
.miniline__thumb{width:26px;height:26px;border-radius:5px;border:1px solid var(--line);
  background-size:cover;background-position:center;flex-shrink:0}
.miniline__thumb--opst{background-size:contain;background-repeat:no-repeat;background-color:#fff}
@media(max-width:760px){ .miniline__thumb{width:24px;height:24px} }

/* 2026-08-03: het stofstaal is een rond staaltje van de stof zelf (zoals in design A en in
   de kleurenkiezer), niet een productfoto in die kleur. */
.cartline__thumb--staal{border-radius:50%;width:34px;height:34px;background-size:cover}
.miniline__thumb--staal{border-radius:50%}

/* 2026-08-05 (David): bevestigingsstap bij de kleurkeuze op mobiel, naar het model van
   design A (#colour-preview met Bevestigen/Annuleren). Vast onderin beeld: de stalenlijst is
   lang, dus een balk bij het staal zelf valt vaak buiten beeld. Alleen mobiel — desktop kiest
   direct, net als in A. */
.cfg-confirm{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;box-shadow:0 14px 40px rgba(8,18,33,.22)}
.cfg-confirm__media{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background-position:center;flex-shrink:0}
.cfg-confirm__txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:120px}
.cfg-confirm__txt b{font-size:14px;color:var(--text)}
.cfg-confirm__txt small{font-size:12px;color:var(--muted)}
.cfg-confirm__ok{border:0;cursor:pointer;background:var(--orange);color:#fff;font:inherit;
  font-size:14px;font-weight:700;border-radius:22px;padding:11px 20px;min-height:44px}
.cfg-confirm__ok:hover{background:var(--orange-dark)}
.cfg-confirm__no{border:0;background:none;cursor:pointer;font:inherit;font-size:13px;
  color:var(--muted);text-decoration:underline;padding:11px 4px;min-height:44px}
/* het aangetikte staal blijft zichtbaar gemarkeerd zolang de bevestiging openstaat */
.cfg-colour.is-pending{outline:3px solid var(--orange);outline-offset:2px}
@media(min-width:761px){ .cfg-confirm{display:none} }

/* 2026-08-05 (David, punt 6a): showroomblok bovenaan de contactpagina. Zelfde kaartstijl als
   de PDP-lijst (.sr-card bestaat al); alleen de wikkel en de knopmarge zijn nieuw. */
.contact-srblok{margin:0 0 22px}
.contact-srblok__hint{margin:12px 0 8px;font-size:13.5px;color:var(--muted)}
.contact-srblok .sr-list{max-height:none}

/* 2026-08-05 (David, punt 4): "Kies eerst een kleur"-dialoog. Zelfde rol als A's
   jconfirm-venster, in B's eigen stijl. Extra t.o.v. A: de gekozen opstelling met de oranje
   illustratie en een wijzig-knop. */
.cfg-kleurmodal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;
  justify-content:center;background:rgba(8,18,33,.55);padding:18px}
.cfg-kleurmodal__box{background:#fff;border-radius:14px;max-width:440px;width:100%;
  padding:22px 22px 18px;box-shadow:0 24px 60px rgba(8,18,33,.4)}
.cfg-kleurmodal__title{margin:0 0 8px;font-size:19px;color:var(--text)}
.cfg-kleurmodal__txt{margin:0 0 14px;font-size:14px;color:var(--muted);line-height:1.5}
.cfg-kleurmodal__opst{display:flex;align-items:center;gap:12px;background:var(--blue-tint);
  border-radius:10px;padding:10px 12px;margin:0 0 16px}
.cfg-kleurmodal__ill{width:56px;height:42px;flex-shrink:0;border-radius:6px;background:#fff;
  background-size:contain;background-position:center;background-repeat:no-repeat}
.cfg-kleurmodal__opsttxt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.cfg-kleurmodal__opsttxt small{font-size:11.5px;color:var(--muted)}
.cfg-kleurmodal__opsttxt b{font-size:14px;color:var(--text);overflow-wrap:anywhere}
/* maat van de gekozen opstelling in de kleurdialoog (2026-08-05, David) */
.cfg-kleurmodal__opstmaat{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cfg-kleurmodal__wijzig{border:1px solid var(--line);background:#fff;border-radius:18px;
  font:inherit;font-size:13px;padding:8px 14px;min-height:40px;cursor:pointer;color:var(--blue)}
.cfg-kleurmodal__btns{display:flex;gap:10px;flex-wrap:wrap}
.cfg-kleurmodal__ok{border:0;background:var(--orange);color:#fff;font:inherit;font-size:14px;
  font-weight:700;border-radius:22px;padding:12px 22px;min-height:44px;cursor:pointer;flex:1}
.cfg-kleurmodal__ok:hover{background:var(--orange-dark)}
.cfg-kleurmodal__no{border:0;background:none;font:inherit;font-size:13px;color:var(--muted);
  text-decoration:underline;padding:12px 6px;min-height:44px;cursor:pointer}

/* ---- Categorie-bolletjes (2026-08-05, David, punt 7) ----
   Zitmaxx-model: ronde lichtgrijze cirkel met de vrijstaande categoriefoto, naam eronder
   (mag over twee regels). De rij loopt bewust tot voorbij de schermrand door — het laatste
   bolletje half zichtbaar is de uitnodiging om te slepen — en heeft geen zichtbare scrollbar. */
/* De balk is sleepbaar; dat moet je kunnen zien. Twee middelen (2026-08-05, David):
   een zachte vervaging aan de kant waar nog content zit, en één korte nudge bij binnenkomst.
   De fades zijn overlays in de paginakleur (#fff) op de wrapper, met pointer-events:none —
   ze mogen nooit een klik op een bolletje opvangen. JS zet .has-left / .has-right. */
.catbubbles{margin:6px 0 18px;position:relative}
.catbubbles::before,
.catbubbles::after{content:'';position:absolute;top:0;bottom:0;width:52px;pointer-events:none;
  z-index:2;opacity:0;transition:opacity .18s ease}
.catbubbles::before{left:0;background:linear-gradient(to right,#fff 15%,rgba(255,255,255,0))}
.catbubbles::after{right:0;background:linear-gradient(to left,#fff 15%,rgba(255,255,255,0))}
.catbubbles.has-left::before{opacity:1}
.catbubbles.has-right::after{opacity:1}
.catbubbles__row{display:flex;gap:16px;overflow-x:auto;scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 4px;cursor:grab;
  -webkit-user-select:none;user-select:none}
/* geen native link-sleep (Chrome maakt anders een sleep-spook van de <a>) */
.catbubbles__row a{-webkit-user-drag:none}
.catbubbles__row::-webkit-scrollbar{display:none}
.catbubbles__row.is-dragging{cursor:grabbing;scroll-behavior:auto}
.catbubbles__row.is-dragging a{pointer-events:none}
.catbubble{flex:0 0 auto;width:88px;display:flex;flex-direction:column;align-items:center;
  gap:7px;text-decoration:none;color:var(--text)}
.catbubble__img{width:76px;height:76px;border-radius:50%;background:#f1f3f5;
  background-size:cover;background-position:center;border:2px solid transparent;
  transition:border-color .12s}
.catbubble__naam{font-size:12.5px;line-height:1.25;text-align:center;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catbubble:hover .catbubble__img{border-color:var(--line)}
.catbubble--active .catbubble__img{border-color:var(--orange)}
.catbubble--active .catbubble__naam{font-weight:700;color:var(--orange)}
@media(max-width:760px){
  .catbubbles{margin:4px -16px 14px}          /* van de schermrand af laten lopen */
  .catbubbles::before,.catbubbles::after{width:56px}   /* 06-08: breder, het signaal viel weg op mobiel */
  .catbubbles__row{gap:12px;padding-left:16px;padding-right:16px}
  .catbubble{width:76px}
  .catbubble__img{width:66px;height:66px}
  .catbubble__naam{font-size:11.5px}
}

/* ---- Showroomkaartje klikbaar (2026-08-05, David) ----
   De naam/adres/afstand-kolom is een <a> naar de winkelpagina en wordt met een
   ::after over de hele kaart uitgerekt; Route en Bel liggen daar met z-index
   bovenop en houden hun eigen gedrag. Geen JS, dus ook geen stopPropagation:
   het is gewoon HTML, dus middelklik/nieuw tabblad/toetsenbord werken mee. */
.sr-card{position:relative}
.sr-card__main{text-decoration:none;color:inherit}
.sr-card--link .sr-card__main::after{content:'';position:absolute;inset:0;border-radius:12px}
.sr-card--link{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.sr-card--link:hover{border-color:var(--orange);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.sr-card--link:hover .sr-card__name{text-decoration:underline}
.sr-card__links{position:relative;z-index:1}

/* Geruststelling onder de chip-rij bij een gekozen type (2026-08-05, David).
   Correctie na review: niet meer de gedempte hulptekst maar hetzelfde uiterlijk als de
   chips erboven — het is immers informatie over de gekozen filterstap. Wél zonder ×,
   zonder link en zonder hover: er valt niets weg te klikken. Anders dan een echte chip
   mag deze op smal scherm over twee regels, vandaar de ruimere line-height/padding en
   align-items:flex-start (een chip is altijd één regel en centreert daarom). */
.cat-typenote{margin:-8px 0 18px;max-width:100%}
.chip--info{cursor:default;line-height:1.35;padding:9px 14px;align-items:flex-start;white-space:normal}
.chip--info:hover{background:var(--blue-tint)}
/* Op een 360px-scherm loopt de zin met de gewone chip-maten net over drie regels;
   met iets minder padding en een halve punt kleiner past hij op twee. */
@media(max-width:420px){.chip--info{padding:8px 11px;font-size:12.5px}}

/* ---- Showroomkaartjes binnen .prose (2026-08-05, David) ----
   De lijst staat op /over-ons/contact ín <article class="prose">, en `.prose a`
   (0,1,1) wint van `.sr-card__route` (0,1,0). Gevolg: de Route-knop kreeg oranje
   tekst op een oranje vlak — onleesbaar, precies zoals David meldde — en "Bel"
   werd oranje in plaats van blauw. `.prose strong` deed hetzelfde met de
   vestigingsnaam. Exact dezelfde valkuil als `.prose a.db3o-btn` hierboven, dus
   hier op dezelfde manier teruggezet. In de PDP-popup speelde dit niet: die zit
   niet in .prose — vandaar dat alleen de contactpagina het liet zien. */
.prose .sr-card__main{color:inherit;font-weight:400;text-decoration:none}
.prose .sr-card__name{color:var(--blue)}
.prose .sr-card__route{color:#fff;text-decoration:none}
.prose .sr-card__call{color:var(--blue);text-decoration:none}

/* ---- Samenvatting in de toevoeg-popup (2026-08-05, David) ----
   Kaartje met foto links en de gemaakte keuzes rechts; links uitgelijnd, want een
   opsomming leest niet gecentreerd. De popup zelf (breedte, knoppen, sluiten) is
   ongewijzigd; alleen deze blok komt tussen titel en knoppen te staan. */
.cartpop__summary{margin:0 0 18px;text-align:left}
.cartpop__item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px}
.cartpop__thumb{flex:0 0 auto;width:74px;height:56px;border-radius:8px;background:#f1f3f5 center/cover no-repeat}
.cartpop__info{min-width:0;flex:1}
.cartpop__name{display:block;font-size:14.5px;font-weight:700;color:var(--blue);line-height:1.3;margin-bottom:5px}
.cartpop__row{display:flex;gap:6px;font-size:12.5px;line-height:1.45}
.cartpop__rowlabel{flex:0 0 auto;color:var(--muted)}
.cartpop__rowval{min-width:0;color:var(--text);overflow-wrap:anywhere}
.cartpop__price{margin-top:7px;font-size:15px;font-weight:800;color:var(--text)}
@media(max-width:420px){
  .cartpop__thumb{width:62px;height:48px}
  .cartpop__row{font-size:12px}
}

/* ---- Stofspecificaties bij een collectie (2026-08-05, David) ----
   Zelfde gedachte als design A (rond vraagteken bij de stofgroep), maar in B's stijl en
   met een klik in plaats van hover — hover bestaat niet op een telefoon. Het paneel klapt
   onder de kop open, binnen de bestaande collectiekaart; de swatch-rij eronder schuift
   gewoon mee en de kleurkeuze wordt niet geraakt. */
.cfg-coll__info{margin-left:7px;width:17px;height:17px;padding:0;border:1.5px solid var(--blue);
  border-radius:50%;background:#fff;color:var(--blue);font:inherit;font-size:11px;font-weight:700;
  line-height:1;cursor:pointer;vertical-align:middle;transition:background .12s,color .12s}
.cfg-coll__info:hover{background:var(--blue);color:#fff}
.cfg-coll__info[aria-expanded="true"]{background:var(--blue);color:#fff}
.cfg-coll__specs{margin:-6px 0 12px;padding:10px 12px;background:var(--blue-tint);
  border-radius:8px;font-size:12.5px;line-height:1.5;color:var(--text)}
.cfg-coll__specs[hidden]{display:none}

/* Veeg-indicator bij de bolletjesbalk (2026-08-06, David ronde 4). Inline SVG in de JS;
   hier alleen de plaatsing. Boven de bolletjes, onder de cookiebanner (die zit op 1000),
   en nooit klikbaar — de balk moet gewoon bruikbaar blijven terwijl het handje beweegt. */
.catbubbles__hand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;opacity:.75;transition:opacity .6s ease;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
@media(prefers-reduced-motion:reduce){.catbubbles__hand{display:none}}

/* ---- Outlet-showroomblok op de outlet-collectie (07-08-2026) --------------------------
   Zelfde opbouw als .sr-card (naam, adres, tijden links; Route/Bel rechts) maar server-side
   gerenderd en met eigen classnamen, zodat design A hetzelfde blok kan tonen. De variant
   --top staat bovenaan de outlet-vestigingspagina en is iets nadrukkelijker (accentrand). */
/* 07-08 (na visuele keuring David): geen eigen max-width/centrering meer. Het blok en de banner
   vullen de container waarin ze staan, zodat ze exact op dezelfde lijn liggen als de foto, de
   kaart en de tekstblokken. Zelf een breedte kiezen liep bij elke andere viewport uit de pas. */
.outlet-sr{margin:26px 0}
.outlet-sr__inner{width:100%}
.outlet-sr__card{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.outlet-sr--top .outlet-sr__card{border-color:var(--green);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.outlet-sr__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.outlet-sr__eyebrow{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--green)}
.outlet-sr__name{font-size:17px;font-weight:700;color:var(--blue);text-decoration:none}
a.outlet-sr__name:hover{text-decoration:underline}
.outlet-sr__addr,.outlet-sr__hours{font-size:13.5px;color:#5b6470}
.outlet-sr__links{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.outlet-sr__route,.outlet-sr__call{display:inline-block;padding:9px 16px;border-radius:6px;
  font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.outlet-sr__route{background:var(--green);color:#fff}
.outlet-sr__call{border:1px solid var(--line);color:var(--blue)}
@media (max-width:640px){
  .outlet-sr__card{flex-direction:column;align-items:flex-start}
  .outlet-sr__links{width:100%}
  .outlet-sr__route,.outlet-sr__call{flex:1 1 0;text-align:center}
}

/* ---- Contact-/vestigingsblok op de zoekresultatenpagina (07-08-2026, David) -------------
   De vestigingskaart erin gebruikt de .outlet-sr__*-opmaak hierboven — zo ziet de kaart op
   /zoeken er precies zo uit als op de outlet-categoriepagina's, zonder tweede definitie.
   Hier alleen het omhulsel, de compacte lijst en de bescheiden regel onder de producten.
   Design A krijgt hetzelfde uit includes/css/zoekintentie.css. */
.zi{margin:0 0 22px}
.zi__inner{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;
  padding:18px 20px;background:#fff}
.zi__title{margin:0 0 4px;font-size:19px;font-weight:700;line-height:1.25;color:var(--blue)}
.zi__lead{margin:0 0 14px;font-size:14px;color:var(--muted)}
.zi__acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.zi__actie{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:22px;
  font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none}
.zi__actie--primair{background:var(--green);border-color:var(--green);color:#fff}
.zi__actie:hover,.zi__actie:focus{text-decoration:none;opacity:.9}
.zi__meer{margin:12px 0 0;font-size:13.5px}
.zi__meer a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
/* Twaalf winkels onder elkaar zou het blok hoger maken dan de eerste rij zoekresultaten —
   precies wat het niet mag doen. Vandaar kolommen zolang er breedte is. */
.zi-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 18px;
  margin:0;padding:0;list-style:none}
.zi-lijst__item{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13.5px;line-height:1.5}
.zi-lijst__link{font-weight:700;color:var(--blue)}
.zi-lijst__tijd{color:var(--muted)}
/* weekoverzicht onder de kaart bij "openingstijden <plaats>"; twee kolommen zodat zeven dagen
   niet hoger worden dan de kaart erboven */
.zi-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 24px;
  margin:12px 0 0;padding:0;list-style:none}
.zi-week__dag{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
  border-bottom:1px solid #f0f3f5;font-size:13.5px;color:var(--muted)}
.zi-week__dag--vandaag{font-weight:700;color:var(--blue)}
.zi-week__tijd{white-space:nowrap}
/* naam + badge mogen samen afbreken zonder dat de badge losraakt */
.zi-naamregel{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.zi .outlet-badge,.zi-hint .outlet-badge{display:inline-block;padding:1px 7px;border-radius:4px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;line-height:1.5;
  letter-spacing:.2px;white-space:nowrap}
/* Bewust een regel en geen kaart: bij een kale plaatsnaam zoekt vrijwel iedereen het meubel,
   dus dit mag opvallen noch afleiden. */
.zi-hint{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:12px 16px;
  border:1px solid var(--line);border-radius:12px;background:#f7f9fa;font-size:13.5px;color:var(--muted)}
.zi-hint__link{font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  .zi__inner{padding:14px 16px}
  .zi__title{font-size:17px}
  .zi__actie{flex:1 1 100%;text-align:center}
}

/* ---- Outlet-banner op de woonwinkelpagina (07-08-2026) ---------------------------------
   Groter dan de badges, zelfde groen, over de volle breedte onder de pagekop. */
.outlet-banner{margin:0 0 24px}
.outlet-banner__inner{width:100%}
.outlet-banner .outlet-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--green);color:#fff;border-radius:12px;padding:18px 22px}
.outlet-banner__title{display:block;font-size:20px;font-weight:800;line-height:1.2}
.outlet-banner__sub{display:block;font-size:14px;opacity:.92;margin-top:3px}
.outlet-banner__cta{flex:0 0 auto;background:#fff;color:var(--green);font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:8px;text-decoration:none;white-space:nowrap}
.outlet-banner__cta:hover{background:#f1f5f3;color:var(--green)}
@media(max-width:760px){
  .outlet-banner .outlet-banner__inner{flex-direction:column;align-items:flex-start;padding:16px 18px}
  .outlet-banner__title{font-size:18px}
  .outlet-banner__cta{width:100%;text-align:center;white-space:normal}
}

/* ---- Vestigingsfoto op de woonwinkelpagina (07-08-2026) --------------------------------
   Foto prominent bovenaan; de kaart eronder in een compacter formaat, zodat beide een plek
   houden zonder dat de pagina één lange kolom beeld wordt. */
.wk__photo{position:relative;margin:0 0 18px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.wk__photo img{display:block;width:100%;height:auto}
.wk__photo-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.28) 65%,rgba(0,0,0,0));font-size:14.5px;line-height:1.45}
.wk__photo-cap :is(p,h2,h3){margin:0;color:#fff;font-size:inherit;line-height:inherit}
/* De eerste regel (uit de CMS-kop) mag iets zwaarder — dat is de zin die A ook groot toont. */
.wk__photo-cap .wk__photo-lead{font-size:17px;font-weight:700;line-height:1.3}
.wk__photo-cap :is(p,h2,h3)+:is(p,h2,h3){margin-top:4px}
.wk__map--compact{aspect-ratio:21/9}
@media(max-width:760px){
  .wk__photo-cap{position:static;background:var(--gray-bg,#eef2f6);color:var(--text);padding:12px 14px}
  .wk__photo-cap :is(p,h2,h3){color:inherit}
  .wk__map--compact{aspect-ratio:4/3}
}

/* ---- Vestigingskaart op /over-ons/contact en /showrooms — herontwerp 07-08-2026 -----------
   Foto als beeldanker (zelfde presentatie als .wk__photo op de woonwinkelpagina), daaronder
   naam/adres, dan de acties met een compacte klikbare kaart-thumbnail, dan de openingstijden.
   Het kaartje is 100x120 px in de bron en wordt hier op 50x60 getoond — dus verkleind, nooit
   vergroot; korrel is daarmee uitgesloten. */
/* 07-08 (David: "kaarten niet goed uitgelijnd"). Oorzaak: de CMS-foto's hebben niet allemaal
   dezelfde verhouding — elf zijn ±1250x460 (2,7:1) maar Alphen is 1599x1200 (4:3). Die ene foto
   was daardoor bijna drie keer zo hoog, waardoor alles eronder (naam, knoppen, tijden) in die
   kaart veel lager begon dan in de buurkaart. Vast kader met object-fit:cover lost dat op: elke
   foto is nu even hoog en de tekst begint overal op dezelfde lijn. Uitsnede i.p.v. vervorming. */
.srcard__photo{position:relative;margin:0 0 12px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:125/46;background:var(--gray-bg,#eef2f6)}
.srcard__photo img{display:block;width:100%;height:100%;object-fit:cover}
.srcard__cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;color:#fff;font-size:12.5px;line-height:1.35;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.25) 70%,rgba(0,0,0,0))}
/* 07-08-2026 (David): boven 640px — dus zodra de kaarten in twee of drie kolommen staan — is de
   overlaytekst op de foto te veel: de kaart is dan smal en de tekst legt zich over het beeld dat
   juist het anker moet zijn. In de 1-koloms mobiele weergave blijft hij staan, daar is ruimte en
   voegt hij context toe.
   Alleen deze klasse, dus alleen de kaarten uit _showroomkaart.php (/over-ons/contact en
   /showrooms). De woonwinkelpagina's gebruiken .wk__photo-cap en blijven ongemoeid; de foto zelf
   blijft hier uiteraard staan. Puur CSS: de HTML is identiek. */
@media(min-width:641px){ .srcard__cap{display:none} }
.srcard__head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.srcard__name{font-size:16px;font-weight:700;color:var(--blue)}
.srcard__gem,.srcard__addr{font-size:13px;color:var(--muted)}
.srcard__actions{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
/* 07-08 (David): Route was iets dikker dan Bel. Oorzaak: de Bel-link matcht óók
   `.docloc__item a[href^="tel:"]` (specificiteit 0,2,1) met eigen padding, line-height en
   border-radius — die won van `.srcard__call` (0,1,0). Beide knoppen krijgen nu letterlijk
   dezelfde maatvoering via één selector die allebei de gevallen dekt: inline-flex met een vaste
   regelhoogte, gelijke padding en dezelfde radius. Alleen de achtergrondkleur verschilt. */
.docloc__item .srcard__route,.docloc__item .srcard__call,
.srcard__route,.srcard__call{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border:0;border-radius:20px;font-size:13px;font-weight:700;line-height:1;
  min-height:33px;text-decoration:none;white-space:nowrap;margin:0}
/* 07-08 (David: "Route staat in oranje letters"): `.docloc__item a{color:var(--orange)}` heeft
   specificiteit (0,1,1) en won van `.srcard__route` (0,1,0) — de knoptekst werd dus oranje op
   groen, en bij Bel zelfs oranje op oranje. Met de ouderklasse erbij is de tekst weer wit.
   Achtergronden blijven zoals ze waren. */
.docloc__item .srcard__route,.docloc__item .srcard__call,
.srcard__route,.srcard__call{color:#fff}
/* 07-08 (David, herziening): de Route-knop wordt oranje i.p.v. groen — witte letters blijven.
   Contrast: wit op --orange (#c45519) is 4,51:1, ruim boven de 4,5:1 die WCAG AA vraagt voor
   normale tekst; de knoptekst is bovendien vet 13px. De groene outlet-badge blijft groen, dus
   die twee blijven visueel uit elkaar te houden. */
.srcard__route,.docloc__item .srcard__route{background:var(--orange)}
.docloc__item .srcard__route:hover{background:var(--orange-dark)}
.srcard__call,.docloc__item .srcard__call{background:var(--orange)}
.docloc__item .srcard__route:hover{color:#fff;opacity:.92}
.docloc__item .srcard__call:hover{color:#fff;opacity:.92}
/* 07-08 (David): de thumbnail was met 50x60 te klein. Nu op zijn NATIVE 100x120 — groter mag
   niet, want dat is precies de uitvergroting die de korrel gaf. Daarmee staat hij ook visueel
   in verhouding tot de foto erboven. */
.srcard__mapthumb{margin-left:auto;line-height:0;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.srcard__mapthumb img{display:block;width:100px;height:120px}
.srcard__hours{width:100%;font-size:13px;border-collapse:collapse}
.srcard__hours td{padding:2px 0}
.srcard__hours td:first-child{width:110px;color:var(--muted)}
.srcard__mail{margin:10px 0 0;font-size:13px}
@media(max-width:640px){
  .srcard__actions{gap:6px}
  .srcard__route,.srcard__call{padding:9px 13px}
  .srcard__mapthumb img{width:60px;height:72px}   /* mobiel iets meegeschaald, blijft ruim onder 100x120 */
}

/* ---- PDP: ophaalmelding i.p.v. bestelknop op de outlet-boom (10-08-2026, David) ---- */
.pdp-ophalen{margin:2px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-left:4px solid var(--green);border-radius:12px;background:#f7f9fa}
.pdp-ophalen__kop{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--blue)}
.pdp-ophalen__waar{margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.pdp-ophalen__acties{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.pdp-ophalen .btn-showroom{flex:0 0 auto}
.pdp-ophalen__link{font-size:13.5px;font-weight:700;color:var(--green);
  text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  .pdp-ophalen__acties{gap:10px}
  .pdp-ophalen .btn-showroom{flex:1 1 100%;justify-content:center}
}

/* ---- Intentie-regel in de suggestie-dropdown (10-08-2026, David) ----
   Licht onderscheiden van de productsuggesties: groene pijl in plaats van een thumbnail, vette
   tekst. Scheidingslijn onder de regel als hij bovenaan staat (ondubbelzinnige intentie) en
   erboven als hij onderaan staat (kale plaatsnaam — daar winnen de producten). */
.search-results .sr__intent{font-weight:700;color:var(--blue)}
.search-results .sr__intent .sr__name{white-space:normal;font-weight:700}
.sr__intentico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  flex-shrink:0;border-radius:50%;background:var(--green);color:#fff;font-size:14px;line-height:1}
.search-results .sr__intent:first-child{border-bottom:1px solid var(--line)}
.search-results .sr__intent:last-child:not(:first-child){border-top:1px solid var(--line)}

/* ==== /includes/css/favorites.min.css ==== */
.fav-heart{position:absolute;top:8px;left:8px;z-index:6;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,0.95);box-shadow:0 1px 4px rgba(0,0,0,0.20);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .12s ease;-webkit-tap-highlight-color:transparent}.fav-heart:hover{transform:scale(1.08)}.fav-heart:active{transform:scale(.94)}.fav-ico{display:inline-block;vertical-align:middle;width:22px;height:22px}.fav-ico path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}.fav-heart{color:#8a8a8a}.fav-heart.is-fav{color:#e3342f}.fav-heart.is-fav .fav-ico path{fill:currentColor;stroke:currentColor}.fav-heart.busy{opacity:.5;pointer-events:none}.fav-heart.fav-heart-labeled{position:static;width:auto;height:auto;border-radius:24px;box-shadow:none;background:#fff;border:1px solid #e3342f;color:#e3342f;padding:9px 18px;margin:12px 0 4px;display:inline-flex;align-items:center;gap:8px}.fav-heart.fav-heart-labeled{color:#e3342f}.fav-heart.fav-heart-labeled .fav-ico{width:18px;height:18px}.fav-heart.fav-heart-labeled .fav-label{font-size:14px;font-weight:600}.fav-heart.fav-heart-labeled.is-fav{background:#e3342f;color:#fff}.fav-heart.fav-heart-labeled:hover{transform:none;box-shadow:0 1px 4px rgba(0,0,0,.15)}.header-webshop .wishlist{position:relative;display:inline-block;vertical-align:top;text-align:left;margin-left:2px}.header-webshop .wishlist>.field{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 10px;border:1px solid #b2b2b2;position:relative;cursor:pointer;text-decoration:none}.header-webshop .wishlist>.field:hover{border-color:#e3342f}.header-webshop .wishlist .icon{margin:0;display:flex;align-items:center}.header-webshop .wishlist .icon .fav-ico{width:25px;height:25px;color:#444;display:block}.header-webshop .wishlist:hover .icon .fav-ico{color:#e3342f}.header-webshop .wishlist .amount.js-wishlist-amount{position:absolute;top:-8px;right:-8px;background:#e3342f;color:#fff;font-weight:700;border-radius:11px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:11px;padding:0 5px}.header-webshop .wishlist .content.hidden{display:none}.js-favorite-alert{display:none}.fav-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);z-index:99999;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.18);padding:16px 44px 16px 18px;min-width:280px;max-width:92vw;opacity:0;transition:opacity .25s ease,transform .25s ease;font-size:14px}.fav-toast.show{opacity:1;transform:translate(-50%,0)}.fav-toast .fav-toast-msg{font-weight:600;color:#222;margin-bottom:10px}.fav-toast .fav-toast-actions{display:flex;gap:8px;flex-wrap:wrap}.fav-toast .fav-toast-btn{display:inline-block;padding:8px 14px;border-radius:22px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid #d0d0d0;background:#f5f5f5;color:#333}.fav-toast .fav-toast-btn.primary{background:#e3342f;border-color:#e3342f;color:#fff}.fav-toast .fav-toast-btn.primary:hover{background:#c82d29}.fav-toast .fav-toast-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;line-height:1;color:#aaa;cursor:pointer}.fav-toast .fav-toast-x:hover{color:#333}.wishlist-page .wishlist-empty{text-align:center;padding:40px 15px;color:#777}.wishlist-grid{margin-top:10px}.wishlist-item{border:1px solid #eee;border-radius:6px;padding:12px;margin-bottom:16px;background:#fff;position:relative}.wishlist-item .wi-image img{max-width:100%;height:auto;border-radius:4px}.wishlist-item .wi-title{font-weight:700;margin:8px 0 4px}.wishlist-item .wi-title a{color:#222;text-decoration:none}.wishlist-item .wi-config{font-size:13px;color:#555;margin-bottom:6px;line-height:1.4}.wishlist-item .wi-price{font-weight:700;color:#e3342f;margin-bottom:8px}.wishlist-item .wi-actions .btn{margin-right:6px;margin-bottom:6px}.wishlist-item .wi-note textarea{width:100%;font-size:13px}.wishlist-item .wi-remove{position:absolute;top:8px;right:8px;background:none;border:0;color:#b0b0b0;font-size:20px;line-height:1;cursor:pointer}.wishlist-item .wi-remove:hover{color:#e3342f}@media (max-width:767px){.fav-heart{width:34px;height:34px}.fav-heart .fav-ico{width:20px;height:20px}.header-webshop .wishlist .icon .fav-ico{width:23px;height:23px}}@media (max-width:767px){.header-webshop .search .field,.header-webshop .cart .field,.header-webshop>.wishlist>.field,.header-webshop>.hamburger-wrap{box-sizing:border-box;height:38px;min-height:38px}.header-webshop{padding-right:106px}.header-webshop>.wishlist{position:absolute;top:0;right:53px;margin:0}}@media (max-width:575px){.header-webshop{padding-right:159px}.header-webshop>.wishlist{right:106px}.header-webshop>.wishlist>.field{min-height:38px;height:38px;padding:0 6px;width:44px}.header-webshop .wishlist .icon .fav-ico{width:25px;height:25px;transform:scale(.8)}body.menu-forced .header-webshop{padding-right:96px}body.menu-forced .header-webshop>.wishlist{right:53px}}