/* input(776,37): run-time error CSS1030: Expected identifier, found '['
input(776,42): run-time error CSS1031: Expected selector, found '='
input(776,42): run-time error CSS1025: Expected comma or open brace, found '='
input(778,37): run-time error CSS1030: Expected identifier, found '['
input(778,42): run-time error CSS1031: Expected selector, found '='
input(778,42): run-time error CSS1025: Expected comma or open brace, found '='
input(801,34): run-time error CSS1030: Expected identifier, found '#FirstName'
input(801,44): run-time error CSS1025: Expected comma or open brace, found ')'
input(803,34): run-time error CSS1030: Expected identifier, found '#LastName'
input(803,43): run-time error CSS1025: Expected comma or open brace, found ')'
input(806,34): run-time error CSS1030: Expected identifier, found '#Email'
input(806,40): run-time error CSS1025: Expected comma or open brace, found ')'
input(947,46): run-time error CSS1030: Expected identifier, found ':'
input(947,54): run-time error CSS1025: Expected comma or open brace, found ')'
input(1136,1): run-time error CSS1019: Unexpected token, found '}'
input(1198,16): run-time error CSS1030: Expected identifier, found '>'
input(1198,30): run-time error CSS1025: Expected comma or open brace, found ')'
input(1199,16): run-time error CSS1030: Expected identifier, found '>'
input(1199,30): run-time error CSS1025: Expected comma or open brace, found ')'
input(1345,16): run-time error CSS1030: Expected identifier, found '>'
input(1345,30): run-time error CSS1025: Expected comma or open brace, found ')'
input(1385,40): run-time error CSS1030: Expected identifier, found '>'
input(1385,43): run-time error CSS1025: Expected comma or open brace, found ')' */
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(../lib_npm/jquery-ui-dist/"images/ui-icons_555555_256x240.png")&iconsHighlight=url(../lib_npm/jquery-ui-dist/"images/ui-icons_777620_256x240.png")&iconsHeader=url(../lib_npm/jquery-ui-dist/"images/ui-icons_444444_256x240.png")&iconsError=url(../lib_npm/jquery-ui-dist/"images/ui-icons_cc0000_256x240.png")&iconsDefault=url(../lib_npm/jquery-ui-dist/"images/ui-icons_777777_256x240.png")&iconsContent=url(../lib_npm/jquery-ui-dist/"images/ui-icons_444444_256x240.png")&iconsActive=url(../lib_npm/jquery-ui-dist/"images/ui-icons_ffffff_256x240.png")&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;font-size:100%}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{margin:0;cursor:pointer;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.ui-button-icon-only .ui-icon{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.ui-button.ui-icon-notext .ui-icon{padding:0;width:2.1em;height:2.1em;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-icon-notext .ui-icon{width:auto;height:auto;text-indent:0;white-space:normal;padding:.4em 1em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-controlgroup{vertical-align:middle;display:inline-block}.ui-controlgroup > .ui-controlgroup-item{float:left;margin-left:0;margin-right:0}.ui-controlgroup > .ui-controlgroup-item:focus,.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus{z-index:9999}.ui-controlgroup-vertical > .ui-controlgroup-item{display:block;float:none;width:100%;margin-top:0;margin-bottom:0;text-align:left}.ui-controlgroup-vertical .ui-controlgroup-item{box-sizing:border-box}.ui-controlgroup .ui-controlgroup-label{padding:.4em 1em}.ui-controlgroup .ui-controlgroup-label span{font-size:80%}.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item{border-left:none}.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item{border-top:none}.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content{border-right:none}.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content{border-bottom:none}.ui-controlgroup-vertical .ui-spinner-input{width:75%;width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-datepicker .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;left:.5em;top:.3em}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-n{height:2px;top:0}.ui-dialog .ui-resizable-e{width:2px;right:0}.ui-dialog .ui-resizable-s{height:2px;bottom:0}.ui-dialog .ui-resizable-w{width:2px;left:0}.ui-dialog .ui-resizable-se,.ui-dialog .ui-resizable-sw,.ui-dialog .ui-resizable-ne,.ui-dialog .ui-resizable-nw{width:7px;height:7px}.ui-dialog .ui-resizable-se{right:0;bottom:0}.ui-dialog .ui-resizable-sw{left:0;bottom:0}.ui-dialog .ui-resizable-ne{right:0;top:0}.ui-dialog .ui-resizable-nw{left:0;top:0}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");height:100%;filter:alpha(opacity=25);opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-text{display:block;margin-right:20px;overflow:hidden;text-overflow:ellipsis}.ui-selectmenu-button.ui-button{text-align:left;white-space:nowrap;width:14em}.ui-selectmenu-icon.ui-icon{float:right;margin-top:0}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:.222em 0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:2em}.ui-spinner-button{width:1.6em;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top-style:none;border-bottom-style:none;border-right-style:none}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#2b2b2b;text-decoration:none}.ui-visual-focus{box-shadow:0 0 3px 1px rgb(94,158,214)}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#003eff;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-checked{border:1px solid #dad55e;background:#fffa90}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_444444_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_cc0000_256x240.png")}.ui-button .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_777777_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.003;filter:Alpha(Opacity=.3)}.ui-widget-shadow{-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}
/* Excellence datumprikker — huisstijl-kalender.
   8/8: draaide alleen op desktop; op een gsm kreeg de klant nog het systeemvenster van de
   browser, dat niet in de huisstijl te krijgen is. Nu overal actief, op smalle schermen als
   blad onderaan — net als de keuzelijsten. */
.exc-dp-hidden{ display:none !important; }
.exc-dp{ position:relative; }
.exc-dp-btn{
  width:100%; height:50px; border:1.5px solid #E8E7E0; border-radius:12px; background:#fff;
  padding:0 42px 0 14px; font-family:'Jost',sans-serif; font-size:16px; color:#22241F;
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.exc-dp-btn:hover{ border-color:#B9C0B5; }
.exc-dp.open .exc-dp-btn{ border-color:#8A9287; box-shadow:0 0 0 3px rgba(138,146,135,.16); }
.exc-dp-pane{
  position:absolute; z-index:70; top:calc(100% + 8px); left:0; min-width:300px; display:none;
  background:#fff; border:1px solid #E8E7E0; border-radius:14px;
  box-shadow:0 18px 44px rgba(34,36,31,.14); padding:14px;
}
.exc-dp.open .exc-dp-pane{ display:block; }
.exc-dp-pane.omhoog{ top:auto; bottom:calc(100% + 8px); }
.exc-dp-kop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  font-family:'Cormorant Garamond',serif; font-size:19px; color:#22241F; }
.exc-dp-kop span{ text-transform:capitalize; }
.exc-dp-nav{ width:34px; height:34px; border:1px solid #E8E7E0; border-radius:9px; background:#fff;
  font-size:18px; color:#4A4C45; cursor:pointer; transition:all .15s ease; }
.exc-dp-nav:hover{ border-color:#8A9287; color:#8A9287; }
.exc-dp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.exc-dp-dag{ text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9A9C93; padding:4px 0 8px; }
.exc-dp-cel{ aspect-ratio:1; border:none; border-radius:9px; background:none; font-family:'Jost',sans-serif;
  font-size:14px; color:#22241F; cursor:pointer; transition:background .12s ease; }
.exc-dp-cel:hover:not(:disabled){ background:#F3F5F1; }
.exc-dp-cel:disabled{ color:#D5D3CB; cursor:default; }
.exc-dp-cel.vandaag{ box-shadow:inset 0 0 0 1.5px #DCD9CF; }
.exc-dp-cel.sel{ background:#8A9287; color:#fff; }

/* ── gsm: kalender als blad onderaan, gelijk aan de keuzelijsten ── */
.exc-dp-sluier{ position:fixed; inset:0; background:rgba(34,36,31,.38); z-index:69; }
@media (max-width:780px){
  .exc-dp-pane{
    position:fixed; z-index:70; left:0; right:0; bottom:0; top:auto; min-width:0;
    border-radius:20px 20px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(34,36,31,.22);
  }
  .exc-dp-kop{ font-size:21px; margin-bottom:14px; }
  .exc-dp-nav{ width:42px; height:42px; font-size:20px; }
  .exc-dp-cel{ font-size:16px; border-radius:11px; }
  .exc-dp-dag{ font-size:12px; }
}

/* ── 8/8: uurvelden, zelfde component als de kalender ── */
.exc-tp-pane{ padding:8px; min-width:180px; }
.exc-tp-lijst{ max-height:290px; overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }
.exc-tp-uur{
  border:none; background:none; border-radius:9px; padding:11px 8px; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:15px; color:#22241F; transition:background .12s ease;
}
.exc-tp-uur:hover{ background:#F3F5F1; }
.exc-tp-uur.sel{ background:#8A9287; color:#fff; }
.exc-tp-btn{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.exc-tp-btn.leeg{ color:#9a9d95; }
@media (max-width:780px){
  .exc-tp-lijst{ max-height:52vh; grid-template-columns:repeat(3,1fr); gap:6px; }
  .exc-tp-uur{ padding:14px 8px; font-size:16px; }
}


  :root{
    --sage:#8A9287; --sage-dark:#7E8A7C;
    --ink:#22241F; --ink-deep:#1A1C18;
    --paper:#FFFFFF; --paper-soft:#FBFAF7;
    --blush:#F3E7E2; --line:#E8E7E0;
    --muted:#6E7168; --muted-light:#9C9E93;
    --radius-card:20px; --radius-pill:999px;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--paper); -webkit-font-smoothing:antialiased}
  img{display:block; max-width:100%}
  a{color:inherit; text-decoration:none}
  a:hover{color:var(--sage)}
  .page{max-width:1280px; margin:0 auto; overflow:hidden}
  /* eenvoudige responsive vangnetten — verfijn naar wens */
  @media (max-width:1100px){
    .page [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
    .page [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  }
  @media (max-width:760px){
    .page [style*="grid-template-columns"]{grid-template-columns:1fr!important}
    .page [style*="padding:96px 56px"],
    .page [style*="padding:88px 56px"],
    .page [style*="padding:80px 56px"],
    .page [style*="padding:72px 56px"]{padding-left:22px!important; padding-right:22px!important}
    .page [style*="font-size:66px"], .page [style*="font-size:46px"],
    .page [style*="font-size:58px"],
    .page [style*="font-size:56px"]{font-size:38px!important}
  }

  /* header-breakpoints */
  @media (max-width:1150px){
    .site-header{flex-wrap:wrap!important; gap:16px!important}
    .site-nav{flex-wrap:wrap!important; gap:20px!important}
    .brand-tag{display:none!important}
  }

/* nop-vangnetten binnen het ontwerp */
.exc-shell .master-column-wrapper{padding:0}
.exc-shell .center-1{margin:0}

/* ============================================================
   Beheerbalk (enkel zichtbaar voor beheerders) — zwarte topbalk.
   ============================================================ */
.dhz-adminbar{ display:flex; align-items:center; gap:16px; background:#0f172a; color:#e2e8f0; padding:8px 56px; font-family:'Jost',sans-serif; font-size:13px; line-height:1.2; }
.dhz-adminbar .dhz-adminbar-tag{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:#fff; }
.dhz-adminbar .dhz-adminbar-tag svg{ width:15px; height:15px; color:#fbbf24; }
.dhz-adminbar .dhz-adminbar-store{ color:#94a3b8; font-size:12.5px; }
.dhz-adminbar .dhz-adminbar-actions{ display:inline-flex; align-items:center; gap:16px; }
.dhz-adminbar .dhz-adminbar-btn{ background:#fbbf24; color:#0f172a; font-weight:700; padding:6px 15px; border-radius:7px; text-decoration:none; white-space:nowrap; }
.dhz-adminbar .dhz-adminbar-btn:hover{ background:#f59e0b; color:#0f172a; text-decoration:none; }
.dhz-adminbar .dhz-adminbar-link{ color:#cbd5e1; text-decoration:none; font-size:12.5px; white-space:nowrap; }
.dhz-adminbar .dhz-adminbar-link:hover{ color:#fff; text-decoration:underline; }
@media (max-width:640px){
  .dhz-adminbar{ flex-wrap:wrap; gap:10px 14px; padding:8px 14px; }
  .dhz-adminbar .dhz-adminbar-btn{ margin-left:0; }
}


.dhz-adminbar svg{width:15px;height:15px;flex:none}
.dhz-adminbar .dhz-adminbar-link{display:inline-flex;align-items:center;gap:6px}
.dhz-adminbar{margin:0}

/* fix 2/8: ALLE iconen in de beheerbalk klein (potlood rendrde reusachtig) */
.dhz-adminbar svg{ width:15px; height:15px; flex:none; }
.dhz-adminbar .dhz-adminbar-link{ display:inline-flex; align-items:center; gap:6px; }

/* ============================================================
   Fase 2 (2/8): hamburger-menu, mobiele verfijning, /boeken-stijl
   ============================================================ */

/* — hamburger-knop (alleen mobiel) — */
.exc-burger{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.exc-burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.exc-nav-open .exc-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.exc-nav-open .exc-burger span:nth-child(2){ opacity:0; }
.exc-nav-open .exc-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.exc-nav-close{ display:none; }
.exc-nav-backdrop{ display:none; }

@media (max-width:1000px){
  .exc-burger{ display:flex; }
  /* zelfde zijmarge als de inhoud: 20px op een gsm; tussen 761 en 1000px (burger op een
     breed scherm) geldt hieronder 56px, zodat de kop ALTIJD op de inhoudslijn staat */
  .site-header{ padding:14px 20px !important; gap:14px !important; position:relative; }
  .site-header img[data-logo]{ height:44px !important; }
  /* nav wordt zijpaneel */
  .site-nav{
    position:fixed !important; top:0; right:0; bottom:0; z-index:220;
    width:min(84vw, 340px);
    flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important;
    gap:4px !important; padding:74px 26px 26px !important;
    background:#fff; border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(26,28,24,.14);
    transform:translateX(105%); transition:transform .25s ease;
    overflow-y:auto; flex-wrap:nowrap !important;
  }
  .exc-nav-open .site-nav{ transform:translateX(0); }
  .site-nav > span{ width:100%; }
  .site-nav > span > a{ display:block; padding:13px 4px; font-size:17px; border-bottom:1px solid var(--paper-soft); min-height:44px; }
  .site-nav .exc-nav-cta{ margin-top:14px; width:100%; justify-content:center; padding:15px 22px !important; }
  .site-nav .exc-nav-cta a{ font-size:14px; }
  .exc-nav-close{ display:flex; position:absolute; top:14px; right:16px; width:44px; height:44px; align-items:center; justify-content:center; border:none; background:none; font-size:30px; line-height:1; color:var(--muted); cursor:pointer; }
  .exc-nav-open .exc-nav-backdrop{ display:block; position:fixed; inset:0; z-index:210; background:rgba(26,28,24,.42); }
  html.exc-nav-open, .exc-nav-open body{ overflow:hidden; }
}

/* — mobiele verfijning: hero's en secties ademen op smal scherm — */
@media (max-width:480px){
  .page [style*="font-size:66px"], .page [style*="font-size:46px"]{ font-size:32px !important; line-height:1.14 !important; }
  .page [style*="font-size:58px"]{ font-size:30px !important; line-height:1.16 !important; }
  .page [style*="padding:72px 56px"]{ padding-top:36px !important; padding-bottom:32px !important; }
  .page [style*="padding:88px 56px"]{ padding-top:48px !important; padding-bottom:44px !important; }
  .page [style*="font-size:40px"]{ font-size:27px !important; }
  .page [style*="min-height:380px"]{ min-height:230px !important; }
  /* prijsrijen: nette stapeling, bedrag niet afgekapt */
  .page [style*="justify-content:space-between"][style*="gap:32px"]{ gap:14px !important; }
  .page [style*="font-size:26px"]{ font-size:20px !important; }
  .page [style*="font-size:24px"]{ font-size:19px !important; }
}
/* geen horizontale scroll, nergens */
html, body{ overflow-x:hidden; }

/* ============================================================
   /boeken — uitnodigende boekingsflow (stijl 1a)
   ============================================================ */
.exc-book{ max-width:880px; margin:0 auto; padding:56px 24px 88px; font-family:'Jost',sans-serif; color:var(--ink); }
.exc-book .bk-label{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--sage); }
.exc-book h1{ margin:12px 0 10px; font-family:'Cormorant Garamond',serif; font-weight:300; font-size:52px; line-height:1.1; color:var(--ink); }
.exc-book .bk-intro{ margin:0 0 8px; font-size:17px; line-height:1.8; color:#5B5E55; }
/* 8/8 (vraag Bart): de intro stond op max-width 640px terwijl de kaders eronder de volle
   880px van .exc-book gebruiken. Daardoor brak de zin al af terwijl er rechts nog ruimte was
   ('Relax, it's / your time!'). Nu volgt de intro dezelfde breedte als de rest van de pagina. */
.exc-book .bk-duo{ font-size:14.5px; color:var(--sage); text-decoration:underline; }
/* 8/8: de doorverwijzingen tussen de drie boekingsvormen stonden als onderstreepte
   tekstlinks op één regel aan elkaar geplakt (onleesbaar, vraag Bart). Nu keuzekaartjes
   met een duidelijke naam + één regel uitleg, en vanuit elke vorm de andere twee. */
.exc-book .bk-modes{ margin:18px 0 4px; }
.exc-book .bk-modes-t{ display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#8C8F85; margin-bottom:10px; }
.exc-book .bk-modes-r{ display:flex; flex-wrap:wrap; gap:12px; }
.exc-book .bk-mode{
  flex:1 1 260px; min-width:0; display:block; position:relative;
  background:var(--paper-soft); border:1px solid var(--line); border-radius:16px;
  padding:14px 40px 14px 18px; text-decoration:none; color:var(--ink);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.exc-book .bk-mode:after{
  content:"\2192"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--sage); font-size:17px; transition:transform .18s ease;
}
.exc-book .bk-mode:hover{ border-color:var(--sage); background:#fff; transform:translateY(-1px); }
.exc-book .bk-mode:hover:after{ transform:translateY(-50%) translateX(3px); }
.exc-book .bk-mode:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
.exc-book .bk-mode-n{ display:block; font-size:15.5px; color:var(--ink); }
.exc-book .bk-mode-d{ display:block; font-size:13.5px; color:#7A7D73; margin-top:2px; }
@media (max-width:560px){ .exc-book .bk-mode{ flex:1 1 100%; } }
.exc-book .bk-error{ background:#FBEDEA; border:1px solid #E4B9AF; color:#7C3B2D; border-radius:14px; padding:14px 18px; margin:18px 0 0; font-size:15px; }
.exc-book .bk-info{ background:var(--paper-soft); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:18px 0 0; font-size:15px; color:#5B5E55; }
.exc-book .bk-step{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 30px 34px; margin-top:26px; }
.exc-book .bk-stephead{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.exc-book .bk-stepnr{ width:34px; height:34px; flex:none; border-radius:999px; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }
.exc-book .bk-steptitle{ font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:400; }
.exc-book .bk-fields{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:end; }
.exc-book .bk-field{ min-width:0; }
.exc-book .bk-field label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exc-book .bk-field{ display:flex; flex-direction:column; gap:7px; }
.exc-book .bk-field label{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6E7168; }
.exc-book .bk-field select, .exc-book .bk-field input{ width:100%; height:50px; border:1.5px solid var(--line); border-radius:12px; background:#fff; padding:0 14px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink); }
.exc-book .bk-field select:focus, .exc-book .bk-field input:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,146,135,.16); }
.exc-book .bk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; cursor:pointer; border-radius:999px; background:var(--sage); color:#fff; font-family:'Jost',sans-serif; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; padding:0 30px; height:50px; transition:background .15s ease; }
.exc-book .bk-btn:hover{ background:var(--sage-dark); }
.exc-book .bk-btn-ghost{ display:inline-flex; align-items:center; justify-content:center; border:1px solid #D8D6CE; border-radius:999px; color:var(--ink); font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; padding:0 26px; height:50px; text-decoration:none; }
.exc-book .bk-btn-ghost:hover{ border-color:var(--sage); color:var(--sage); }
.exc-book .bk-slots{ display:flex; flex-wrap:wrap; gap:10px; }
.exc-book .exc-slot{ border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:0 18px; height:46px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:'Jost',sans-serif; font-size:15px; transition:border-color .12s ease, background .12s ease, color .12s ease; }
.exc-book .exc-slot small{ color:var(--muted-light); font-size:12.5px; }
.exc-book .exc-slot:hover{ border-color:var(--sage); }
.exc-book .exc-slot.gekozen{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-book .exc-slot.gekozen small{ color:rgba(255,255,255,.8); }
.exc-book .bk-none{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.exc-book .bk-none p{ margin:0; font-size:16px; line-height:1.75; color:#5B5E55; }
.exc-book .bk-chosen{ background:var(--paper-soft); border:1px solid var(--line); border-radius:14px; padding:14px 18px; font-size:15.5px; margin-bottom:18px; }
.exc-book .bk-chosen strong{ font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:500; }
/* 22/8: het bevestigingsvak toont nu twee regels — WAT (behandeling, duur, prijs) en WANNEER */
.exc-book .bk-chosen-wat{ display:block; font-family:'Cormorant Garamond',serif; font-size:21px; line-height:1.3; margin-bottom:2px; }
.exc-book .bk-chosen-wat:empty{ display:none; }
.exc-book .bk-chosen-wanneer{ display:block; color:#6E7168; font-size:15px; }
.exc-book .bk-chosen-wanneer strong{ color:var(--ink); }
/* 22/8: het herinnering-vinkje op het bevestigingsblok */
.exc-book .bk-herinner{ display:flex; gap:12px; align-items:flex-start; margin:16px 0 4px; cursor:pointer; }
.exc-book .bk-herinner input{ margin-top:3px; width:18px; height:18px; accent-color:var(--sage); flex:0 0 auto; }
.exc-book .bk-herinner strong{ display:block; font-weight:500; font-size:15.5px; }
.exc-book .bk-herinner small{ display:block; color:#6E7168; font-size:13.5px; line-height:1.45; margin-top:2px; }
.exc-book .bk-herinner-nota{ margin:14px 0 4px; font-size:15px; color:#6E7168; }
/* 22/8: praktische afronding op de bevestigingspagina */
.exc-book .bk-praktisch{ margin:18px auto 24px; max-width:680px; }
.exc-book .bk-praktisch .bk-note{ margin-top:10px; font-size:14px; }
.exc-book .bk-note{ font-size:14px; color:#8A8D82; margin:10px 0 0; }
/* 22/8 (Bart): elk subscherm krijgt linksboven dezelfde weg terug. Eén klasse, zodat het
   overal identiek staat en niet elk scherm zijn eigen linkje uitvindt. */
.exc-book .bk-terug{ display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; padding:0 18px; height:38px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#6E7168; font-size:13.5px; text-decoration:none; transition:border-color .12s ease, color .12s ease; }
.exc-book .bk-terug:before{ content:'\2190'; font-size:15px; }
.exc-book .bk-terug:hover{ border-color:var(--sage); color:var(--sage); }
/* 22/8 (Bart): /mijn-afspraak stond nog in de oude goud-stijl met inline-css. Deze drie
   bouwstenen maken het scherm gelijk aan de boekschermen. */
.exc-book .bk-groep{ margin:22px 0 0; padding:18px 20px; background:var(--paper-soft,#F6F4EE); border-radius:14px; }
.exc-book .bk-groep .bk-serielijst li{ border-bottom:1px solid rgba(0,0,0,.06); font-size:15px; }
.exc-book .bk-groep .bk-note{ margin-top:12px; }
.exc-book .bk-detaillijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.exc-book .bk-detaillijst li{ display:flex; gap:18px; align-items:baseline; padding-bottom:12px; border-bottom:1px solid var(--line); }
.exc-book .bk-detaillijst li:last-child{ border-bottom:none; padding-bottom:0; }
.exc-book .bk-detaillijst span{ flex:0 0 150px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6E7168; }
.exc-book .bk-detaillijst strong{ font-weight:500; font-size:16.5px; color:var(--ink); }
.exc-book .bk-acties{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.exc-book .bk-btn-weg{ background:#fff; color:#A4463A; border-color:#E0C7C1; cursor:pointer; font-family:'Jost',sans-serif; }
.exc-book .bk-btn-weg:hover{ border-color:#A4463A; color:#A4463A; }
@media (max-width:560px){ .exc-book .bk-detaillijst li{ flex-direction:column; gap:2px; } .exc-book .bk-detaillijst span{ flex:none; } }
.exc-book .bk-confirm{ text-align:center; padding:70px 20px 60px; }
.exc-book .bk-confirm .bk-check{ width:74px; height:74px; margin:0 auto 22px; border-radius:999px; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; }
.exc-book .bk-confirm h1{ font-size:46px; margin:0 0 12px; }
.exc-book .bk-confirm p{ font-size:17px; line-height:1.75; color:#5B5E55; max-width:680px; margin:0 auto 22px; }
@media (max-width:700px){
  .exc-book{ padding:34px 16px 64px; }
  .exc-book h1{ font-size:34px; }
  .exc-book .bk-fields{ grid-template-columns:1fr; }
  .exc-book .bk-step{ padding:22px 18px 26px; }
  .exc-book .bk-btn, .exc-book .bk-btn-ghost{ width:100%; }
  .exc-book .exc-slot{ height:48px; }
}
@media (max-width:1000px){ .site-nav .exc-nav-cta a{ border-bottom:none !important; padding:0 !important; } }
/* 9/8: burger actief maar de pagina-inhoud staat nog op 56px van de rand */
@media (min-width:761px) and (max-width:1000px){
  .site-header{ padding:14px 56px !important; }
}
/* 9/8: tussen 561 en 760px stonden hero, banners en contactblok nog op 56px terwijl de
   rest van de inhoud daar al op 20px staat — alles op dezelfde lijn */
@media (max-width:760px){
  .exc-hero{ margin-left:20px !important; margin-right:20px !important; }
  .exc-paginabanner{ margin-left:20px !important; margin-right:20px !important; }
  .exc-contactblok{ padding-left:20px !important; padding-right:20px !important; }
  /* de ingesprongen banden en kaarten in pagina-inhoud (inline marge met 56px) volgen op
     een gsm allemaal de 20px-lijn — in elke schrijfwijze (0/28/45/48, met of zonder spatie) */
  .page [style*="margin:0 56px"], .page [style*="margin: 0 56px"],
  .page [style*="margin:28px 56px"], .page [style*="margin: 28px 56px"],
  .page [style*="margin:45px 56px"], .page [style*="margin: 45px 56px"],
  .page [style*="margin:48px 56px"], .page [style*="margin: 48px 56px"],
  .page [style*="margin: 0 56px 45px"], .page [style*="margin:0 56px 45px"]{
    margin-left:20px !important; margin-right:20px !important;
  }
  .page [style*="padding:45px 48px"], .page [style*="padding: 45px 48px"]{
    padding-left:20px !important; padding-right:20px !important;
  }
}



/* fix 2/8: globale a:hover kleurde de CTA-tekst sage-op-sage (onleesbaar) */
.exc-nav-cta:hover{ color:#fff !important; background:var(--sage-dark, #6C7568) !important; }
/* fix 2/8b: de CTA-tekst zit in een BINNEN-anchor; die kreeg de globale a:hover-sage-kleur */
.exc-nav-cta a, .exc-nav-cta a:hover{ color:#fff !important; text-decoration:none; }

/* 2/8: CTA professioneler interactief — zachte lift + schaduw + verdieping, ingedrukt-effect */
.exc-nav-cta{
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease !important;
  will-change: transform;
}
.exc-nav-cta:hover{
  background:#77816F !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108,117,104,.28);
}
.exc-nav-cta:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(108,117,104,.30);
  background:#6C7568 !important;
}


/* ── 2/8: ALLE knoppen site-breed dezelfde nette interactie (vraag Bart) ──
   Pills (border-radius:999px) die een link bevatten of zelf een link zijn +
   de /boeken-knoppen. Zachte verdieping, 1px-lift, subtiele schaduw, indruk-effect. */
/* 9/8: .exc-pilknop staat er sinds vandaag bij. De herkenning op inline-stijl faalde stil
   zodra de centrale laag die stijl herschreef (dan staat er "border-radius: 999px" mét
   spatie) — precies wat er gebeurde bij de knoppen in de prijslijsten: die veerden niet
   meer op bij het zweven, terwijl de knop bovenaan dat wél deed. De klasse kan niet stuk. */
span[style*="border-radius:999px"]:has(a), a[style*="border-radius:999px"], .exc-pilknop,
.exc-book .bk-btn, .exc-book .bk-btn-ghost{
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
  will-change: transform;
}
span[style*="border-radius:999px"]:has(a):hover, a[style*="border-radius:999px"]:hover,
.exc-pilknop:hover,
.exc-book .bk-btn:hover, .exc-book .bk-btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34,36,31,.16);
  filter: brightness(.97);
}
span[style*="border-radius:999px"]:has(a):active, a[style*="border-radius:999px"]:active,
.exc-pilknop:active,
.exc-book .bk-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(34,36,31,.14);
}
/* tekst in een pill volgt ALTIJD de pill-kleur (nooit sage-op-sage door de globale a:hover) */
span[style*="border-radius:999px"] a, span[style*="border-radius:999px"] a:hover,
.exc-pilknop > a, .exc-pilknop > a:hover{
  color:inherit !important; text-decoration:none;
}

/* ── 2/8: dropdowns /boeken modern — native pijl weg, eigen sage-chevron, zachte hover ── */
.exc-book .bk-field select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:42px; cursor:pointer;
  text-overflow:ellipsis;
}
.exc-book .bk-field select::-ms-expand{ display:none; }
.exc-book .bk-field select:hover, .exc-book .bk-field input:hover{ border-color:#B9C0B5; }
.exc-book .bk-field select:focus{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7568' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E"); }
.exc-book .bk-field select, .exc-book .bk-field input{ transition:border-color .18s ease, box-shadow .18s ease; }
/* datumveld: kalender-icoon in stijl */
.exc-book .bk-field input[type=date]{ cursor:pointer; }
.exc-book .bk-field input[type=date]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
.exc-book .bk-field input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:.9; }

/* ── 2/8: categorie-chips op /boeken ── */
.exc-book .bk-cats{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.exc-book .bk-cat{
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:10px 18px; font-family:'Jost',sans-serif; font-size:13.5px;
  letter-spacing:.04em; cursor:pointer; transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.exc-book .bk-cat:hover{ border-color:var(--sage); transform:translateY(-1px); box-shadow:0 4px 12px rgba(34,36,31,.10); }
.exc-book .bk-cat.on{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-book select:disabled{ background-color:#FBFAF7; color:#9a9d95; cursor:not-allowed; }
/* 8/8 (vraag Bart): de categorie-knoppen liepen op een gsm over vier rommelige rijen.
   Compacter maken scheelt rijen zonder dat het aantiksbaar oppervlak te klein wordt. */
@media (max-width:560px){
  .exc-book .bk-cats{ gap:7px; margin:0 0 14px; }
  .exc-book .bk-cat{ padding:8px 13px; font-size:12.5px; letter-spacing:.02em; border-width:1px; }
}

/* ── 2/8b: eigen dropdown-component /boeken (desktop) — native lijst is niet te stylen ── */
@media (min-width:781px){ .exc-book select.bk-dd-hidden{ display:none !important; } }
@media (max-width:780px){ .exc-book .bk-dd{ display:none !important; } }
.exc-book .bk-dd{ position:relative; }
.exc-book .bk-dd-btn{
  width:100%; height:50px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:0 42px 0 14px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink);
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.exc-book .bk-dd-btn:hover{ border-color:#B9C0B5; }
.exc-book .bk-dd.open .bk-dd-btn{ border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,146,135,.16); }
.exc-book .bk-dd.leeg .bk-dd-btn{ background-color:#FBFAF7; color:#9a9d95; cursor:not-allowed; }
.exc-book .bk-dd-list{
  position:absolute; z-index:60; top:calc(100% + 8px); left:0; min-width:100%; width:max-content; max-width:min(560px, 82vw); right:auto; display:none;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px rgba(34,36,31,.14); padding:6px; max-height:316px; overflow:auto; overscroll-behavior:contain;
}
.exc-book .bk-dd.open .bk-dd-list{ display:block; }
.exc-book .bk-dd-item{
  display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  padding:11px 13px; border-radius:9px; font-family:'Jost',sans-serif; font-size:15px; color:var(--ink);
  transition:background .14s ease, color .14s ease;
}
.exc-book .bk-dd-item:hover{ background:#F3F5F1; }
.exc-book .bk-dd-item.sel{ background:var(--sage); color:#fff; }

/* 2/8c: nette twee-regel-items in de dropdown (naam + grijs detail) */
.exc-book .bk-dd-item{ white-space:nowrap; }
.exc-book .bk-dd-item .dd-sub{ display:block; font-size:12.5px; color:#8b8e85; margin-top:1px; letter-spacing:.02em; }
.exc-book .bk-dd-item.sel .dd-sub{ color:rgba(255,255,255,.85); }

/* 2/8 bouwronde: prijs rechts in het dropdown-item ("— € 39" uit de optietekst) */
.exc-book .bk-dd-item{ position:relative; padding-right:78px; }
.exc-book .bk-dd-item .dd-prijs{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:13.5px; color:var(--sage); font-weight:500; letter-spacing:.02em; }
.exc-book .bk-dd-item.sel .dd-prijs{ color:rgba(255,255,255,.9); }

/* 2/8: wachtlijst in stijl 1a — grid-varianten + notitie */
.exc-book .bk-fields.w2{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
/* 21/8: duo-aanvraag — behandeling-keuzes elk op volle breedte (namen werden afgeknipt) */
.exc-book .bk-fields.w1{ grid-template-columns:1fr; }
.exc-book .bk-fields.w4{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:16px; }
.exc-book .bk-fields.w3c{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.exc-book .bk-note{ font-size:13px; color:#8b8e85; margin:12px 0 16px; }
@media (max-width:780px){
  .exc-book .bk-fields.w2, .exc-book .bk-fields.w3c{ grid-template-columns:1fr; }
  .exc-book .bk-fields.w4{ grid-template-columns:1fr 1fr; }
}

/* ── 2/8 fase A/C: account-tabs, opt-ins en afsprakenlijst ── */
.exc-book .bk-tabs{ display:flex; gap:10px; margin:14px 0 18px; }
.exc-book .bk-tab{
  border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:10px 20px; font-family:'Jost',sans-serif; font-size:14px; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.exc-book .bk-tab:hover{ border-color:var(--sage); }
.exc-book .bk-tab.on{ background:var(--sage); border-color:var(--sage); color:#fff; }
/* 9/8: de vormkeuze bovenaan /boeken zijn links in tabvorm — geen onderstreping,
   en de tekst gedraagt zich als bij de knoppen (gecentreerd, niet breken) */
.exc-book a.bk-vorm{ text-decoration:none; display:inline-flex; align-items:center; }

/* 9/8: dagdeel-blokken in de weekkalender (zie _Root.cshtml) — dicht is één rustige
   regel per dagdeel, open toont de momenten van dat deel van de dag */
.bk-deel{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line); border-radius:999px; background:#FBFAF7; cursor:pointer;
  padding:9px 14px; margin-top:6px; font-family:'Jost',sans-serif; font-size:13px; color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.bk-deel span{ color:#8B8D83; font-size:12px; }
.bk-deel:hover{ border-color:var(--sage); }
.bk-deel.open{ background:var(--sage); border-color:var(--sage); color:#fff; }
.bk-deel.open span{ color:rgba(255,255,255,.8); }
.bk-deel-slots{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.bk-deel.leeg{ opacity:.45; cursor:default; }
.bk-deel.leeg:hover{ border-color:var(--line); }
/* 9/8 (vraag Bart): de weekkalender compacter in de hoogte — alleen op desktop,
   op een gsm blijven de tikdoelen op volle hoogte */
@media (min-width:781px){
  .bk-deel{ padding:5px 12px; margin-top:5px; }
  .bk-deel-slots{ gap:6px; margin-top:6px; }
  .exc-book .exc-slot{ height:31px; padding:0 12px; font-size:14px; }
  .bk-daycol{ padding:8px; }
  .bk-dayhead{ padding-bottom:6px; margin-bottom:6px; }
  .bk-daytimes{ gap:5px; }
}
.exc-book .bk-optins{ display:flex; flex-direction:column; gap:10px; margin:18px 0 6px; }
.exc-book .bk-check{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); cursor:pointer; }
.exc-book .bk-check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--sage); flex:none; }
.exc-book .bk-appts{ display:flex; flex-direction:column; gap:12px; }
.exc-book .bk-appt{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; }
.exc-book .bk-appt-staff{ color:#8b8e85; }
.exc-book .bk-appt-meta{ display:flex; gap:14px; align-items:center; margin-top:6px; font-size:13px; }
.exc-book .bk-appt-status{ background:#F3F5F1; color:var(--sage-dark,#6C7568); border-radius:999px; padding:3px 10px; }
@media (max-width:480px){ .exc-book .bk-tabs{ flex-wrap:wrap; } }

/* 2/8: behandelingen-overzicht — werkende filterchips + prijsrijen op één lijn (mobiel stapelen) */
.exc-fchip{ cursor:pointer; font-family:'Jost',sans-serif; background:#fff; transition:all .18s ease; }
.exc-fchip:hover{ border-color:#8A9287 !important; transform:translateY(-1px); }
.exc-fchip.on{ background:#22241F !important; color:#fff !important; border-color:#22241F !important; }
@media (max-width:640px){
  .exc-rij{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
  .exc-prijsrij{ width:100%; justify-content:flex-start !important; gap:14px; white-space:normal !important; }
}

/* ── 2/8: review-sterren ── */
.exc-book .rv-stars{ display:flex; gap:6px; }
.exc-book .rv-star{ border:none; background:none; font-size:38px; line-height:1; color:#DDDCD4; cursor:pointer; padding:2px 4px; transition:color .15s ease, transform .15s ease; }
.exc-book .rv-star:hover{ transform:scale(1.12); }
.exc-book .rv-star.on{ color:var(--sage); }

/* 25/8: review = cijfer op 10 (kiezer op het formulier) + publieke /reviews-pagina */
.exc-book .rv-cijfers{ display:flex; gap:8px; flex-wrap:wrap; }
.exc-book .rv-cijfer{ width:46px; height:46px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-family:'Jost',sans-serif; font-size:17px; color:var(--ink); cursor:pointer; transition:all .15s ease; }
.exc-book .rv-cijfer:hover{ border-color:var(--sage); transform:scale(1.08); }
.exc-book .rv-cijfer.on{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-book .rv-samenvatting{ display:flex; align-items:center; gap:12px; font-size:15px; color:#5B534F; margin:0 0 28px; }
.rv-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:999px; background:var(--sage); color:#fff; font-family:'Jost',sans-serif; font-size:14px; letter-spacing:.06em; white-space:nowrap; }
.exc-book .rv-lijst{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.exc-book .rv-kaart{ background:#fff; border:1px solid var(--line); padding:32px 28px; border-radius:20px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.exc-book .rv-tekst{ margin:0; font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.55; font-style:italic; color:#33362F; }
.exc-book .rv-naam{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8B8D83; }
.exc-book .rv-paging{ display:flex; align-items:center; gap:16px; justify-content:center; margin-top:32px; }

/* 26/8: prominent nieuwsbrief-blok op de registratiepagina (vraag Bart) */
.exc-optin-kader{ background:#F3F5F1; border:2px solid var(--sage,#8A9287); border-radius:16px;
                  padding:22px 24px; margin:8px 0 4px; }
.exc-optin-kader .exc-optin-kop{ font-family:'Cormorant Garamond',Georgia,serif; font-size:24px;
                  color:#22241F; margin-bottom:6px; }
.exc-optin-kader .exc-optin-tekst{ margin:0 0 14px; font-size:15px; line-height:1.6; color:#4A4C45; }
.exc-optin-keuze{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:16px; color:#22241F; }
.exc-optin-keuze input{ width:22px; height:22px; accent-color:var(--sage,#8A9287); flex:0 0 auto; margin-top:1px; cursor:pointer; }
.exc-optin-kader .exc-optin-uitleg{ margin:10px 0 0; font-size:13px; color:#8B8D83; }

/* 26/8: oogje op wachtwoordvelden (centrale laag — _Root.oogjes(); knop wordt via JS op het
   veld gepositioneerd, zonder wrapper zodat de veldopmaak onaangeroerd blijft) */
.exc-oog{ position:absolute; transform:translateY(-50%); background:none; border:none;
          cursor:pointer; color:#8B8D83; padding:6px; line-height:0; min-width:36px; min-height:36px; z-index:5; }
.exc-oog:hover{ color:var(--sage, #8A9287); }

/* 2/8: duo-pagina — geselecteerd slot + loginlink header */
.exc-book .exc-slot.sel{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-book .exc-slot.sel small{ color:rgba(255,255,255,.85); }
.exc-nav-account{ font-size:14px; letter-spacing:.02em; color:#4A4C45; text-decoration:none; white-space:nowrap; }
.exc-nav-account:hover{ color:var(--sage); }
/* 2/8: categorie-kopjes in de duo-dropdownlijst */
.exc-book .bk-dd-kop{ padding:10px 13px 4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#9A9C93; }
.exc-book .bk-dd-kop:not(:first-child){ border-top:1px solid var(--line); margin-top:4px; }

/* 2/8: Mijn account-menu in de header (dropdown desktop, uitgeklapt in mobiel paneel) */
.exc-acct{ position:relative; display:inline-flex; }
.exc-acct-btn{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:14px; letter-spacing:.02em; color:#4A4C45; padding:4px 2px; }
.exc-acct-btn:hover{ color:var(--sage); }
.exc-acct-menu{ position:absolute; top:calc(100% + 10px); right:0; display:none; flex-direction:column; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(34,36,31,.14); padding:6px; z-index:80; }
.exc-acct.open .exc-acct-menu{ display:flex; }
.exc-acct-menu a{ padding:10px 13px; border-radius:9px; font-size:14px; color:var(--ink); text-decoration:none; }
.exc-acct-menu a:hover{ background:#F3F5F1; color:var(--ink); }
.exc-acct-menu .exc-acct-uit{ border-top:1px solid var(--line); margin-top:4px; border-radius:0 0 9px 9px; color:#8b5f57; }
@media (max-width:780px){
  .exc-acct{ flex-direction:column; align-items:flex-start; }
  .exc-acct-btn{ display:none; }
  .exc-acct-menu{ position:static; display:flex; border:none; box-shadow:none; padding:0; min-width:0; }
}

/* 2/8b: account-item in het MOBIELE paneel exact als de andere nav-links */
@media (max-width:780px){
  .site-nav .exc-nav-account,
  .site-nav .exc-acct-menu a{
    display:block; width:100%; padding:13px 4px; font-size:17px;
    border-bottom:1px solid var(--paper-soft); min-height:44px; border-radius:0;
  }
  .site-nav .exc-acct{ width:100%; }
  .site-nav .exc-acct-menu{ gap:0; }
  .site-nav .exc-acct-menu a:hover{ background:none; }
  .site-nav .exc-acct-menu .exc-acct-uit{ margin-top:0; border-top:none; }
}

/* 2/8: header op één lijn houden nu er meer items zijn — tagline weg + compacter op middenbreedtes.
   Bouwronde: grens 1400→1600 (Nutrition-item erbij) + tussentrap 1400-1600. */
@media (max-width:1600px){
  .site-nav{ gap:20px !important; }
  /* 9/8: zijmarge blijft 56px — de kop lijnt altijd uit met de inhoud eronder (vraag Bart).
     De ruimtewinst komt van de kleinere letter/gap in de tussenmaten hieronder. */
}
/* tagline overal uit: de schil is max 1280px breed en met het extra Nutrition-item
   wrapte de nav zodra de tagline terugkwam (>1600px). Consistent = beter. */
.brand-tag{ display:none; }
@media (max-width:1440px) and (min-width:1151px){
  .site-nav{ gap:13px !important; font-size:13px !important; }
}
@media (max-width:1150px) and (min-width:1001px){
  /* 9/8 (vraag Bart): tussen 981 en ±1056px paste het menu net niet meer naast het logo
     en viel het eronder. Alles hier een maat kleiner, zodat het altijd op één regel blijft.
     (Onder 981px neemt de burger het over.) */
  /* de zijmarge blijft 56px: de kop lijnt ALTIJD uit met de inhoud eronder */
  .site-header{ gap:18px !important; }
  .site-nav{ gap:10px !important; font-size:12.5px !important; }
  .exc-nav-cta{ padding:9px 13px !important; }
  .exc-nav-cta a{ font-size:12px !important; padding:9px 13px !important; }
  .site-header img[data-logo]{ height:42px !important; }
}

/* ── 2/8: herhaalafspraken ("Vast moment?") + reeksweergave ── */
.exc-book .bk-repeat{ margin:16px 0 4px; padding:14px 16px; background:#FBFAF7; border:1px solid var(--line); border-radius:12px; }
.exc-book .bk-repeat-title{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6E7168; font-weight:600; }
.exc-book .bk-repeat-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center; }
.exc-book .bk-repeat-sub{ font-size:12.5px; color:#8b8e85; margin-right:4px; }
.exc-book .bk-rpill{ border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:8px 14px; font-family:'Jost',sans-serif; font-size:13px; cursor:pointer; transition:all .18s ease; }
.exc-book .bk-rpill:hover{ border-color:var(--sage); transform:translateY(-1px); }
.exc-book .bk-rpill.on{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-book .bk-serie{ margin:16px auto 0; max-width:760px; text-align:left; }
.exc-book .bk-serietag{ display:inline-block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#6E7168; background:#F3F5F1; border-radius:999px; padding:5px 12px; margin-bottom:8px; }
.exc-book .bk-serielijst{ list-style:none; margin:0; padding:0; }
.exc-book .bk-serielijst li{ padding:7px 2px; border-bottom:1px dashed var(--line); font-size:14.5px; }
.exc-book .bk-serielijst li.nee{ color:#8b8e85; }
.exc-book .bk-appt-nee{ color:#8b8e85; }
@media (max-width:480px){ .exc-book .bk-rpill{ padding:7px 11px; font-size:12.5px; } }

/* ============================================================
   2/8 QA-ronde: login / registratie / wachtwoord-herstel in stijl 1a
   (nopCommerce-standaardpagina's waren nog rauw — QA-bevinding #1/#2)
   ============================================================ */
.html-login-page .page.login-page,
.html-registration-page .page.registration-page,
.html-password-recovery-page .page.password-recovery-page,
.page.registration-result-page,
.page.login-page, .page.registration-page, .page.password-recovery-page{
  max-width:980px; margin:0 auto; padding:56px 24px 88px;
  font-family:'Jost',sans-serif; color:var(--ink);
}
.login-page .page-title, .registration-page .page-title,
.password-recovery-page .page-title, .registration-result-page .page-title{
  border:none; margin:0 0 30px; padding:0;
}
.login-page .page-title h1, .registration-page .page-title h1,
.password-recovery-page .page-title h1, .registration-result-page .page-title h1{
  font-family:'Cormorant Garamond',serif; font-weight:300; font-size:42px; line-height:1.15; text-transform:none;
}
/* twee kolommen: terugkomende klant + nieuwe klant */
.login-page .customer-blocks{ display:grid; grid-template-columns:1.2fr 1fr; gap:26px; align-items:start; }
.login-page .returning-wrapper, .login-page .new-wrapper{
  float:none; width:auto; margin:0; background:#fff;
  border:1px solid var(--line); border-radius:20px; padding:34px 32px;
}
.login-page .new-wrapper{ background:#FBFAF7; }
.login-page .customer-blocks .title, .registration-page .fieldset .title{
  margin:0 0 16px; padding:0; border:none; background:none;
}
.login-page .customer-blocks .title strong, .registration-page .fieldset .title strong{
  font-family:'Cormorant Garamond',serif; font-weight:400; font-size:26px; color:var(--ink);
}
.login-page .new-wrapper .text{ font-size:15px; line-height:1.7; color:#5B5E55; margin-bottom:18px; }
/* velden */
.login-page .inputs, .registration-page .inputs, .password-recovery-page .inputs{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 0 18px; text-align:left; white-space:normal;
}
.login-page .inputs label, .registration-page .inputs label, .password-recovery-page .inputs label{
  width:auto; margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8B8D83;
}
.login-page .inputs input[type=text], .login-page .inputs input[type=email], .login-page .inputs input[type=password],
.registration-page .inputs input[type=text], .registration-page .inputs input[type=email], .registration-page .inputs input[type=password],
.password-recovery-page .inputs input[type=text], .password-recovery-page .inputs input[type=email]{
  width:100%; height:48px; border-radius:12px; border:1.5px solid #E4E2DA; background:#fff;
  padding:0 16px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink);
}
.login-page .inputs input:focus, .registration-page .inputs input:focus, .password-recovery-page .inputs input:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,146,135,.16);
}
/* onthoud mij / wachtwoord vergeten */
.login-page .inputs.reversed{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; font-size:14.5px; color:#5B5E55; }
.login-page .inputs.reversed label{ text-transform:none; letter-spacing:0; font-size:14.5px; color:#5B5E55; }
.login-page .forgot-password{ margin-left:auto; }
.login-page .forgot-password a{ color:var(--sage); text-decoration:underline; text-underline-offset:3px; }
/* checkboxen (nieuwsbrief e.d.) */
.registration-page .inputs input[type=checkbox], .login-page .inputs input[type=checkbox]{ width:18px; height:18px; accent-color:var(--sage); }
/* knoppen: dezelfde pill als de rest van de site */
.login-page .button-1, .registration-page .button-1,
.password-recovery-page .button-1, .registration-result-page .button-1{
  display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  border-radius:999px; background:var(--sage); color:#fff; font-family:'Jost',sans-serif;
  font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; padding:0 30px; height:50px;
  transition:background .15s ease;
}
.login-page .button-1:hover, .registration-page .button-1:hover,
.password-recovery-page .button-1:hover, .registration-result-page .button-1:hover{ background:#79816F; color:#fff; }
.login-page .buttons, .registration-page .buttons{ margin-top:6px; }
/* fieldset-kaarten op registratie */
/* 5/8: alles in één omsluitende kaart i.p.v. losse boxen */
.registration-page .page-body > form{
  padding:34px 34px 30px;
  border:1px solid var(--line); border-radius:20px; background:#fff;
}
.registration-page .fieldset{ margin:0; padding:0; border:none; border-radius:0; background:none; }
.registration-page .fieldset + .fieldset{ margin-top:10px; border-top:1px solid var(--paper-soft,#EFEDE6); padding-top:12px; }
.registration-page .inputs{ margin-bottom:14px; }
.registration-page .fieldset .title{ margin-bottom:12px; }
.registration-page .buttons{ margin-top:44px; }
/* sterretje bij verplichte velden (alles behalve geboortedatum) */
.registration-page label[for="FirstName"]::after,
.registration-page label[for="LastName"]::after,
.registration-page label[for="Email"]::after,
.registration-page label[for="Phone"]::after,
.registration-page label[for="Password"]::after,
.registration-page label[for="ConfirmPassword"]::after{ content:" *"; color:var(--sage); font-weight:600; }

/* 5/8: welkom-pagina na registratie (registerresult) — on-brand */
.registration-result-page .exc-welcome{
  max-width:620px; margin:44px auto 64px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:56px 48px;
}
.exc-welcome-badge{
  width:66px; height:66px; margin:0 auto 26px; border-radius:50%;
  background:rgba(138,146,135,.12); color:var(--sage);
  display:flex; align-items:center; justify-content:center; font-size:30px;
}
.exc-welcome-eyebrow{ display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#8A9287; margin-bottom:16px; }
.exc-welcome-title{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:44px; line-height:1.1; color:var(--ink); margin:0 0 18px; }
.exc-welcome-text{ font-size:17px; line-height:1.75; color:#5B5E55; margin:0 auto 36px; max-width:440px; }
.exc-welcome-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.exc-welcome-btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:230px; height:52px;
  border-radius:999px; background:var(--sage); color:#fff; text-decoration:none;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; transition:background .15s ease;
}
.exc-welcome-btn:hover{ background:#79816F; color:#fff; }
.exc-welcome-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.exc-welcome-btn.ghost:hover{ background:var(--paper-soft,#F2F0EA); color:var(--ink); }
@media (max-width:600px){
  .registration-result-page .exc-welcome{ padding:40px 22px; margin:24px auto 40px; }
  .exc-welcome-title{ font-size:34px; }
  .exc-welcome-btn{ width:100%; }
}
.registration-page .fieldset .form-fields{ border:none; background:none; padding:0; }
/* required-sterretjes rustig */
.login-page .required, .registration-page .required{ color:var(--sage); }
@media (max-width:780px){
  .login-page .customer-blocks{ grid-template-columns:1fr; }
  .login-page .page-title h1, .registration-page .page-title h1{ font-size:30px; }
  .login-page .returning-wrapper, .login-page .new-wrapper{ padding:26px 20px; }
  .registration-page .page-body > form{ padding:24px 18px; }
}

/* 2/8 QA cosmetiek: duo-zoekknop niet laten wrappen + datumvelden niet afkappen */
.exc-book .bk-btn{ white-space:nowrap; }
.exc-book input[type="date"]{ min-width:0; }
@media (max-width:480px){
  .exc-book .bk-btn{ padding:0 22px; font-size:12.5px; }
}

/* checkbox-rijen op registratie horizontaal + opt-in-uitleg */
.registration-page .inputs:has(input[type=checkbox]),
.login-page .inputs:has(input[type=checkbox]){ flex-direction:row; align-items:center; gap:10px; }
.registration-page .inputs:has(input[type=checkbox]) label{ text-transform:none; letter-spacing:0; font-size:15px; color:var(--ink); }
.registration-page .exc-optin-uitleg{ font-size:13.5px; color:#8B8D83; line-height:1.6; margin:2px 0 0; }

/* register-finetuning: losse sterretjes weg (validatie vangt dit af) + datum-selects in stijl */
.registration-page .page-body > form > .fieldset .required,
.registration-page .inputs + .required{ display:none; }
.registration-page .inputs select{
  height:44px; border-radius:12px; border:1.5px solid #E4E2DA; background:#fff;
  padding:0 12px; font-family:'Jost',sans-serif; font-size:15px; color:var(--ink);
}
.registration-page .date-of-birth{ display:block; }
.registration-page .date-of-birth > label{ display:block; width:auto; margin:0 0 6px; }
.registration-page .date-of-birth .date-picker-wrapper{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px 14px; }
.registration-page .date-of-birth select{ flex:0 0 auto; width:auto; min-width:100px; }

/* telefoon-veld gelijk aan de rest (type=tel werd niet gestyled) */
.registration-page .inputs input[type=tel], .login-page .inputs input[type=tel]{
  width:100%; height:48px; border-radius:12px; border:1.5px solid #E4E2DA; background:#fff;
  padding:0 16px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink);
}

/* 5/8: voornaam + achternaam naast elkaar vanaf ruimere schermen */
@media (min-width:640px){
  .registration-page .inputs:has(#FirstName),
  .registration-page .inputs:has(#Password){ float:left; width:calc(50% - 8px); }
  .registration-page .inputs:has(#LastName),
  .registration-page .inputs:has(#ConfirmPassword){ float:right; width:calc(50% - 8px); }
  .registration-page .date-of-birth,
  .registration-page .inputs:has(#Email){ clear:both; }
}
.registration-page .form-fields::after{ content:""; display:table; clear:both; }

/* 5/8 boeking-weekweergave: toont per dag ENKEL de vrije, boekbare starttijden */
.bk-weeknav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.bk-weeknav-btn{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13px; cursor:pointer; color:var(--ink); }
.bk-weeknav-btn:disabled{ opacity:.4; cursor:default; }
.bk-weeklabel{ flex:1; text-align:center; font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--ink); }
.bk-weekpick{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; font-size:14px; color:var(--muted,#6E7168); }
.bk-weekpick input[type=date]{ height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font-family:'Jost',sans-serif; font-size:14.5px; color:var(--ink); background:#fff; cursor:pointer; }
@media (max-width:780px){ .bk-weekpick{ flex-wrap:wrap; } }
.bk-week{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.bk-daycol{ flex:0 0 138px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 8px; min-height:80px; }
.bk-daycol.vandaag{ border-color:#c9a24b; box-shadow:0 0 0 1px #c9a24b inset; }
.bk-daycol.verleden{ opacity:.4; }
.bk-dayhead{ text-align:center; border-bottom:1px solid var(--paper-soft,#eee); padding-bottom:8px; margin-bottom:8px; }
.bk-dayname{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted,#6E7168); }
.bk-daynum{ display:block; font-size:14px; font-weight:600; color:var(--ink); }
.bk-daytimes{ display:flex; flex-direction:column; gap:6px; }
.bk-daytimes .exc-slot{ width:100%; text-align:center; }
.bk-dayempty{ display:block; text-align:center; color:var(--muted,#9a9a90); padding:8px 0; }
/* Fase 1: overzicht komende afspraken op de bevestigingspagina */
/* 22/8 (Bart): breder en rustiger. De regels stonden in een smalle kolom van 460px en
   "capitalize" maakte er "Woensdag 21 Oktober Om 12:30" van. */
.bk-mijnafspraken{ margin:24px auto 26px; max-width:760px; text-align:left; background:var(--paper-soft,#F6F4EE); border-radius:16px; padding:24px 30px; }
.bk-afsprakenlijst{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
/* 22/8 (Bart): rechts van elke regel stond een leeg vlak — duur en prijs staan daar nu tegenover. */
.bk-afsprakenlijst li{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.06); }
.bk-af-links{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bk-af-rechts{ flex:none; display:flex; align-items:baseline; gap:14px; white-space:nowrap; }
.bk-af-duur{ font-size:14px; color:#8A8D82; }
.bk-af-prijs{ font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--ink); }
@media (max-width:560px){
  .bk-afsprakenlijst li{ flex-direction:column; align-items:flex-start; gap:6px; }
  .bk-mijnafspraken{ padding:20px 18px; }
}
.bk-afsprakenlijst li:last-child{ border-bottom:none; padding-bottom:0; }
.bk-af-when{ font-weight:500; font-size:16.5px; color:var(--ink); text-transform:none; }
.bk-af-when::first-letter{ text-transform:uppercase; }
.bk-af-detail{ font-size:14.5px; color:#6E7168; }
.bk-af-status{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.bk-af-status.ok{ color:#5B8A5B; }
.bk-af-status.wacht{ color:#B58A2B; }
/* Fase 2: combi/verwenmoment-kaarten */
.bk-trajs{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.bk-traj{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:border-color .15s ease, box-shadow .15s ease; }
.bk-traj:hover{ border-color:var(--sage); }
.bk-traj.gekozen{ border-color:var(--sage); box-shadow:0 0 0 1px var(--sage) inset; }
.bk-traj-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.bk-traj-range{ font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--ink); }
.bk-traj-wait{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#8B8D83); }
.bk-traj-segs{ display:flex; flex-direction:column; gap:4px; }
.bk-traj-seg{ font-size:14.5px; color:#5B5E55; }
/* Fase 3: verzamelmandje */
.bk-cartbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0; padding:14px 18px; border-radius:14px; background:rgba(138,146,135,.12); border:1px solid var(--sage); color:var(--ink); text-decoration:none; }
.bk-cartbar-cta{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--sage); white-space:nowrap; }
.bk-cartlijst{ list-style:none; margin:14px 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.bk-cartlijst li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.bk-cart-label{ color:var(--ink); text-transform:capitalize; }
.bk-cart-remove{ border:none; background:none; font-size:22px; line-height:1; color:var(--muted,#9a9a90); cursor:pointer; padding:0 4px; }
.bk-cart-remove:hover{ color:#B04A4A; }
@media (max-width:780px){
  .bk-week{ flex-direction:column; }
  .bk-daycol{ flex:1 1 auto; display:flex; align-items:flex-start; gap:12px; min-height:0; }
  .bk-daycol.verleden{ display:none; }
  .bk-dayhead{ border-bottom:none; border-right:1px solid var(--paper-soft,#eee); padding:2px 12px 2px 0; margin:0; min-width:78px; text-align:left; }
  .bk-daytimes{ flex-direction:row; flex-wrap:wrap; flex:1; }
  .bk-daytimes .exc-slot{ width:auto; }
  .bk-weeklabel{ font-size:18px; }
  /* 9/8 datumstrook: één dag tegelijk, de strook wisselt van dag (patroon Treatwell/Fresha) */
  .bk-week.met-strip .bk-daycol{ display:none; }
  .bk-week.met-strip .bk-daycol.actief{ display:flex; }
  .bk-week.met-strip .bk-dayhead{ display:none; }
  .bk-week.met-strip .bk-daytimes{ flex-direction:column; }
  .bk-week.met-strip .bk-deel-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
  .bk-week.met-strip .bk-deel-slots .exc-slot{ flex-direction:column; justify-content:center; gap:0; height:auto; min-height:48px; padding:7px 6px; border-radius:14px; width:auto; }
  .bk-week.met-strip .bk-deel-slots .exc-slot small{ font-size:11px; }
}

/* ── 9/8: datumstrook + snelste moment + vaste bevestigbalk (vraag Bart) ── */
.bk-dagstrip{ display:none; }
@media (max-width:780px){
  .bk-dagstrip{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:12px; padding:2px 2px 6px; scrollbar-width:none; }
  .bk-dagstrip::-webkit-scrollbar{ display:none; }
}
.bk-dagknop{ flex:0 0 auto; min-width:66px; min-height:60px; border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:7px 10px; display:flex; flex-direction:column; align-items:center; gap:1px; font-family:'Jost',sans-serif; cursor:pointer; }
.bk-dagknop .dg-naam{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#6E7168); }
.bk-dagknop .dg-num{ font-size:15px; font-weight:600; color:var(--ink); }
.bk-dagknop .dg-tel{ font-size:11px; color:var(--muted-light,#8B8D83); }
.bk-dagknop.vandaag{ border-color:#c9a24b; }
.bk-dagknop.on{ background:var(--sage); border-color:var(--sage); }
.bk-dagknop.on .dg-naam,.bk-dagknop.on .dg-num,.bk-dagknop.on .dg-tel{ color:#fff; }
.bk-snelste{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; font-size:14px; color:var(--muted,#6E7168); }
.bk-snelste button{ border:1.5px solid var(--sage); background:#fff; color:var(--ink); border-radius:999px; padding:8px 18px; font-family:'Jost',sans-serif; font-size:14.5px; cursor:pointer; transition:background .12s ease,color .12s ease; }
.bk-snelste button:hover{ background:var(--sage); color:#fff; }
.bk-kiesbalk{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(34,36,31,.10); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:12px; }
.bk-kiesbalk .kb-tekst{ flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-kiesbalk .kb-knop{ flex:0 0 auto; padding:10px 18px; min-height:44px; }
@media (min-width:781px){ .bk-kiesbalk{ display:none !important; } }

/* ── 6/8: reeks-planner (vast moment) — kalender per moment + meegroeiend overzicht ── */
.exc-serie{ max-width:1160px; }
.bk-serie-cols{ display:flex; gap:28px; align-items:flex-start; margin-top:26px; }
.bk-serie-momenten{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:20px; }
.bk-moment{ background:var(--paper-soft); border:1px solid var(--line); border-radius:18px; padding:18px 20px 22px; }
.bk-moment-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.bk-moment-nr{ font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--ink); }
.bk-moment-doel{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--sage); }
.bk-moment .bk-weeknav{ margin-top:12px; }
.bk-moment .bk-week{ margin-top:12px; }
.bk-moment .bk-daycol{ background:#fff; }
.bk-none-sm p{ font-size:14.5px; margin-top:12px; }
/* overzichtspaneel */
.bk-serie-overzicht{ flex:0 0 312px; position:sticky; top:20px; }
.bk-ov-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 8px 30px rgba(34,36,31,.06); }
.bk-ov-lijst{ list-style:none; margin:6px 0 18px; padding:0; display:flex; flex-direction:column; gap:2px; }
.bk-ov-lijst li{ display:flex; gap:8px; align-items:baseline; padding:9px 4px; border-bottom:1px solid var(--paper-soft); font-size:14.5px; }
.bk-ov-lijst li:last-child{ border-bottom:none; }
.bk-ov-nr{ color:var(--sage); font-weight:600; flex:none; }
.bk-ov-tekst{ color:var(--ink); text-transform:capitalize; }
.bk-ov-lijst li.leeg .bk-ov-tekst{ color:var(--muted,#9a9a90); font-style:italic; text-transform:none; }
.bk-ov-btn{ width:100%; }
.bk-ov-card .bk-note{ margin-top:12px; }
.bk-ov-terug{ display:inline-block; margin-top:10px; font-size:13.5px; color:var(--sage); text-decoration:none; }
.bk-ov-terug:hover{ text-decoration:underline; }
@media (max-width:900px){
  .bk-serie-cols{ flex-direction:column; }
  .bk-serie-overzicht{ position:static; flex:1 1 auto; width:100%; order:2; }
  .bk-serie-momenten{ order:1; width:100%; }
}

/* 8/8: keuze "ben je hier al geweest?" op de registratiepagina */
.registration-page .exc-keuze{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.registration-page .exc-keuze-optie{
  flex:1 1 260px; position:relative; display:block; cursor:pointer;
  background:var(--paper-soft); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px 14px 44px; transition:border-color .18s ease, background .18s ease;
}
.registration-page .exc-keuze-optie input{ position:absolute; left:16px; top:18px; margin:0; }
.registration-page .exc-keuze-optie:hover{ border-color:var(--sage); background:#fff; }
.registration-page .exc-keuze-optie:has(input:checked){ border-color:var(--sage); background:#fff; box-shadow:0 0 0 1px var(--sage) inset; }
.registration-page .exc-keuze-n{ display:block; font-size:15.5px; color:var(--ink); }
.registration-page .exc-keuze-d{ display:block; font-size:13.5px; color:#7A7D73; margin-top:2px; }
@media (max-width:560px){ .registration-page .exc-keuze-optie{ flex:1 1 100%; } }

/* ============================================================
   8/8: de geboortedatum-lijstjes op /register kregen hier ooit een EIGEN kopie van de
   dropdownstijlen. Sinds de component centraal staat, won die kopie van de centrale regels:
   op een gsm verborg ze zowel de nieuwe lijst als het originele veld, waardoor er onder het
   label "Geboortedatum" niets meer stond. Alleen de plaatsing blijft hier; het uiterlijk komt
   nu van de centrale .exc-dd-regels, zodat dit niet opnieuw uiteen kan lopen.
   ============================================================ */
.registration-page .date-picker-wrapper{ display:flex; gap:10px; flex-wrap:wrap; }
.registration-page .exc-dd{ flex:0 1 auto; }
.registration-page .exc-dd-btn{ min-width:104px; }

/* 8/8: vrij tekstveld op het inplanverzoek (wachtlijst) */
.exc-book .bk-veld-vol{ margin-top:18px; }
.exc-book .bk-veld-vol label{ display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8C8F85; margin-bottom:7px; }
.exc-book .bk-veld-vol .bk-optioneel{ text-transform:none; letter-spacing:0; font-size:12.5px; color:#A6A99E; }
.exc-book .bk-veld-vol textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:12px 14px; font-family:'Jost',sans-serif; font-size:15.5px; color:var(--ink);
  line-height:1.6; resize:vertical; transition:border-color .18s ease, box-shadow .18s ease;
}
.exc-book .bk-veld-vol textarea:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,146,135,.16); }
.exc-book .bk-geenpassend{ margin:18px 0 0; font-size:14.5px; color:#7A7D73; text-align:center; }
.exc-book .bk-geenpassend a{ color:var(--sage); text-decoration:underline; }

/* ============================================================
   8/8: ÉÉN gestileerde dropdown voor de hele frontend.
   Stond eerst per pagina apart (bk-dd in /boeken, exc-dd op /register), waardoor een
   nieuwe pagina — zoals het verwenmoment — de kale browserstijl hield. Deze regels zijn
   bewust NIET aan een container gebonden, zodat elke select overal hetzelfde oogt.
   ============================================================ */
@media (min-width:781px){ select.exc-dd-hidden{ display:none !important; } }
@media (max-width:780px){ .exc-dd{ display:none !important; } }
.exc-dd{ position:relative; }
.exc-dd-btn{
  width:100%; min-height:50px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:0 42px 0 14px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink);
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.exc-dd-btn:hover{ border-color:#B9C0B5; }
.exc-dd-btn.leeg{ color:#9a9d95; }
.exc-dd.open .exc-dd-btn{ border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,146,135,.16); }
.exc-dd.uit .exc-dd-btn{ background-color:#FBFAF7; color:#9a9d95; cursor:not-allowed; }
.exc-dd-list{
  position:absolute; z-index:70; top:calc(100% + 6px); left:0; min-width:100%; width:max-content;
  max-width:min(560px, 82vw); display:none; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 44px rgba(34,36,31,.14); padding:6px;
  overflow:auto; overscroll-behavior:contain;
}
.exc-dd.open .exc-dd-list{ display:block; }
.exc-dd-item{
  display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  position:relative; padding:11px 13px; border-radius:9px; font-family:'Jost',sans-serif;
  font-size:15px; color:var(--ink); white-space:nowrap;
  transition:background .14s ease, color .14s ease;
}
.exc-dd-item:hover{ background:#F3F5F1; }
.exc-dd-item.sel{ background:var(--sage); color:#fff; }
.exc-dd-item.met-prijs{ padding-right:78px; }
.exc-dd-item .dd-prijs{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:13.5px; color:var(--sage); }
.exc-dd-item.sel .dd-prijs{ color:rgba(255,255,255,.9); }
.exc-dd-kop{ padding:9px 13px 4px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#A6A99E; }
/* 8/8: lijst omhoog laten openen wanneer er onderaan te weinig plaats is */
.exc-dd-list.omhoog{ top:auto; bottom:calc(100% + 6px); }

/* ============================================================
   8/8 (vraag Bart): lange behandelingsnamen stonden op één regel en liepen onder de
   absoluut geplaatste prijs door, met een horizontale schuifbalk tot gevolg.
   Het item is nu een flexregel: de naam mag over twee regels lopen, de prijs staat
   ernaast en botst dus nooit meer.
   ============================================================ */
.exc-dd-list{ overflow-x:hidden; }
.exc-dd-item{
  display:flex; align-items:flex-start; gap:16px;
  white-space:normal; line-height:1.4;
}
.exc-dd-item.met-prijs{ padding-right:13px; }          /* de oude ruimte voor de prijs vervalt */
.exc-dd-item .dd-naam{ flex:1 1 auto; min-width:0; }
.exc-dd-item .dd-prijs{
  position:static; transform:none; flex:0 0 auto;
  margin-left:auto; white-space:nowrap; padding-top:1px;
}

/* ============================================================
   8/8 (vraag Bart): MOBIEL. Daar houden we bewust de native picker — die is op een
   telefoon prettiger en toegankelijker dan een zelfgebouwde lijst (OS-wiel, grote
   raakvlakken, werkt met schermlezers). Wat wél moest: het DICHTE veld zag er buiten
   .exc-book nog kaal uit (o.a. de geboortedatum op /register). Deze regels trekken elk
   select-veld in de frontend gelijk, zonder de native lijst af te nemen.
   ============================================================ */
@media (max-width:780px){
  .exc-shell select:not(.exc-dd-hidden){
    width:100%; min-height:52px;                 /* 52px = comfortabel raakvlak */
    border:1.5px solid var(--line); border-radius:12px; background-color:#fff;
    padding:0 42px 0 14px; font-family:'Jost',sans-serif; font-size:16px; /* 16px voorkomt inzoomen op iOS */
    color:var(--ink); line-height:1.3;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  }
  .exc-shell select:not(.exc-dd-hidden):focus{
    outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,146,135,.16);
  }
  .exc-shell select:disabled{ background-color:#FBFAF7; color:#9a9d95; }
  .exc-shell select::-ms-expand{ display:none; }
  /* de drie geboortedatum-velden naast elkaar houden, elk met genoeg breedte */
  .registration-page .date-picker-wrapper{ display:flex; gap:8px; }
  .registration-page .date-picker-wrapper select{ flex:1 1 0; min-width:0; padding-right:32px; background-position:right 10px center; }
}

/* ============================================================
   8/8 — correcties uit de mobiele audit
   ============================================================ */
@media (max-width:780px){
  /* P1: de drie geboortedatumvelden stonden in gelijke kolommen; na de padding bleef er op
     320px maar ~20px tekstruimte over ("Da(g", "Ma", "Jaa"). Nu mogen ze afbreken naar een
     tweede rij en heeft elk veld een leesbare minimumbreedte. "september" is de langste waarde. */
  .registration-page .date-picker-wrapper{ flex-wrap:wrap; gap:8px; }
  .registration-page .date-picker-wrapper select{
    flex:1 1 auto; padding-right:30px; background-position:right 9px center;
  }
  .registration-page .date-picker-wrapper select[name$="Day"]{ min-width:88px; }
  .registration-page .date-picker-wrapper select[name$="Month"]{ min-width:124px; flex-grow:2; }
  .registration-page .date-picker-wrapper select[name$="Year"]{ min-width:96px; }

  /* P2 + P3: op /boeken/Duo deelden het datumveld en de knop een tweekolomsrooster. Daardoor
     stak de knoptekst buiten zijn pil ("OEK DUO-MOMENTEN") en werd de datum afgekapt tot
     "08/08/2". Onder elkaar zetten geeft beide de volle breedte. */
  .exc-book .bk-fields, .exc-book .bk-fields.w2, .exc-book .bk-fields.w3c, .exc-book .bk-fields.w4{
    grid-template-columns:1fr !important;
  }
  .exc-book .bk-btn{ width:100%; white-space:normal; }

  /* P5: de :focus-regel draait de pijl om. Op een telefoon blijft het veld gefocust nadat de
     systeempicker sluit, dus stond de pijl permanent omhoog terwijl het veld dicht was. */
  .exc-shell select:not(.exc-dd-hidden):focus{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9287' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  }

  /* P4: een native select kapt een lange behandelingsnaam af, waardoor de klant zijn keuze en
     de prijs niet meer kan nalezen. Onder het veld tonen we daarom de volledige gekozen waarde. */
  .exc-keuze-echo{ margin:6px 2px 0; font-size:13.5px; line-height:1.45; color:#7A7D73; }
  .exc-keuze-echo strong{ color:var(--ink); font-weight:400; }
}
/* detailregel in een dropdown-item ("naam (detail)") — hoort bij de centrale dropdown */
.exc-dd-item .dd-sub{ display:block; font-size:12.5px; color:#8b8e85; margin-top:1px; }
.exc-dd-item.sel .dd-sub{ color:rgba(255,255,255,.85); }
/* met het toetsenbord aangewezen item (nog niet gekozen) */
.exc-dd-item.actief{ background:#EDF0EA; }
.exc-dd-item.actief.sel{ background:var(--sage); }

/* ============================================================
   8/8 (vraag Bart): ook op mobiel onze eigen lijst. De native lijst was niet te stylen
   én niet in breedte te sturen — bij lange behandelingsnamen liep hij buiten het scherm.
   Op smalle schermen tonen we de lijst als een paneel dat van onderen opkomt: volle
   breedte, grote raakvlakken, en dus per definitie nooit buiten beeld.
   ============================================================ */
@media (max-width:780px){
  /* de eigen knop komt terug (stond eerder verborgen op mobiel) */
  .exc-dd{ display:block !important; }
  .exc-shell select.exc-dd-hidden{ display:none !important; }
  .exc-dd-btn{ min-height:52px; font-size:16px; }

  html.exc-dd-paneel, html.exc-dd-paneel body{ overflow:hidden; }
  .exc-dd.open::before{                       /* verduistering achter het paneel */
    content:""; position:fixed; inset:0; z-index:300; background:rgba(26,28,24,.42);
  }
  .exc-dd.open .exc-dd-list{
    position:fixed; z-index:310; left:0; right:0; bottom:0; top:auto;
    width:auto; min-width:0 !important; max-width:none !important;
    max-height:72vh !important; padding:14px 10px calc(14px + env(safe-area-inset-bottom));
    border:none; border-radius:18px 18px 0 0; box-shadow:0 -14px 40px rgba(26,28,24,.22);
    animation:excPaneelOp .18s ease-out;
  }
  @keyframes excPaneelOp{ from{ transform:translateY(14px); opacity:.6 } to{ transform:none; opacity:1 } }
  .exc-dd-list .exc-dd-sluit{
    display:block; margin:0 4px 6px auto; width:40px; height:40px; border:none; background:none;
    font-size:26px; line-height:1; color:var(--muted); cursor:pointer;
  }
  .exc-dd-item{ padding:14px 16px; font-size:16px; min-height:52px; align-items:center; }
  .exc-dd-item .dd-prijs{ font-size:15px; }
  .exc-dd-kop{ padding:10px 16px 6px; }
}

/* ============================================================
   8/8 (vraag Bart): op smalle schermen bleven brede inline-paddings van het ontwerp staan.
   Op 375px slikte "padding:0 56px 96px" 112px op, waardoor een kaart maar 263px breed werd —
   veel witruimte links en rechts. De bestaande correctie ving alleen "padding:96px 56px" af.
   Deze drie patronen dekken álle 56px/48px-varianten die in de pagina's voorkomen.
   ============================================================ */
@media (max-width:760px){
  /* 9/8: [style*="px 56px"] matchte ook op MARGE-teksten (bv. margin:48px 56px op het
     over-ons-blok) en duwde daar onbedoeld 20px padding in. Nu enkel bij echte padding. */
  .page [style*="padding"][style*="px 56px"],
  .page [style*="padding:0 56px"],
  .page [style*="padding:56px"],
  .page [style*="padding"][style*="px 48px"],
  .page [style*="padding:0 48px"]{
    /* 9/8: 18 -> 20px, zodat deze blokken exact even breed staan als de hero, de
       contactstrook, de troevenkaart en het over-ons-blok (die staan allemaal op 20px). */
    padding-left:20px !important; padding-right:20px !important;
  }
}

/* filterchips compacter op smalle schermen (stonden op 3 rijen) */
@media (max-width:560px){
  .exc-fchip{
    padding:8px 13px !important; font-size:12.5px !important; line-height:1.2;
    min-height:36px; display:inline-flex; align-items:center;
  }
  .exc-fchip + .exc-fchip{ margin:0; }
  /* de rij zelf wat strakker */
  .page [style*="display:flex"][style*="flex-wrap:wrap"]{ gap:7px !important; }
}

/* 8/8 (vraag Bart): "Alles" bleef gemarkeerd naast de gekozen filter. Oorzaak: die knop had zijn
   donkere look als INLINE stijl, terwijl het script enkel de klasse .on weghaalt. Naast het
   herstellen van de opmaak dwingen we hier af dat een chip zonder .on er altijd neutraal uitziet —
   zo kan een ingebakken stijl dit nooit meer stukmaken. */
.exc-fchip:not(.on){
  background:#fff !important; color:#5B5E55 !important; border:1px solid #DEDCD4 !important;
}

/* 8/8 (vraag Bart): twee knoppen naast elkaar werden op een gsm samengeperst en braken allebei
   over twee regels. De klasse .exc-cta wordt in _Root.cshtml automatisch op ELKE rij met twee of
   meer pilknoppen gezet — thema-views én pagina-inhoud — zodat dit nooit per pagina moet.
   De opvulling verhuist van de omhullende span naar de link zelf, zodat de hele pil aantikbaar is
   en niet enkel de letters. */
.exc-cta > span{ padding:0 !important; overflow:hidden; }
.exc-cta > span > a,
.exc-cta > a:not(.exc-cadeau){
  display:flex; flex:1 1 auto; align-items:center; justify-content:center;
  padding:16px 30px; color:inherit; text-align:center; text-decoration:none;
}
/* 9/8: het cadeaubolletje staat óók in zo'n rij, maar is rond en houdt zijn eigen maat */
.exc-cta > a.exc-cadeau{ flex:0 0 auto; padding:0; }

@media (max-width:560px){
  .exc-cta{ flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  .exc-cta > span,
  .exc-cta > a:not(.exc-cadeau){ width:100% !important; }
  .exc-cta > span > a,
  .exc-cta > a:not(.exc-cadeau){ padding:15px 16px; letter-spacing:.09em; font-size:12.5px; }
  /* rij met knop + bolletje: naast elkaar houden, niet stapelen */
  .exc-cta:has(> a.exc-cadeau){ flex-direction:row !important; align-items:center !important; }
  .exc-cta:has(> a.exc-cadeau) > span{ flex:1 1 auto; width:auto !important; }
}

/* ============================================================
   8/8 — BASISLAAG VOOR ALLE FORMULIEREN (vraag Bart: "één keer goed, niet per pagina").
   De veldstijlen stonden telkens per pagina (.login-page, .registration-page, .exc-book).
   Alles wat daar niet bij zat — klantgegevens, adresboek, wachtwoord wijzigen, contact,
   zoeken — hield de standaardvelden van nopCommerce: 21px hoog en 13px tekst, waardoor een
   telefoon bij het aantikken inzoomt. Deze laag geldt site-breed en is bewust laag in
   voorrang: bestaande pagina-regels blijven winnen, alles zonder eigen regel volgt nu vanzelf.
   ============================================================ */
.exc-shell input[type=text], .exc-shell input[type=email], .exc-shell input[type=password],
.exc-shell input[type=tel], .exc-shell input[type=number], .exc-shell input[type=search],
.exc-shell input[type=url], .exc-shell input[type=date], .exc-shell input[type=time],
.exc-shell select:not(.exc-dd-hidden), .exc-shell textarea{
  width:100%; max-width:100%; min-height:48px; box-sizing:border-box;
  border:1.5px solid #E4E2DA; border-radius:12px; background:#fff;
  padding:12px 14px; font-family:'Jost',sans-serif; font-size:16px; color:#22241F;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.exc-shell textarea{ min-height:110px; line-height:1.6; }
.exc-shell input:hover:not([type=checkbox]):not([type=radio]),
.exc-shell select:not(.exc-dd-hidden):hover, .exc-shell textarea:hover{ border-color:#B9C0B5; }
.exc-shell input:focus:not([type=checkbox]):not([type=radio]),
.exc-shell select:not(.exc-dd-hidden):focus, .exc-shell textarea:focus{
  outline:none; border-color:#8A9287; box-shadow:0 0 0 3px rgba(138,146,135,.16);
}
.exc-shell input::placeholder, .exc-shell textarea::placeholder{ color:#A6A99E; }
.exc-shell input[type=checkbox], .exc-shell input[type=radio]{
  width:20px; height:20px; min-height:0; accent-color:#8A9287;
}

/* knoppen van nopCommerce zelf in dezelfde pil als de rest van de site.
   De eigen componenten (boeking, keuzelijst, kalender, chips) houden hun eigen stijl. */
.exc-shell .button-1, .exc-shell .button-2,
.exc-shell input[type=submit], .exc-shell input[type=button]{
  min-height:48px; padding:13px 28px; border:0; border-radius:999px;
  background:#8A9287; color:#fff; font-family:'Jost',sans-serif; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.exc-shell .button-2{ background:#fff; color:#5B5E55; border:1px solid #DEDCD4; }
.exc-shell .button-1:hover, .exc-shell .button-2:hover,
.exc-shell input[type=submit]:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(34,36,31,.16); filter:brightness(.97); }

/* aantikbare regels groot genoeg en met lucht ertussen */
.exc-shell .block .list li a, .exc-shell .customer-navigation a{ display:block; padding:11px 0; }
.exc-shell .viewmode-icon{ display:inline-block; min-height:44px; line-height:44px; padding:0 12px; }
.exc-shell .viewmode-icon + .viewmode-icon{ margin-left:10px; }
.exc-shell .footer a{ display:inline-block; padding:6px 0; }
.exc-shell .ui-slider-handle{ margin-left:0 !important; }

@media (max-width:560px){
  /* de onderste voetbalk perste copyright en btw-nummer op één regel */
  .exc-shell .footer-lower, .exc-shell .footer-lower > div{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ============================================================
   8/8 — boekingsmodule op een gsm (bevindingen uit de doorlichting).
   ============================================================ */
@media (max-width:560px){
  /* weeknavigatie: "vorige week / 10 augustus – 16 augustus 2026 / volgende week" stond op één
     regel; het datumlabel kreeg 60px en viel uiteen over vijf regels. */
  .bk-weeknav{ flex-wrap:wrap; gap:10px; }
  .bk-weeklabel{ order:-1; flex:1 0 100%; font-size:19px; }
  .bk-weeknav-btn{ flex:1 1 0; min-height:44px; padding:9px 12px; }

  /* aantikbaar oppervlak: chips en herhaalknoppen haalden 34–36px */
  .exc-book .bk-cat{ min-height:40px; }
  .exc-book .bk-cats{ gap:8px; }
  .exc-book .bk-rpill{ min-height:40px; padding:9px 13px; }

  /* tijdsloten plakten met 6px tegen elkaar */
  .exc-book .bk-daytimes{ gap:10px; }

  /* een lange behandelingsnaam werd in de keuzeknop afgekapt ("Gelaat-, hoofdhuid- en oo…"),
     waardoor de klant zijn eigen keuze en de prijs niet meer kon nalezen. Twee regels mag. */
  .exc-dd-btn{
    white-space:normal; overflow:visible; text-overflow:clip;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    line-height:1.35; padding-top:9px; padding-bottom:9px; height:auto; min-height:52px;
  }
}

/* de filterchips op /behandelingen haalden 36px; 40px is de ondergrens om vlot aan te tikken
   en blijft even compact (alleen de hoogte, niet de breedte) */
.exc-fchip{ min-height:40px; }

/* ============================================================
   9/8 — kruimelpad (vraag Bart). "Home · Behandelingen · Massages" stond als gewone tekst
   op elke pagina; de stappen ervoor zijn nu echte links (in de pagina-inhoud zelf, zodat
   ook Google ze ziet). _Root.cshtml legt ze aan op pagina's waar ze nog ontbreken.
   ============================================================ */
.exc-kruimel a{ color:inherit; text-decoration:none; transition:color .15s ease; }
.exc-kruimel a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ============================================================
   8/8 — cadeaubon per behandeling (vraag Bart). Naast elke Reserveren-knop staat een
   discreet cadeau-icoon dat het aanvraagformulier meteen op díe behandeling zet
   (/cadeaubon-aanvragen?behandeling=<zelfde id als /boeken?t=>). Bewust klein en omlijnd,
   zodat het naast de hoofdknop niet om aandacht vecht.
   ============================================================ */
.exc-cadeau{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  border:1px solid #DEDCD4; color:#8A9287; background:#fff; text-decoration:none;
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.exc-cadeau svg{ width:19px; height:19px; }
.exc-cadeau:hover{ border-color:#8A9287; background:#8A9287; color:#fff; transform:translateY(-1px); }
.exc-prijsrij{ gap:12px !important; }

/* 9/8 (vraag Bart): het bolletje was hoger dan de Reserveren-knop ernaast (40 tegen 30) en
   sprong daardoor uit de regel. Het volgt nu exact de hoogte van die knop. */
.exc-prijsrij .exc-cadeau{ width:30px; height:30px; flex-basis:30px; }
.exc-prijsrij .exc-cadeau svg{ width:16px; height:16px; }

/* dezelfde knop, maar dan in de knoppenrij bovenaan een pagina — daar is de hoofdknop groter */
.exc-cadeau.groot{ width:51px; height:51px; flex-basis:51px; }
.exc-cadeau.groot svg{ width:22px; height:22px; }

/* De tekst die eerst op de knop stond, verschijnt nu bij het zweven. Op een gsm bestaat
   zweven niet en zou de ballon buiten het scherm kunnen vallen — daar tonen we hem niet. */
.exc-cadeau[data-tip]{ position:relative; }
.exc-cadeau[data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:#22241F; color:#fff; font-size:12px; letter-spacing:.04em; text-transform:none;
  padding:8px 13px; border-radius:9px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s ease; z-index:5;
}
.exc-cadeau[data-tip]:hover::after, .exc-cadeau[data-tip]:focus-visible::after{ opacity:1; }
/* in de prijslijst staat het bolletje tegen de rechterrand: de ballon groeit daar naar links,
   anders zou hij buiten de kolom (en op smallere schermen buiten de pagina) vallen */
.exc-prijsrij .exc-cadeau[data-tip]::after{ left:auto; right:0; transform:none; }

@media (max-width:560px){
  .exc-prijsrij{ gap:11px !important; }   /* niet krapper dan 10px: anders plakken prijs en knop */
  .exc-cadeau{ width:38px; height:38px; flex-basis:38px; }
  .exc-cadeau svg{ width:18px; height:18px; }
  /* op een gsm blijven knop én bolletje wél groot genoeg om te raken: allebei 38px */
  .exc-prijsrij .exc-cadeau{ width:38px; height:38px; flex-basis:38px; }
  .exc-prijsrij .exc-cadeau svg{ width:18px; height:18px; }
  /* "Afspraak maken" op één regel houden in de prijsrijen; bij arrangementen staan er vier
     kolommen naast elkaar en brak het label anders middenin. */
  .exc-prijsrij > .exc-pilknop > a{ min-height:38px; white-space:nowrap; font-size:10.5px; letter-spacing:.06em; padding-left:12px; padding-right:12px; }
  .exc-cadeau.groot{ width:44px; height:44px; flex-basis:44px; }
  .exc-cta:has(> a.exc-cadeau) > span > a{ min-height:44px; }
  .exc-cadeau[data-tip]::after{ display:none; }
}

/* 8/8: melding wanneer het zoeken zelf is doorgesprongen naar de eerste week met plaats */
.exc-book .bk-eerstevrij{
  margin:10px 0 0; padding:11px 14px; border-radius:12px;
  background:#F3F5F1; border:1px solid #E1E5DD;
  font-size:14px; line-height:1.6; color:#5B5E55; text-align:center;
}

/* 8/8: cadeaubon — behandeling en bedrag staan naast elkaar open i.p.v. als twee tabs */
.exc-book .gc-blok{ padding:16px 18px; border:1px solid #E8E7E0; border-radius:14px; background:#FDFDFB; margin-top:14px; }
.exc-book .gc-bloktitel{
  display:block; margin-bottom:12px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:#8C8F85;
}
.exc-book .gc-blok .bk-note{ margin-bottom:0; }

/* ============================================================
   8/8 — prijslijsten netjes uitlijnen (vraag Bart).
   ============================================================ */
/* De looptijd (2u15, 1u45, 2u) is per regel even breed als zijn tekst, waardoor de kolom
   rafelig oogt. Een vaste, rechts uitgelijnde kolom zet ze onder elkaar. De selector grijpt
   alleen bij regels die ÉCHT een looptijd hebben: dat zijn de regels met vier kolommen
   (looptijd, prijs, reserveren, cadeau) — bij drie kolommen ontbreekt de looptijd. */
.exc-prijsrij > span:first-child:nth-last-child(4){
  min-width:54px; text-align:right; flex:0 0 auto;
}
/* Ook de prijs zelf: "€ 158" is breder dan "€ 99", en omdat de regel rechts uitlijnt schoof
   dat verschil de looptijd ervoor telkens een paar pixels op. Vaste kolom = alles op één lijn.
   Vier kolommen = mét looptijd (prijs is de tweede), drie kolommen = zonder (prijs is de eerste). */
.exc-prijsrij > span:nth-child(2):nth-last-child(3),
.exc-prijsrij > span:first-child:nth-last-child(3){
  min-width:66px; text-align:right; flex:0 0 auto;
}

/* Het label stond niet mooi in het midden van de pil: de link was een gewoon blok, dus de
   tekst hing aan de regelhoogte van het lettertype in plaats van aan het midden van de knop.
   Dit geldt voor élke pilknop met een link, niet alleen voor "Reserveren". */
span[style*="border-radius:999px"]:has(> a), .exc-pilknop{ align-items:center; justify-content:center; }
span[style*="border-radius:999px"] > a, .exc-pilknop > a{
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* ============================================================
   8/8 — sectiekop op de homepagina (vraag Bart). Op een gsm brak de titel over drie regels
   en werd "Alles bekijken" ernaast geperst tot twee regels met een streepje eronder — dat
   week af van de rest van de site. De link volgt nu dezelfde stijl als "Ontdek ons aanbod →"
   op de andere pagina's, en op een smal scherm staat hij onder de titel.
   ============================================================ */
.exc-meer{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#8A9287; text-decoration:none; transition:gap .18s ease, color .18s ease;
}
.exc-meer:hover{ gap:12px; color:#6C7568; }

/* De sectiekop is een rij (titel links, "alles bekijken" rechts). Op een gsm brak de titel
   daardoor over drie regels terwijl de link ernaast ruimte innam. Onder 560px staat de titel
   over de volle breedte en de link eronder, op dezelfde linkerlijn als de rest van het blok. */
.exc-sectiekop{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
@media (max-width:560px){
  .exc-sectietitel{ font-size:32px !important; line-height:1.15; }
  .exc-meer{ font-size:12.5px; }
  .exc-sectiekop{ flex-direction:column; align-items:flex-start; gap:18px; }
  .exc-sectiekop > *{ width:100%; }
  .exc-sectiekop .exc-meer{
    width:auto; border:1px solid #D8D6CE; border-radius:999px; padding:13px 22px; background:#fff;
  }
}

/* De hero heeft op een breed scherm een vaste hoogte (480px) met de tekst er absoluut in.
   Op een gsm staan de twee knoppen onder elkaar en past dat niet meer: de onderste knop
   stak door de afgeronde onderrand. Daar groeit de hero nu gewoon mee met zijn inhoud. */
/* 9/8 (vraag Bart): op de homepagina staat alles even breed als de inhoud van de kop,
   dus 56px van de paginarand — net als de banners op de andere pagina's. */
.exc-hero{ margin:28px 56px 0; border-radius:20px !important; }

/* 9/8 (vraag Bart): tussen álle blokken op de homepagina dezelfde ruimte, ±1,5cm (56px).
   De ruimtes stonden op 0/22/26/48 dooreen; hier staan ze op één plek gelijkgetrokken. */
.html-home-page .exc-contactblok{ padding-top:45px; }
.html-home-page .exc-contact{ margin-top:0; }
.html-home-page .exc-usp{ margin-top:45px; margin-bottom:0; }
.html-home-page .exc-band{ margin-top:45px !important; margin-bottom:0 !important; }
.html-home-page .exc-overons{ margin-top:45px !important; margin-bottom:45px !important; }  /* wint zo van de inline-marge */
@media (max-width:760px){
  /* op een gsm dezelfde verhouding, iets compacter */
  .html-home-page .exc-contactblok{ padding-top:32px; }
  .html-home-page .exc-usp{ margin-top:32px; }
  .html-home-page .exc-band{ margin-top:32px !important; }
  .html-home-page .exc-overons{ margin-top:32px !important; margin-bottom:32px !important; }
}
/* op een gsm plakte dit blok tegen de sectie erboven */
@media (max-width:760px){
  .exc-overons{ margin:26px 20px !important; }
  .exc-band{ margin-left:20px !important; margin-right:20px !important; }
}

/* 9/8: de fotobanners bovenaan /behandelingen en /arrangementen hebben een vaste hoogte;
   op een gsm heeft de tekst meer plaats nodig en liep hij tegen de onderrand. Zelfde
   oplossing als de hero: de banner groeit daar mee met zijn inhoud. */
@media (max-width:560px){
  .exc-paginabanner{ height:auto !important; margin:16px 20px 0 !important; }
  .exc-paginabanner > img{ position:absolute; inset:0; height:100% !important; }
  .exc-paginabanner > div:last-child{ position:relative !important; inset:auto !important; padding:36px 20px !important; }
}

@media (max-width:560px){
  .exc-hero{ height:auto !important; margin:16px 20px 0; }
  .exc-hero > img{ position:absolute; inset:0; height:100% !important; }
  .exc-hero > div:last-child{ position:relative !important; inset:auto !important; padding:40px 20px !important; }
}

/* ============================================================
   8/8 — contactblok (vraag Bart). Het salon staat vaak in behandeling en kan tussendoor wél
   snel een bericht beantwoorden, maar niet opnemen. Eerst stond dat als een lange zin met een
   telefoonnummer in de lopende tekst; nu twee duidelijke knoppen — WhatsApp eerst, bellen
   ernaast — met één korte zin erbij. Eén component, overal hetzelfde.
   ============================================================ */
/* Op een breed scherm zweefden de twee knoppen midden op de regel met een gat erachter.
   Het blok is nu één rustig strookje: tekst links, knoppen rechts, tegen dezelfde randen
   als de rest van de pagina. */
/* 9/8: even breed als de hero en de secties eronder — de zijmarge van 56px maakte
   deze twee kaarten smaller dan de rest en dat oogde onrustig. */
.exc-contactblok{ padding:24px 56px 0; }
.exc-contact{
  display:flex; align-items:center; justify-content:space-between; gap:14px 28px; flex-wrap:wrap;
  margin:14px 0 0; background:#FBFAF7; border:1px solid #EDEBE4; border-radius:18px; padding:18px 24px;
}
.exc-contact-t{ margin:0; font-size:13.5px; line-height:1.6; color:#6E7168; max-width:640px; }
.exc-contact-k{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.exc-kanaal{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:999px; padding:13px 22px; font-size:13px; letter-spacing:.06em;
  text-decoration:none; white-space:nowrap; transition:background .18s ease, border-color .18s ease;
}
.exc-kanaal svg{ width:16px; height:16px; flex:0 0 16px; }
/* 9/8: terug naar de oorspronkelijke stijl. De WhatsApp-knop was altijd wit met een dun
   randje (net als de belknop); ik had hem opgevuld gemaakt zonder dat daarom gevraagd was. */
.exc-kanaal.wa{ border:1px solid #D8D6CE; background:#fff; color:#3A3D36; }
.exc-kanaal.wa:hover{ border-color:#B9B6AC; }
.exc-kanaal.tel{ border:1px solid #D8D6CE; background:#fff; color:#3A3D36; }
.exc-kanaal.tel:hover{ border-color:#B9B6AC; }
/* op een donkere achtergrond: geen lichte kaart eromheen */
.exc-contact.op-foto{ background:transparent; border:0; padding:0; }
.exc-contact.op-foto .exc-contact-t{ color:rgba(255,255,255,.92); }
.exc-contact.op-foto .exc-kanaal.wa{ background:transparent; color:#fff; border-color:rgba(255,255,255,.65); }
.exc-contact.op-foto .exc-kanaal.wa:hover{ border-color:#fff; }
.exc-contact.op-foto .exc-kanaal.tel{ background:transparent; color:#fff; border-color:rgba(255,255,255,.65); }
@media (max-width:560px){
  .exc-contactblok{ padding:18px 20px 0; }
  .exc-contact{ gap:12px; padding:16px 18px; }
  .exc-contact-t{ font-size:13px; }
  /* meteen onder elkaar, in de CSS zelf: liet de centrale laag dit pas ná het laden doen,
     dan sprong de pagina nog even in elkaar (gemeten met de CLS-test op 8/8). */
  .exc-contact-k{ width:100%; gap:10px; flex-direction:column; }
  .exc-contact-k .exc-kanaal{ width:100%; min-width:0; padding:13px 10px; }
}

/* ============================================================
   9/8 — de vier troeven onder de hero (vraag Bart). Die strook liep van rand tot rand en
   plakte tegen het contactblok erboven; daardoor las ze als één blok met de knoppen.
   Ze staat nu als eigen kaart, op dezelfde breedte en met dezelfde ronding als de rest.
   ============================================================ */
.exc-usp{
  margin:22px 56px 26px; border:1px solid #EDEBE4; border-radius:18px; overflow:hidden;
}
.exc-usp > div{ padding:26px 30px !important; }
.exc-usp > div > span:first-child{ line-height:1.2; }
@media (max-width:760px){
  /* .page [style*="grid-template-columns"] hierboven zet élk raster op één kolom; voor deze
     vier korte troeven is dat onnodig lang, dus houden we er twee naast elkaar. */
  .page .exc-usp{ margin:32px 20px 0; grid-template-columns:1fr 1fr !important; }
  .page .exc-usp > div{ padding:20px 16px !important; }
  .page .exc-usp > div > span:first-child{ font-size:21px !important; }
  .page .exc-usp > div > span:last-child{ font-size:12.5px !important; }
}

/* 9/8 (vraag Bart): de scheidingslijn onder de kop liep van rand tot rand, terwijl de inhoud
   eronder 56px inspringt. De lijn volgt nu dezelfde marge als de rest van de pagina. */
.site-header{ border-bottom:0 !important; position:relative; }
.site-header::after{
  content:''; position:absolute; left:56px; right:56px; bottom:0; height:1px; background:#E8E7E0;
}
@media (max-width:760px){ .site-header::after{ left:22px; right:22px; } }

/* 9/8 (vraag Bart): de voettekst zit in dezelfde kolom als de rest van de pagina, waardoor
   de donkere band links en rechts wit liet. Hij loopt nu over de volle schermbreedte door,
   terwijl de inhoud erin op dezelfde lijn blijft als de rest. */
/* De voettekst staat buiten .page (die is 1280 breed en snijdt af), dus de band loopt door.
   De inhoud erin blijft wel op dezelfde linkerlijn als de rest van de pagina. */
.exc-voet{
  /* het lettertype stond als inline-stijl op .page; buiten die kolom moet het hier staan,
     anders valt de voettekst terug op het standaardlettertype en breken de regels anders */
  font-family:'Jost',sans-serif;
  padding-left:max(56px, calc(50vw - 640px + 56px)) !important;
  padding-right:max(56px, calc(50vw - 640px + 56px)) !important;
}
@media (max-width:760px){
  /* de drie kolommen moeten op een gsm onder elkaar. Dat deed het algemene vangnet
     (.page [style*="grid-template-columns"]) vroeger, maar de voettekst staat nu buiten .page. */
  .exc-voet{ padding-left:22px !important; padding-right:22px !important; grid-template-columns:1fr !important; }
  .exc-voet.exc-voet-onder{ flex-wrap:wrap; gap:8px; }
}

/* Een kaart met een foto is in haar geheel aantikbaar (zie _Root.cshtml, functie kaarten).
   Deze regels geven dat alleen nog te zien; het klikgedrag zit in de centrale laag. */
[data-exc-kaart="1"]{ transition:transform .2s ease, box-shadow .2s ease; }
[data-exc-kaart="1"]:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(29,32,27,.08); }

/* 9/8: de tegels op de homepagina zijn even hoog (raster), maar het witte tekstblok erin
   volgde alleen zijn eigen inhoud. Bij een korte omschrijving stopte het wit dus vroeger
   dan de kaart en zag je de afgeronde onderhoek niet. Het blok vult nu de hele kaart. */
.exc-tegels > div{ display:flex; flex-direction:column; }
.exc-tegels > div > div:last-child{ flex:1 1 auto; }

/* 8/8 (vraag Bart): in het mobiele menu stonden de hoofditems 71px uit elkaar en de
   account-items 51px. Nu overal dezelfde tussenhoogte. De knop houdt zijn breedte maar
   wordt lager. */
@media (max-width:1000px){
  .site-nav{ gap:0 !important; }
  .site-nav > span{ margin:0 !important; }
  .site-nav .exc-nav-cta{ margin-top:16px; padding:0 !important; }
  .site-nav .exc-nav-cta a{ min-height:0 !important; padding:15px 22px !important; width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   11/8 — herontworpen boekscherm: voorstellen in plaats van een weekrooster.
   Het scherm bootst het telefoongesprek na: het eerlijke eerste moment bij jouw
   medewerker, een paar alternatieven, en "kan het vroeger bij iemand anders?".
   ══════════════════════════════════════════════════════════════════════════════ */

/* stap 1: één veld breed in plaats van het oude raster van drie */
.exc-book .bk-step .bk-fields:not(.w2):not(.w3c){ grid-template-columns:minmax(0,1fr); }
.exc-book .bk-behandeling{
  display:block; font-family:'Jost',sans-serif; font-size:14px; letter-spacing:.02em;
  color:#8A8D82; margin-top:4px; text-transform:none;
}

/* ── bij wie? — pillen in plaats van een keuzelijst ── */
.exc-book .bk-wie{ display:flex; flex-wrap:wrap; gap:10px; }
.exc-book .bk-wiepil{
  border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:0 22px; height:48px; display:inline-flex; align-items:center; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:15px;
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.exc-book .bk-wiepil:hover{ border-color:var(--sage); transform:translateY(-1px); box-shadow:0 4px 12px rgba(34,36,31,.10); }
.exc-book .bk-wiepil.on{ background:var(--sage); border-color:var(--sage); color:#fff; }
/* 17/8: agenda die pas later online opengaat — grijs en onklikbaar, met de datum in het klein */
.exc-book .bk-wiepil.dicht{ background:#F1EFE9; border-color:#E0DED6; color:#8B8D83; cursor:default; }
.exc-book .bk-wiepil.dicht:hover{ border-color:#E0DED6; transform:none; box-shadow:none; }
.exc-book .bk-wiepil.dicht small{ display:block; font-size:11px; letter-spacing:.02em; line-height:1.3; }
.exc-book .bk-wienota{ margin:14px 0 0; font-size:14px; color:#8A8D82; }

/* ── de voorstelkaartjes ── */
.exc-book .bk-voorstellen{ display:flex; flex-direction:column; gap:9px; }
/* 12/8 (vraag Bart): dag en uur stonden onder elkaar, waardoor de kaarten hoog werden.
   Nu alles op één lijn — "woensdag 12 augustus · 10:00" — en een stuk compacter. */
.exc-book .bk-voorstel{
  width:100%; text-align:left; cursor:pointer; background:#fff;
  border:1.5px solid var(--line); border-radius:14px; padding:12px 18px;
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:16px;
  font-family:'Jost',sans-serif;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.exc-book .bk-voorstel:hover{ border-color:var(--sage); transform:translateY(-1px); box-shadow:0 6px 18px rgba(34,36,31,.10); }
/* 12/8 (vraag Bart): het eerste voorstel had een eigen kleur en een gevulde knop. Dat gaf
   het meer gewicht dan het verdient — het is gewoon het vroegste moment, geen aanbeveling.
   Alle kaarten zien er nu hetzelfde uit; enkel de gekozen kaart kleurt op. */
.exc-book .bk-voorstel.gekozen{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-book .bk-voorstel.gekozen .bk-vs-wie,
.exc-book .bk-voorstel.gekozen .bk-vs-dag{ color:rgba(255,255,255,.85); }
.exc-book .bk-voorstel.gekozen .bk-vs-cta{ background:#fff; color:var(--sage); border-color:#fff; }

.exc-book .bk-vs-wanneer{ display:flex; flex-direction:row; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap; }
/* enkel de eerste letter van de dagnaam: in het Nederlands schrijf je "augustus" klein */
.exc-book .bk-vs-dag{ font-size:15px; color:#6E7168; }
.exc-book .bk-vs-dag::first-letter{ text-transform:uppercase; }
.exc-book .bk-vs-tijd{ font-family:'Cormorant Garamond',serif; font-size:23px; line-height:1.15; }
.exc-book .bk-vs-tijd::before{ content:'·'; color:#C7C8C1; margin-right:10px; font-family:'Jost',sans-serif; font-size:15px; }
.exc-book .bk-vs-wie{ font-size:14.5px; color:#6E7168; white-space:nowrap; }
.exc-book .bk-vs-cta{
  border:1px solid var(--sage); color:var(--sage); border-radius:999px;
  padding:0 18px; height:38px; display:inline-flex; align-items:center; white-space:nowrap;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}


/* ── 22/8: "dit kan wél" bij een verwenmoment dat nergens past ──
   Twee behandelingsnamen passen niet in de voorstelkaartjes hierboven (die rekenen op
   één korte regel en zetten .bk-vs-wie op nowrap). Vandaar een eigen kaart: naam boven,
   wanneer eronder, knop rechts — en op een gsm de knop over de volle breedte. */
.exc-book .bk-alts{ display:flex; flex-direction:column; gap:10px; }
.exc-book .bk-alt{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px;
  background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:14px 18px;
  text-decoration:none; color:var(--ink); font-family:'Jost',sans-serif;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.exc-book .bk-alt:hover{ border-color:var(--sage); transform:translateY(-1px); box-shadow:0 6px 18px rgba(34,36,31,.10); }
.exc-book .bk-alt-tekst{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.exc-book .bk-alt-namen{ font-family:'Cormorant Garamond',serif; font-size:21px; line-height:1.25; }
.exc-book .bk-alt-wanneer{ font-size:14.5px; color:#6E7168; }
.exc-book .bk-alt-wanneer::first-letter{ text-transform:uppercase; }
.exc-book .bk-alt-cta{
  border:1px solid var(--sage); color:var(--sage); border-radius:999px;
  padding:0 18px; height:38px; display:inline-flex; align-items:center; white-space:nowrap;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
@media (max-width:700px){
  .exc-book .bk-alt{ grid-template-columns:1fr; }
  .exc-book .bk-alt-cta{ width:100%; justify-content:center; height:36px; }
}

/* ── "kan het vroeger?" bij een collega ── */
.exc-book .bk-vroeger{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.exc-book .bk-vroeger-kop{ font-family:'Cormorant Garamond',serif; font-size:22px; margin-bottom:14px; }
.exc-book .bk-voorstel.ander{ background:#FBFAF7; }

/* ── "meer momenten tonen" ── */
.exc-book .bk-alles{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:18px; }
.exc-book .bk-alledag-kop{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6E7168; margin-bottom:9px; }
.exc-book .bk-alledag-uren{ display:flex; flex-wrap:wrap; gap:9px; }

/* ── de uitwegen: nooit doodlopen op een leeg scherm ── */
.exc-book .bk-uitwegen{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.exc-book .bk-uitweg-kop{ display:block; font-size:14.5px; color:#6E7168; margin-bottom:12px; }
/* 22/8 (Bart): één stijl voor alle uitwegen. Vroeger stonden hier drie soorten door elkaar
   — gevulde pillen, omlijnde pillen en onderstreepte tekstlinks — en dat oogde rommelig.
   Nu zijn het allemaal dezelfde omlijnde pillen; de klassen nadruk/nadruk-vol blijven
   bestaan zodat de views ongemoeid blijven, maar ze zien er identiek uit. */
.exc-book .bk-uitweg-knoppen{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.exc-book .bk-link,
.exc-book .bk-link.nadruk,
.exc-book .bk-link.nadruk-vol{
  background:#fff; color:var(--ink); border:1px solid #D8D6CE; border-radius:999px;
  padding:0 20px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:'Jost',sans-serif; text-decoration:none;
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.exc-book .bk-link:hover,
.exc-book .bk-link.nadruk:hover,
.exc-book .bk-link.nadruk-vol:hover{ border-color:var(--sage); color:var(--sage); background:#fff; }
/* 22/8 (Bart): stap 3 heeft twee tabs — onze suggesties en zelf een dag kiezen. Eén
   segmentbalk, geen open/dicht-box meer, zodat de pagina in één oogopslag leesbaar blijft. */
.exc-book .bk-subtabs{ display:flex; gap:6px; background:var(--paper-soft,#F6F4EE); border:1px solid var(--line); border-radius:999px; padding:5px; margin:0 0 20px; }
.exc-book .bk-subtab{ flex:1 1 0; border:none; background:none; cursor:pointer; border-radius:999px; padding:0 18px; height:42px;
  font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#6E7168;
  transition:background .15s ease, color .15s ease; white-space:nowrap; }
.exc-book .bk-subtab:hover{ color:var(--ink); }
/* 22/8 (Bart): de actieve tab viel te weinig op in het wit — nu gevuld, zoals de tabs
   bovenaan de pagina. */
.exc-book .bk-subtab.on{ background:var(--sage); color:#fff; box-shadow:0 2px 8px rgba(34,36,31,.14); }
.exc-book .bk-subtab.on:hover{ color:#fff; }
.exc-book .bk-pane[hidden]{ display:none; }
.exc-book .bk-dagdelen{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; }
.exc-book .bk-panekop{ margin:0 0 16px; font-family:'Cormorant Garamond',serif; font-size:23px; color:var(--ink); }
.exc-book .bk-bereik{ margin-top:20px; }
.exc-book .bk-zelf-momenten{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.exc-book .bk-periode-voet{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:560px){
  .exc-book .bk-subtabs{ flex-direction:column; border-radius:18px; }
  .exc-book .bk-subtab{ width:100%; }
  .exc-book .bk-periode-voet .bk-btn{ width:100%; }
}
.exc-book .bk-periode{ margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.exc-book .bk-periode label{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6E7168; }
.exc-book .bk-periode input{
  height:48px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:0 14px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink);
}

@media (max-width:700px){
  /* twee rijen in plaats van drie: wanneer + bij wie samen bovenaan, de knop eronder.
     Drie rijen maakte de kaart 133px hoog op een gsm. */
  .exc-book .bk-voorstel{ grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:12px 14px 14px; }
  .exc-book .bk-vs-wie{ white-space:nowrap; align-self:center; }
  .exc-book .bk-vs-cta{ grid-column:1 / -1; width:100%; justify-content:center; height:36px; }
  .exc-book .bk-wiepil{ flex:1 1 auto; justify-content:center; }
  .exc-book .bk-uitweg-knoppen{ flex-direction:column; align-items:flex-start; gap:12px; }
  .exc-book .bk-link, .exc-book .bk-link.nadruk, .exc-book .bk-link.nadruk-vol{ width:100%; justify-content:center; }
}
@media (max-width:480px){
  /* 17/8: "donderdag 20 augustus · 09:00 bij Illiana" paste net niet meer op één lijn
     op 390px — iets kleinere typografie houdt ook de langste dag/maand-combinatie op één rij */
  .exc-book .bk-vs-wanneer{ gap:7px; }
  .exc-book .bk-vs-dag{ font-size:13.5px; }
  .exc-book .bk-vs-tijd{ font-size:19px; }
  .exc-book .bk-vs-tijd::before{ margin-right:6px; }
  .exc-book .bk-vs-wie{ font-size:13.5px; }
}

/* aanvraagformulier: voorkeursdagen met zachte drukte-indicatie */
.exc-book .bk-datums{ display:flex; flex-direction:column; gap:10px; }
.exc-book .bk-datumrij{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.exc-book .bk-datum{
  height:48px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:0 14px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink); min-width:190px;
}
.exc-book .bk-drukte{ font-size:14px; color:#8A8D82; }
.exc-book .bk-drukte.ruim{ color:var(--sage); }
.exc-book .bk-drukte.krap{ color:#B07D3A; }
.exc-book .bk-drukte.volzet, .exc-book .bk-drukte.gesloten{ color:#A65A4E; }
.exc-book textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:12px 14px; font-family:'Jost',sans-serif; font-size:16px; color:var(--ink); resize:vertical;
}

/* 11/8 — herboek-kaart op "mijn voorkeuren": één klik naar dezelfde behandeling bij dezelfde persoon */
.exc-book .bk-herboek{
  background:var(--paper-soft); border:1px solid var(--sage); border-radius:20px;
  padding:22px 26px; margin-top:26px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.exc-book .bk-herboek-tekst{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.exc-book .bk-herboek-kop{ font-family:'Cormorant Garamond',serif; font-size:24px; }
.exc-book .bk-herboek-detail{ font-size:15px; color:#6E7168; }
@media (max-width:700px){
  .exc-book .bk-herboek{ padding:18px; }
  .exc-book .bk-herboek .bk-btn{ width:100%; }
}

/* 11/8 — publieke voorproef: één datum, geen uren. Beantwoordt "kan ik ergens terecht?" */
.exc-book .bk-eerstepubliek{
  background:var(--paper-soft); border:1px solid var(--sage); border-radius:16px;
  padding:26px 28px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.exc-book .bk-ep-kop{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6E7168; }
.exc-book .bk-ep-dag{ font-family:'Cormorant Garamond',serif; font-size:36px; line-height:1.15; text-transform:capitalize; }
.exc-book .bk-ep-nota{ font-size:15px; color:#6E7168; }
@media (max-width:700px){
  .exc-book .bk-ep-dag{ font-size:28px; }
  .exc-book .bk-eerstepubliek{ padding:20px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   12/8 — twee dingen die Bart opmerkte op het herontworpen boekscherm
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1. De behandeling-dropdown werd afgeknipt aan de bovenkant van de footer.
      Het leek een z-index-probleem, maar dat was het niet: de lijst staat op
      z-index 70 en de footer heeft er geen. De échte oorzaak is `.page{overflow:hidden}`
      (regel 15) — die knipt élk kind af dat buiten de pagina valt, en de pagina eindigt
      precies waar de donkere band begint. Gemeten: onderkant .page = 1032,78px,
      bovenkant .exc-voet = 1032,78px.

      `overflow-y:visible` naast `overflow-x:hidden` bestaat niet — de browser maakt daar
      automatisch `auto` van. `overflow-x:clip` heeft die bijwerking níét, dus daarmee
      blijft horizontaal knippen behouden terwijl dropdowns weer vrij naar beneden mogen
      uitklappen. De oude regel blijft staan als vangnet voor browsers zonder `clip`.

      Dit geldt meteen voor álle dropdowns op de hele site, niet enkel die op Combi. */
@supports (overflow-x: clip) {
  .page{ overflow:visible; overflow-x:clip; }
}

/* 2. "Account maken" kreeg donkere tekst op de saliegroene knop.
      Oorzaak: `.exc-cta > a:not(.exc-cadeau){color:inherit}` — die regel bestaat zodat de
      tekst in een pil-CTA de kleur van de pil volgt, en ze is één puntje specifieker
      (0,2,1) dan `.exc-book .bk-btn` (0,2,0). Voor een knop die zijn eigen kleur meebrengt
      is dat verkeerd. Deze regel staat later en is even specifiek, dus ze wint. */
.exc-book a.bk-btn{ color:#fff; }
.exc-book a.bk-btn:hover{ color:#fff; }
.exc-book a.bk-btn-ghost{ color:var(--ink); }
.exc-book a.bk-btn-ghost:hover{ color:var(--sage); }

/* ══════════════════════════════════════════════════════════════════════════════
   12/8 — periodekiezer: maandkalender + dagdeel-pillen (vraag Bart, voorbeeld Fresha)
   Eén component, gebruikt op /boeken en op het aanvraagformulier.
   ══════════════════════════════════════════════════════════════════════════════ */
/* 12/8 (vraag Bart): de kalender was veel te hoog. Het raster rekte mee met de volle
   breedte van de kaart en de dagvakjes waren vierkant, waardoor ze zo'n 85px hoog werden.
   Nu houdt het blad zijn natuurlijke breedte (~320px, zoals elke maandkalender) en zijn
   de vakjes vast en compact. */
.exc-cal{ display:flex; flex-direction:column; gap:16px; }
/* de snelkoppelingen staan nu bóven de kalender in plaats van in een eigen kolom: op een
   latere maand vallen ze weg, en dan bleef er anders een lege kolom staan */
.exc-cal-snel{ display:flex; flex-direction:row; gap:10px; flex-wrap:wrap; }
.exc-cal-snel.leeg{ display:none; }
.exc-cal-snel:empty{ display:none; }   /* 22/8: Vandaag/Morgen staan uit — geen lege ruimte laten */
.exc-cal-maanden{ display:flex; gap:34px; flex-wrap:wrap; }
.exc-cal-snelknop{
  border:1.5px solid var(--line); background:#fff; border-radius:12px; cursor:pointer;
  padding:9px 14px; min-width:126px; text-align:left; font-family:'Jost',sans-serif;
  display:flex; flex-direction:column; gap:1px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.exc-cal-snelknop strong{ font-size:14.5px; font-weight:500; }
.exc-cal-snelknop span{ font-size:13px; color:#8A8D82; }
.exc-cal-snelknop:hover{ border-color:var(--sage); transform:translateY(-1px); }
.exc-cal-snelknop.aan{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-cal-snelknop.aan span{ color:rgba(255,255,255,.82); }

.exc-cal-blad{ min-width:0; width:308px; max-width:100%; }
/* twee maanden op een ruim scherm: pijl links op de eerste maand, pijl rechts op de tweede.
   Ze blijven wel staan (visibility) zodat de koppen even breed blijven. */
@media (min-width:900px){
  .exc-cal-blad[data-offset="0"] .exc-cal-nav[data-r="1"]{ visibility:hidden; }
  .exc-cal-blad[data-offset="1"] .exc-cal-nav[data-r="-1"]{ visibility:hidden; }
}
@media (max-width:899px){
  .exc-cal-blad[data-offset="1"]{ display:none; }
}
.exc-cal-kop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.exc-cal-maand{ font-family:'Cormorant Garamond',serif; font-size:20px; }
/* 17/8: visueel 30px, maar het aantikvlak is 42px (onzichtbare rand errond) —
   groter maken verschoof de layout en liet de browser bij focus 9px scrollen */
.exc-cal-nav{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; width:30px; height:30px;
  cursor:pointer; font-size:15px; line-height:1; color:var(--ink);
  transition:border-color .18s ease, color .18s ease;
  position:relative;
}
.exc-cal-nav::after{ content:""; position:absolute; inset:-6px; border-radius:999px; }
.exc-cal-nav:hover{ border-color:var(--sage); color:var(--sage); }
.exc-cal-dagkoppen, .exc-cal-raster{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
/* zes rijen van 36px plus vijf tussenruimtes: de kalender houdt altijd dezelfde hoogte,
   ook bij een maand die maar vijf rijen nodig heeft */
.exc-cal-raster{ min-height:226px; align-content:start; }
/* tijdens het ophalen van een maand blijft de oude staan en vervaagt ze licht — leegmaken
   zou het blok laten inklappen en weer uitklappen, en dat is net het springen */
.exc-cal.bezig .exc-cal-raster{ opacity:.45; transition:opacity .12s ease; }
.exc-cal.bezig .exc-cal-dag{ pointer-events:none; }
.exc-cal-dagkoppen span{ text-align:center; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#9C9E93; padding-bottom:4px; }
.exc-cal-dag{
  border:1px solid transparent; background:none; border-radius:9px; cursor:pointer; padding:0;
  height:36px; font-family:'Jost',sans-serif; font-size:14.5px; color:var(--ink);
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.exc-cal-dag:hover:not(:disabled){ background:#F3F5F1; }
.exc-cal-dag.vandaag{ border-color:var(--sage); }
.exc-cal-dag.aan{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-cal-dag.dicht{ color:#CDCEC7; cursor:not-allowed; }
.exc-cal-laden{ grid-column:1/-1; text-align:center; color:#9C9E93; font-size:14px; padding:16px 0; }

.exc-cal-dagdelen{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:7px; padding-top:14px; border-top:1px solid var(--line); }
/* 22/8 (Bart): compacter, zodat de vier keuzes op een breed scherm op één rij passen. */
.exc-cal-dagdeel{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; cursor:pointer;
  padding:0 14px; height:38px; font-family:'Jost',sans-serif;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.exc-cal-dagdeel strong{ font-size:13.5px; font-weight:500; }
.exc-cal-dagdeel span{ font-size:12px; color:#8A8D82; }
.exc-cal-dagdeel:hover{ border-color:var(--sage); transform:translateY(-1px); }
.exc-cal-dagdeel.aan{ background:var(--sage); border-color:var(--sage); color:#fff; }
.exc-cal-dagdeel.aan span{ color:rgba(255,255,255,.82); }

.exc-cal-hint{ margin:12px 0 0; font-size:13.5px; color:#8A8D82; }

@media (max-width:640px){
  .exc-cal{ gap:14px; }
  .exc-cal-blad{ width:100%; }
  .exc-cal-maanden{ gap:0; }
  .exc-cal-snelknop{ flex:1 1 0; min-width:0; }
  /* de pillen blijven één lijn, maar vullen de breedte zodat ze aantikbaar blijven */
  .exc-cal-dagdelen{ gap:7px; }
  .exc-cal-dagdeel{ flex:1 1 100%; justify-content:space-between; padding:0 18px; }
}
/* tussenmaat: twee pillen naast elkaar in plaats van vier smalle of vier volle */
@media (min-width:641px) and (max-width:899px){
  .exc-cal-dagdeel{ flex:1 1 calc(50% - 4px); justify-content:space-between; }
}
.exc-book .bk-drukte-lijst{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.exc-book .bk-dagdeelnota{ margin:0 0 16px; font-size:14.5px; color:#B07D3A; }

/* 12/8 — een vast moment als één blok, met alle datums erbij (vraag Bart) */
.exc-book .bk-reeks{
  border:1px solid var(--sage); border-radius:16px; background:var(--paper-soft);
  padding:18px 20px; margin-bottom:16px;
}
.exc-book .bk-reeks-kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.exc-book .bk-reeks-titel{ display:block; font-family:'Cormorant Garamond',serif; font-size:22px; line-height:1.2; }
.exc-book .bk-reeks-sub{ display:block; font-size:14px; color:#6E7168; margin-top:2px; }
.exc-book .bk-reeks-weg{
  background:none; border:1px solid #D8D6CE; border-radius:999px; cursor:pointer;
  padding:0 16px; height:34px; font-family:'Jost',sans-serif; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:#8A8D82;
}
.exc-book .bk-reeks-weg:hover{ border-color:#A65A4E; color:#A65A4E; }
.exc-book .bk-reeks-lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.exc-book .bk-reeks-lijst li{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); padding:9px 14px;
}
.exc-book .bk-reeks-lijst li:first-child{ border-radius:10px 10px 0 0; }
.exc-book .bk-reeks-lijst li:last-child{ border-radius:0 0 10px 10px; }
.exc-book .bk-reeks-lijst li:only-child{ border-radius:10px; }
.exc-book .bk-reeks-lijst li + li{ border-top:none; }
.exc-book .bk-reeks-wanneer{ font-size:15px; }
.exc-book .bk-reeks-wanneer::first-letter{ text-transform:uppercase; }
.exc-book .bk-reeks-status{ font-size:12.5px; color:#8A8D82; white-space:nowrap; }
.exc-book .bk-reeks-status.ok{ color:var(--sage); }
.exc-book .bk-reeks-wijzig{ font-size:13.5px; color:var(--sage); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.exc-book .bk-reeks-nota{ margin-top:10px; }
@media (max-width:640px){
  .exc-book .bk-reeks{ padding:14px; }
  .exc-book .bk-reeks-lijst li{ grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
  .exc-book .bk-reeks-wijzig{ grid-column:1 / -1; }
}

/* 12/8 — reeks-planner: meteen zeggen hoeveel momenten echt vastliggen en waarom de rest niet */
.exc-book .bk-ov-stand{ margin:10px 0 0; font-size:15px; }
.exc-book .bk-ov-waarschuwing{
  margin:10px 0 0; font-size:13.5px; line-height:1.6; color:#8A5A3A;
  background:#FBF6F0; border:1px solid #EADFD2; border-radius:10px; padding:9px 12px;
}
.exc-book .bk-ov-waarschuwing.zacht{ color:#6E7168; background:var(--paper-soft); border-color:var(--line); }

/* Lokale lettertypes. Kwamen eerst van fonts.googleapis.com met display=swap: de pagina
   werd dan eerst met een vervangletter getekend en sprong daarna in vorm — dat was op bijna
   elke pagina de grootste verschuiving. Nu staan ze op onze eigen server, worden de vier
   meest gebruikte vooraf geladen (zie Head.cshtml) en staat display op 'optional', zodat de
   browser tekst nooit meer verschuift nadat ze getekend is. Bijwerken: fonts2.py opnieuw draaien. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-ext-f3bda5d4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-4db21dbf.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-ext-f3bda5d4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-4db21dbf.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-ext-26a769c8.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-abcaa8b4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-ext-26a769c8.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-abcaa8b4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-ext-26a769c8.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-abcaa8b4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-ext-26a769c8.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:optional;src:url(/Themes/Excellence/Content/fonts/CormorantGaramond-latin-abcaa8b4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:optional;src:url(/Themes/Excellence/Content/fonts/Jost-latin-ext-1bb29fad.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:optional;src:url(/Themes/Excellence/Content/fonts/Jost-latin-b58a5805.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:optional;src:url(/Themes/Excellence/Content/fonts/Jost-latin-ext-1bb29fad.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:optional;src:url(/Themes/Excellence/Content/fonts/Jost-latin-b58a5805.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:optional;src:url(/Themes/Excellence/Content/fonts/Jost-latin-ext-1bb29fad.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:optional;src:url(/Themes/Excellence/Content/fonts/Jost-latin-b58a5805.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}