@charset "UTF-8";/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.list-unstyled{padding-left:0;list-style:none}.container{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-12{flex:0 0 auto;width:100%}.g-0{--bs-gutter-x:0}.g-0{--bs-gutter-y:0}.g-2{--bs-gutter-x:0.5rem}.g-2{--bs-gutter-y:0.5rem}.g-3{--bs-gutter-x:1rem}.g-3{--bs-gutter-y:1rem}.g-4{--bs-gutter-x:1.5rem}.g-4{--bs-gutter-y:1.5rem}.g-5{--bs-gutter-x:3rem}.g-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-6{flex:0 0 auto;width:50%}}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}}@media (min-width:992px){.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.g-lg-4{--bs-gutter-x:1.5rem}.g-lg-4{--bs-gutter-y:1.5rem}.g-lg-5{--bs-gutter-x:3rem}.g-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl-3{flex:0 0 auto;width:25%}}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");width:2em;margin-left:-2.5em;background-image:var(--bs-form-switch-bg);background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:var(--bs-form-valid-border-color)}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:var(--bs-form-valid-color)}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:var(--bs-form-valid-color)}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.btn.disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.dropdown-item.disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.nav-link.disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text-emphasis);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{border-radius:0}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}@keyframes progress-bar-stripes{0%{background-position-x:var(--bs-progress-height)}}.list-group-item.disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.btn-close.disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--bs-btn-close-disabled-opacity)}:root,[data-bs-theme=light]{--bs-btn-close-filter: }[data-bs-theme=dark]{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}:root,[data-bs-theme=light]{--bs-carousel-indicator-active-bg:#fff;--bs-carousel-caption-color:#fff;--bs-carousel-control-icon-filter: }[data-bs-theme=dark]{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}@keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.visually-hidden{width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden *{overflow:hidden!important}.d-block{display:block!important}.d-flex{display:flex!important}.position-relative{position:relative!important}.w-100{width:100%!important}.flex-grow-1{flex-grow:1!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.ms-2{margin-left:.5rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pb-2{padding-bottom:.5rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.fs-5{font-size:1.25rem!important}.text-center{text-align:center!important}@media (min-width:992px){.d-lg-none{display:none!important}.mb-lg-5{margin-bottom:3rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.text-lg-end{text-align:right!important}}
/* ═══════════════════════════════════════════════════════════════
   Huidproduct.nl, ontwerpsysteem "Helder"
   Licht, rustig en medisch. De kleuren komen uit de oude winkel: groen
   #2E963A, lichtgroen #92CDA4 en donkerblauw #334862. Voor tekst en knoppen
   gebruiken we een donkerdere tint van hetzelfde groen, want #2E963A haalt
   met witte tekst maar 3,7:1 en WCAG AA vraagt 4,5:1.
   Alle contrastverhoudingen zijn getoetst aan WCAG AA.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --ink:#1D2B3A;        /* koppen, 14.6:1 op wit */
  --text:#3B4856;       /* lopende tekst, 9.4:1 */
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --tint:#F1F8F3;       /* zacht groen vlak */
  --tint-2:#F3F6F9;     /* koel grijs vlak */
  --primary:#23802F;    /* 5.03:1 op wit, ook als knop met witte tekst */
  --primary-deep:#1A6324;
  --brand:#2E963A;      /* het merkgroen, voor accenten en iconen */
  --accent:#92CDA4;     /* lichtgroen, alleen decoratief */
  --navy:#334862;       /* 9.6:1, menubalk en links in tekst */
  --muted:#5B6878;      /* 5.6:1 */
  --on-primary:#FFFFFF;
  --ok:#23802F;
  --warn:#B45309;
  --line:rgba(29,43,58,.12);
  --line-soft:rgba(29,43,58,.06);
  --band-bg:#334862;
  --band-fg:#FFFFFF;
  --band-muted:rgba(255,255,255,.8);
  --shadow:0 10px 30px -18px rgba(29,43,58,.35);
  --shadow-lift:0 20px 44px -22px rgba(29,43,58,.42);
  --radius:14px;
  --pill:999px;
  --display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --mono:SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --bs-body-bg:var(--paper); --bs-body-color:var(--text);
  --bs-body-font-family:var(--body); --bs-border-color:var(--line);
  --bs-link-color:var(--primary); --bs-link-hover-color:var(--primary-deep);
  --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--muted);
}

/* ── Lettertypes, zelf gehost zodat er geen bezoekersgegevens naar Google gaan ──
   Plus Jakarta Sans voor koppen, Inter voor lopende tekst. */
@font-face{font-family:"Plus Jakarta Sans";src:url(/assets/fonts/jakarta-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans";src:url(/assets/fonts/jakarta-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans";src:url(/assets/fonts/jakarta-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap;}

body{background:var(--paper);color:var(--text);font-family:var(--body);line-height:1.62;
  -webkit-font-smoothing:antialiased;}
/* ── Typografische schaal ──────────────────────────────────────
   Elke stap is ongeveer anderhalf keer kleiner dan de vorige, zodat
   je op elke pagina meteen ziet wat een kop is en wat een subkop.
   De echt grote maat is voorbehouden aan de hero op de homepage. */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  text-wrap:balance;color:var(--ink);}
h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;}
h2{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.12;letter-spacing:-.02em;}
h3{font-size:1.1rem;line-height:1.3;letter-spacing:-.01em;}
h4{font-size:.98rem;}
p{max-width:66ch;}
a{text-decoration:none;color:var(--primary);}
a:hover{color:var(--primary-deep);}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px;}
img{max-width:100%;height:auto;}
/* Een <picture> om een foto heen mag geen eigen vak opleveren. Anders valt
   de img er als kind in en gaat height:100% op de picture slaan in plaats
   van op de omhullende media-box, waardoor het beeld inklapt. */
picture{display:contents;}
/* Tekst die je niet ziet maar die er wel is: een schermlezer leest hem voor en
   een zoekmachine telt hem als ankertekst. Gebruikt bij de icoonknoppen in de
   balk, want een link met alleen een icoontje erin heeft voor allebei geen
   naam. Clip in plaats van display:none, want wat verborgen is wordt niet
   voorgelezen. */
.alleen-schermlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.muted{color:var(--muted);}
.h1-cat{font-size:clamp(1.9rem,3.4vw,2.6rem);}
.h1-pdp{font-size:clamp(1.7rem,3vw,2.3rem);}
.h1-post{font-size:clamp(1.9rem,3.6vw,2.7rem);}
.h2-sm{font-size:clamp(1.35rem,2.2vw,1.7rem);}
.h2-sum{font-size:1.32rem;}
.accent-italic{font-style:italic;color:var(--primary);}
.eyebrow{font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.19em;
  text-transform:none;color:var(--primary);display:flex;align-items:center;gap:.45rem;}
.stars{color:var(--brand);letter-spacing:.08em;}
.trustline{font-size:.87rem;color:var(--muted);}
.ico{width:1em;height:1em;fill:currentColor;flex:0 0 auto;vertical-align:-.125em;}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;z-index:2000;border-radius:0 0 8px 0;}
.skip:focus{left:0;top:0;color:var(--paper);}

/* ── Knoppen ── */
.btn-hp{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-weight:700;font-size:.95rem;padding:.9rem 2rem;
  border-radius:var(--pill);border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s;}
.btn-fill{background:var(--primary);color:var(--on-primary);}
.btn-fill:hover{background:var(--primary-deep);color:var(--on-primary);transform:translateY(-2px);}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px);}
.btn-sm-hp{padding:.55rem 1.25rem;font-size:.85rem;}
.btn-hp:active:not([disabled]):not([data-state]){transform:scale(.97);}
.btn-hp[disabled],.btn-hp[aria-disabled="true"]{opacity:.45;cursor:not-allowed;
  transform:none!important;pointer-events:none;}
.btn-label{display:inline-flex;align-items:center;gap:.5rem;transition:opacity .2s,transform .2s;}
.spinner{position:absolute;inset:0;display:none;align-items:center;justify-content:center;}
.spinner::after{content:"";width:18px;height:18px;border:2.4px solid currentColor;
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-hp[data-state="loading"]{cursor:progress;pointer-events:none;}
.btn-hp[data-state="loading"] .btn-label{opacity:0;transform:translateY(-4px);}
.btn-hp[data-state="loading"] .spinner{display:flex;}
.btn-hp[data-state="done"]{background:var(--brand);color:#fff;border-color:var(--brand);}

/* ── Bovenbalk met USP's ── */
.topbar{background:var(--band-bg);color:var(--band-fg);font-size:.79rem;}
/* Links de beloftes, rechts de link naar je bestelling. */
.topbar-rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.topbar-account{display:inline-flex;align-items:center;gap:.4rem;color:var(--band-fg);
  text-decoration:none;white-space:nowrap;opacity:.85;transition:opacity .2s;}
.topbar-account:hover{opacity:1;color:var(--band-fg);text-decoration:underline;
  text-underline-offset:.2em;}
.topbar-account .ico{width:.95rem;height:.95rem;opacity:.75;}

.usp-track{display:flex;justify-content:flex-start;align-items:center;gap:2.5rem;min-height:1.5rem;
  flex:1;min-width:0;}
.usp-item{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;}
.usp-item .ico{opacity:.75;}
@media (max-width:767.98px){
  .usp-track{position:relative;display:block;height:1.5rem;flex:1;}
  .usp-item{position:absolute;inset:0;justify-content:flex-start;opacity:0;transform:translateY(70%);
    transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
    pointer-events:none;}
  .usp-item.is-active{opacity:1;transform:none;pointer-events:auto;}
}

/* ── Header ── */
.hdr{background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:1030;}
.wordmark{font-family:var(--display);font-weight:600;font-size:1.95rem;letter-spacing:-.045em;
  color:var(--ink);line-height:1;}
.wordmark:hover{color:var(--ink);}
.wordmark em{font-style:italic;color:var(--primary);}
.mainnav a{color:var(--ink);font-weight:600;font-size:.92rem;padding:.4rem 0;position:relative;}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--primary);transition:right .24s ease;}
.mainnav a:hover{color:var(--primary);}
.mainnav a:hover::after{right:0;}
/* Uitklapmenu Per budget. Opent bij aanwijzen en bij focus met het
   toetsenbord; op een tablet zonder muis opent de knop hem met een tik. */
.nav-sub{position:relative;}
.nav-sub-knop{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;padding:.4rem 0;
  color:var(--ink);font-family:var(--body);font-weight:600;font-size:.92rem;cursor:pointer;}
.nav-sub-knop .ico{width:.7em;height:.7em;transition:transform .2s;}
.nav-sub-knop:hover,.nav-sub:hover .nav-sub-knop{color:var(--primary);}
/* De bovenste opvulling is een brug, zodat het menu niet dichtklapt als de
   muis van de knop naar de lijst beweegt. */
.nav-sub-lijst{position:absolute;top:100%;left:-1rem;z-index:1040;min-width:170px;margin:0;
  padding:.6rem 0 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.nav-sub-lijst::before{content:"";position:absolute;inset:.6rem 0 0;z-index:-1;background:var(--surface);
  border:1px solid var(--line-soft);box-shadow:0 18px 40px -20px rgba(29,43,58,.45);}
.nav-sub-lijst li:last-child{padding-bottom:.45rem;}
.nav-sub-lijst li:first-child{padding-top:.45rem;}
.mainnav .nav-sub-lijst a{display:block;padding:.45rem 1rem;white-space:nowrap;}
.mainnav .nav-sub-lijst a::after{display:none;}
.mainnav .nav-sub-lijst a:hover{background:var(--tint);}
.nav-sub:hover .nav-sub-lijst,.nav-sub:focus-within .nav-sub-lijst,.nav-sub.is-open .nav-sub-lijst{
  opacity:1;visibility:visible;transform:none;}
.nav-sub:hover .nav-sub-knop .ico,.nav-sub.is-open .nav-sub-knop .ico{transform:rotate(180deg);}
.nav-sub.is-dicht:not(.is-open) .nav-sub-lijst{opacity:0;visibility:hidden;transform:translateY(6px);}
/* Links en uitklapknoppen precies even hoog, anders staat de knop lager
   dan de woorden ernaast: een knop krijgt van de browser een eigen regelhoogte. */
.mainnav > ul > li > a,.nav-sub-knop{display:inline-flex;align-items:center;line-height:1.5;
  padding:.4rem 0;white-space:nowrap;}
/* Tot 1400 pixels past het menu alleen met wat minder lucht ertussen. */
@media (max-width:1399.98px){
  .mainnav ul{gap:1rem!important;}
  .mainnav a,.nav-sub-knop{font-size:.88rem;}
}
.ico-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-soft);
  background:transparent;color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center;transition:background-color .2s,border-color .2s;}
.ico-btn:hover{background:var(--tint);border-color:var(--line);color:var(--ink);}
.badge-count{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font-size:.67rem;font-weight:800;
  display:grid;place-items:center;font-family:var(--body);}

/* ── Zwevende menuknop en zijbalk ── */
.fab-menu{position:fixed;right:16px;bottom:16px;z-index:1045;display:none;align-items:center;
  gap:.55rem;padding:.85rem 1.25rem .85rem 1.05rem;border-radius:var(--pill);
  background:var(--primary);color:var(--on-primary);border:none;font-family:var(--body);
  font-weight:800;font-size:.92rem;box-shadow:0 10px 28px -8px rgba(35,128,47,.55);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background-color .2s,opacity .22s;}
.fab-menu:hover{background:var(--primary-deep);color:var(--on-primary);}
.fab-menu:active{transform:scale(.94);}
.fab-menu[aria-expanded="true"]{opacity:0;pointer-events:none;transform:scale(.8);}
/* Tot 1200 pixels, net als het hoofdmenu in de kop: daaronder past dat menu
   niet naast het logo en de iconen. */
@media (max-width:1199.98px){.fab-menu{display:inline-flex;}}
.burger{width:18px;height:14px;position:relative;flex:0 0 auto;}
.burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .2s;}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
.scrim{position:fixed;inset:0;z-index:1050;background:rgba(29,43,58,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;}
.scrim.is-visible{opacity:1;visibility:visible;}
.sidebar{position:fixed;top:0;right:0;bottom:0;z-index:1060;width:min(86vw,380px);
  background:var(--paper);transform:translateX(100%);
  box-shadow:-18px 0 46px -26px rgba(29,43,58,.6);display:flex;flex-direction:column;
  transition:transform .36s cubic-bezier(.22,.75,.28,1);overscroll-behavior:contain;}
.sidebar.is-open{transform:translateX(0);}
.sidebar.is-dragging{transition:none;}
.sidebar-grip{width:38px;height:4px;border-radius:4px;background:var(--line);margin:.55rem auto .1rem;}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--line-soft);}
.sidebar-body{overflow-y:auto;flex:1;padding:1rem 1.25rem;-webkit-overflow-scrolling:touch;}
.sidebar-nav a{display:flex;align-items:center;font-family:var(--display);font-weight:600;
  font-size:1.24rem;color:var(--ink);padding:.7rem 0;border-bottom:1px solid var(--line-soft);
  transition:color .2s,padding-left .22s;}
.sidebar-nav a:hover,.sidebar-nav a:focus-visible{color:var(--primary);padding-left:.35rem;}
.sidebar-nav .ico{color:var(--primary);width:1.05em;}
.sidebar-nav .chev{opacity:.35;width:.75em;}
.sidebar-sub{margin-top:1.4rem;}
.sidebar-sub a{display:block;font-size:.9rem;color:var(--muted);padding:.34rem 0;font-weight:600;}
.sidebar-sub a:hover{color:var(--primary);}
.sidebar-foot{padding:1rem 1.25rem;border-top:1px solid var(--line-soft);background:var(--tint);}
.sidebar-foot p{font-size:.82rem;color:var(--muted);}
.search-side{position:relative;}
.search-side input{width:100%;border:1px solid var(--line);border-radius:var(--pill);
  padding:.65rem 2.6rem .65rem 1.1rem;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:.92rem;}
.search-side button{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--muted);width:32px;height:32px;}
body.no-scroll{overflow:hidden;}

/* ── Hero ── */
.hero{background:var(--paper);overflow:hidden;}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:.99;letter-spacing:-.034em;}
.hero-media{position:relative;}
.hero-media img{width:100%;height:auto;display:block;box-shadow:var(--shadow);}
.hero-tint{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:var(--tint);
  right:-9%;top:-9%;z-index:-1;}
/* Het label hing vroeger een stukje buiten de foto. Dat stond chic zolang de
   achtergrond licht was, maar in het donkere thema viel dat overstekende
   randje weg tegen de pagina. Nu staat het binnen de foto, links tegenover
   de stippen rechts, zodat het op elke achtergrond leesbaar blijft. */
/* Het prijslabel en de knop staan samen linksonder op de foto. Op een smal
   scherm onder elkaar, want naast elkaar past het daar niet. */
/* Het prijslabel en de knop staan naast elkaar en horen dan ook even hoog te
   zijn en op dezelfde lijn te eindigen. Met stretch neemt de kortste de hoogte
   van de langste over, zonder dat we ergens een vaste hoogte hoeven te raden
   die bij een ander lettertype weer misstaat. De stippen rechts staan op
   dezelfde onderlijn. */
.hero-actie{position:absolute;left:14px;bottom:18px;display:flex;align-items:stretch;gap:.6rem;
  flex-wrap:wrap;max-width:calc(100% - 96px);}
.hero-knop{padding:.6rem 1.15rem;font-size:.85rem;display:inline-flex;align-items:center;
  justify-content:center;}
@media (max-width:767.98px){
  /* Op een telefoon passen het prijslabel, de knop en de stippen niet naast
     elkaar op een regel: de knop liep dwars over de stippen heen. De stippen
     gaan daarom naar de bovenkant van de foto, waar toch niets staat. Dan houdt
     de onderrand ruimte voor de twee dingen waar je echt op klikt. */
  .hero-actie{left:10px;bottom:12px;gap:.45rem;max-width:calc(100% - 20px);}
  .hero-knop{padding:.5rem .9rem;font-size:.78rem;}
}

.hero-tag{position:relative;left:auto;bottom:auto;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--pill);padding:.45rem 1.1rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;}
.hero-tag b{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;display:block;line-height:1.15;}
/* Het kopje strak boven de prijs, zonder de losse ruimte die een hoofdletter
   met letterafstand er vanzelf onder legt. */
.hero-tag span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:none;color:var(--muted);line-height:1.25;}

/* De hero toont vier populaire sieraden. Het schuiven doet de browser zelf
   met scroll-snap, zodat vegen op een telefoon precies aanvoelt zoals de
   bezoeker gewend is. Javascript zet alleen de tijdklok en de stippen. */
.hero-slider{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;}
.hero-slider::-webkit-scrollbar{display:none;}
.hero-track{display:flex;}
.hero-slide{flex:0 0 100%;scroll-snap-align:center;display:block;}
.hero-slide img{width:100%;height:auto;display:block;box-shadow:var(--shadow);}

.hero-stippen{position:absolute;right:14px;bottom:18px;display:flex;gap:.45rem;
  padding:.45rem .6rem;border-radius:var(--pill);background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line-soft);box-shadow:var(--shadow);}
.hero-stip{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background .25s ease,transform .25s ease;}
.hero-stip:hover{background:var(--muted);}
.hero-stip.is-actief{background:var(--ink);transform:scale(1.35);}
.hero-stip:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ── Sfeerbeeld op de startpagina ── */
/* De onderschriften verwijzen naar de sieraden die op de foto te zien zijn, want
   niets is vervelender dan iets mooi vinden en het dan niet kunnen vinden. */
.sfeer{margin:0;}
.sfeer img{width:100%;height:auto;display:block;border-radius:.9rem;box-shadow:var(--shadow);}
.sfeer figcaption{margin-top:.7rem;font-size:.85rem;color:var(--muted);}
.sfeer figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--line);}
.sfeer figcaption a:hover{color:var(--primary);text-decoration-color:currentColor;}

/* ── Beelden bij de vaste pagina's ── */
.paginabeeld{margin:2rem 0;}
.paginabeeld img{width:100%;height:auto;display:block;border-radius:.9rem;box-shadow:var(--shadow);}
.paginabeeld figcaption{margin-top:.7rem;font-size:.9rem;color:var(--muted);}

/* De maten zetten we als echte tekst over de foto en niet in het beeld zelf.
   Zo blijven ze op elk scherm scherp, kan een schermlezer ze voorlezen en
   hoeven we geen nieuwe foto te maken als er ooit een lengte bij komt. */
.meetbeeld{position:relative;}
.maatlabel{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translateY(-50%);
  background:var(--surface);color:var(--ink);border:1px solid var(--line-soft);
  border-radius:var(--pill);padding:.28rem .7rem;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;box-shadow:var(--shadow);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.maatlabel-ring{left:47.8%;top:38%;transform:translate(-50%,-50%);}

/* De maatpijl over de binnenkant van de ring. */
/* De pijl loopt precies over de binnenkant van de ring op de foto, van
   37,2% tot 58,3% van de breedte, op 51,3% van de hoogte. Nagemeten in het
   bestand zelf, want met de hand geschat staat het altijd net scheef. */
.maatpijl{position:absolute;left:37.2%;top:51.3%;width:21.1%;height:2px;background:var(--ink);
  transform:translateY(-50%);opacity:.85;}
.maatpijl::before,.maatpijl::after{content:"";position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateY(-50%);}
.maatpijl::before{left:0;border-right:8px solid var(--ink);}
.maatpijl::after{right:0;border-left:8px solid var(--ink);}

@media (max-width:575.98px){
  .maatlabel{font-size:.68rem;padding:.22rem .55rem;}
}

.cart-variant{font-size:.82rem;font-weight:600;color:var(--primary);letter-spacing:.02em;}

/* ── Kleurkeuze bij een sieraad dat in goud en zilver bestaat ── */
.variantlabel{margin:0 0 .5rem;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:none;color:var(--muted);}
.variantknoppen{display:flex;flex-wrap:wrap;gap:.5rem;}
.variantknop{font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);
  padding:.5rem 1.1rem;cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.variantknop:hover{border-color:var(--muted);}
.variantknop.is-gekozen{border-color:var(--primary);background:var(--tint);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--primary);}
.variantknop:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* Een kleur die op is blijft kiesbaar, want dan kun je een mail vragen voor
   juist die kleur. Hij staat er wel zichtbaar zachter bij. */
.variantknop.is-op{color:var(--muted);border-style:dashed;}
.variantknop.is-op.is-gekozen{color:var(--ink);}

/* Mail mij als hij er weer is */
.terugblok{background:var(--tint);border-radius:16px;padding:1.1rem 1.15rem 1rem;}
.terugblok[hidden]{display:none;}
.terug-kop{font-weight:700;margin:0 0 .3rem;display:flex;align-items:center;gap:.45rem;}
.terug-uitleg{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 .8rem;}
.terug-form{display:flex;gap:.5rem;align-items:stretch;}
.terug-form input[type=email]{flex:1 1 auto;min-width:0;border-radius:var(--pill);
  border:1px solid var(--line);padding:.8rem 1.2rem;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:.95rem;line-height:1.3;}
.terug-form input[type=email]:focus{outline:2px solid var(--primary);outline-offset:2px;}
.terug-form .btn-hp{flex:0 0 auto;white-space:nowrap;padding-inline:1.4rem;}
.terug-vink{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;line-height:1.45;
  margin:.75rem 0 0;cursor:pointer;}
.terug-vink input{margin-top:.2rem;accent-color:var(--primary);}
.terug-ook{font-size:.85rem;color:var(--muted);margin:1rem 0 .5rem;}
.terug-ook a{color:var(--primary);font-weight:600;}
.terug-mini{display:block;text-decoration:none;color:var(--ink);font-size:.78rem;line-height:1.3;}
.terug-mini img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  background:var(--surface);margin-bottom:.35rem;}
.terug-mini span{display:block;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.terug-mini b{display:block;margin-top:.15rem;font-weight:700;}
[data-koopblok][hidden]{display:none;}
.pdp-specs{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.4rem;margin:0 0 1rem;
  font-size:.95rem;}
.pdp-specs dt{font-weight:700;color:var(--muted);font-size:.78rem;letter-spacing:.06em;
  text-transform:none;padding-top:.15rem;}
.pdp-specs dd{margin:0;}

/* ── Categorietegels ── */
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.6rem 1rem;
  background:var(--surface);border:1px solid var(--line-soft);color:var(--ink);
  transition:transform .22s,box-shadow .22s,border-color .22s;height:100%;justify-content:center;}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);
  border-color:var(--primary);color:var(--ink);}
.cat-tile-ico{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--primary);
  display:grid;place-items:center;font-size:1.25rem;}
.cat-tile-ico .ico{width:1.25rem;height:1.25rem;}
.cat-tile-name{font-family:var(--display);font-weight:600;font-size:1.02rem;text-align:center;}

/* ── Productkaart ── */
.pcard{position:relative;background:transparent;height:100%;display:flex;flex-direction:column;}
.pcard-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--tint);}
.pcard-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.pcard:hover .pcard-media img{transform:scale(1.06);}
/* Tweede beeld bij hover: de video of een foto met een mens. Alleen op een
   scherm met muis, want op een telefoon bestaat hover niet. */
.pcard-hover{display:none;}
@media (hover:hover){
  .pcard-hover{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;
    transition:opacity .35s ease;pointer-events:none;}
  .pcard-hover img,video.pcard-hover{width:100%;height:100%;object-fit:cover;display:block;}
  .pcard:hover .pcard-hover{opacity:1;}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){.pcard-hover{transition:none;}}
.flag{position:absolute;top:0;left:0;z-index:2;background:var(--primary);color:var(--on-primary);
  font-family:var(--body);font-size:.66rem;font-weight:800;letter-spacing:.11em;
  text-transform:none;padding:.35rem .75rem;}
.flag-muted{background:var(--ink);color:var(--paper);}
/* Het hartje staat in de opmaak in de voet van de kaart, maar op een groter
   scherm zetten we het terug op de foto. Het is altijd zichtbaar: eerst
   verscheen het alleen bij hover, en op een telefoon bestaat hover niet,
   dus daar kon je niets bewaren zonder het te weten. */
.wish{position:absolute;top:.6rem;right:.6rem;z-index:2;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line-soft);
  color:var(--ink);display:grid;place-items:center;opacity:1;
  transition:color .2s,background-color .2s,transform .15s;cursor:pointer;}
.wish:hover{background:var(--surface);}
.wish:active{transform:scale(.92);}
.wish[aria-pressed="true"]{color:var(--primary);}
.wish[data-state="loading"]{opacity:1;color:var(--muted);}
.pcard-body{padding-top:.85rem;display:flex;flex-direction:column;gap:.28rem;flex:1;}
.pcard-cat{font-size:.68rem;letter-spacing:.13em;text-transform:none;color:var(--muted);font-weight:700;}
.pcard-name{font-family:var(--body);font-weight:600;font-size:.93rem;line-height:1.35;margin:0;}
.pcard-name a{color:var(--ink);}
.pcard-name a:hover{color:var(--primary);}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:auto;padding-top:.55rem;}
.price{font-family:var(--display);font-weight:600;font-size:1.16rem;color:var(--primary);
  font-variant-numeric:tabular-nums;}
/* Deze knop is meestal een button, maar bij een sieraad dat in meer kleuren
   bestaat is het een link naar de productpagina. Allebei zien er hetzelfde uit. */
.add{position:relative;border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:var(--pill);padding:.36rem .9rem;font-size:.79rem;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s;}
a.add:hover{color:var(--paper);}
.add:hover:not([disabled]){background:var(--ink);color:var(--paper);border-color:var(--ink);}
.add:active:not([disabled]){transform:scale(.95);}
.add[disabled]{opacity:.45;cursor:not-allowed;}
.add[data-state="loading"]{color:transparent;pointer-events:none;cursor:progress;}
.add[data-state="loading"]::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;
  animation:spin .7s linear infinite;}
.add[data-state="done"]{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ── Banden ── */
.theme-band{background:var(--tint);}
.prose-band{background:var(--surface);}
.trust{background:var(--tint-2);}
.trust-item{display:flex;gap:.85rem;align-items:flex-start;}
.trust-ico{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--surface);
  color:var(--primary);display:grid;place-items:center;}
.trust-item h3{font-size:.94rem;margin:0 0 .12rem;font-family:var(--body);font-weight:800;}
.trust-item p{font-size:.83rem;color:var(--muted);margin:0;max-width:32ch;}
.big-figure{font-family:var(--display);font-weight:600;font-size:clamp(4.5rem,11vw,8rem);
  line-height:.8;color:var(--primary);font-variant-numeric:tabular-nums;letter-spacing:-.04em;}

/* ── Kruimelpad ── */
.crumbs{font-size:.8rem;color:var(--muted);}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--primary);}
.crumbs span{opacity:.5;margin:0 .4rem;}

/* ── Lopende tekst ── */
.prose h2{font-size:clamp(1.35rem,2.1vw,1.7rem);margin:2.6rem 0 .7rem;line-height:1.15;}
.prose h2:first-child{margin-top:0;}
/* De subkop krijgt bewust het andere lettertype. Dat zet hem duidelijker
   apart van de h2 dan alleen een kleiner formaat zou doen. */
.prose h3{font-family:var(--body);font-weight:800;font-size:1.02rem;letter-spacing:.005em;
  margin:1.9rem 0 .45rem;line-height:1.4;color:var(--ink);}
.prose h3:first-child{margin-top:0;}
.prose p{color:var(--muted);margin-bottom:.95rem;line-height:1.68;}
.prose p.lead-p{color:var(--ink);font-size:1.1rem;line-height:1.6;margin-bottom:1.6rem;}
.prose > :last-child{margin-bottom:0;}
/* ── Lijsten in lopende tekst. Alleen kale <ul>/<ol>, zodat lijsten met een
      eigen klasse (zoals .gegevens) hun eigen opmaak houden. ── */
.prose ul:not([class]),.prose ol:not([class]){
  color:var(--muted);margin:0 0 1.6rem;padding-left:0;list-style:none;}
.prose ul:not([class])>li,.prose ol:not([class])>li{
  position:relative;margin-bottom:.72rem;line-height:1.68;}
.prose ul:not([class])>li{padding-left:1.75rem;}
.prose ul:not([class])>li:last-child,.prose ol:not([class])>li:last-child{margin-bottom:0;}
.prose ul:not([class])>li::before{content:"";position:absolute;left:.3rem;top:.78em;
  width:.4rem;height:.4rem;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 .22rem var(--tint);}
.prose ol:not([class]){counter-reset:ll;}
.prose ol:not([class])>li{counter-increment:ll;padding-left:2.5rem;}
.prose ol:not([class])>li::before{content:counter(ll);position:absolute;left:0;top:.05em;
  width:1.65rem;height:1.65rem;border-radius:50%;background:var(--tint);color:var(--primary);
  font-family:var(--body);font-size:.78rem;font-weight:800;line-height:1.65rem;text-align:center;}
.prose ul:not([class])>li>strong:first-child,
.prose ol:not([class])>li>strong:first-child{color:var(--ink);font-weight:700;}
.prose li>ul:not([class]),.prose li>ol:not([class]){margin:.6rem 0 0;}
.prose li>ul:not([class])>li::before{background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--primary);}
.prose a{text-decoration:underline;text-underline-offset:2px;}
/* Een brede tabel in een artikel mag de pagina niet zijwaarts laten schuiven.
   Hij schuift binnen zijn eigen vak, met een randje zodat je ziet dat er meer
   staat. De tabel zelf blijft de opmaak van .tbl gebruiken. */
.prose .tabel-scroll{overflow-x:auto;margin:1rem 0 1.5rem;
  border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);}
.prose .tabel-scroll .tbl{margin:0;min-width:34rem;}
.prose .tbl th,.prose .tbl td{vertical-align:top;}
.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--line-soft);
  --bs-accordion-btn-color:var(--ink);--bs-accordion-active-color:var(--primary);
  --bs-accordion-active-bg:transparent;--bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-body-color:var(--muted);--bs-accordion-border-radius:0;}
.accordion-button{font-family:var(--display);font-weight:600;font-size:1.02rem;padding-left:0;padding-right:2.5rem;}
.accordion-button:not(.collapsed){box-shadow:none;}
.accordion-body{padding-left:0;}
.tbl{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-variant-numeric:tabular-nums;}
.tbl caption{caption-side:top;text-align:left;font-size:.8rem;color:var(--muted);padding-bottom:.5rem;}
.tbl th,.tbl td{border-bottom:1px solid var(--line-soft);padding:.55rem .6rem;text-align:left;font-size:.92rem;}
.tbl th{font-family:var(--body);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:none;}
.notice-draft{background:var(--tint-2);border-left:3px solid var(--brand);padding:.9rem 1.1rem;margin-bottom:1.5rem;}
.notice-draft p{margin:0;font-size:.88rem;color:var(--ink);}
.todo{background:var(--tint);padding:0 .3rem;border-radius:3px;color:var(--primary);font-weight:700;}

/* ── Productpagina ── */
.pdp-media{background:var(--tint);overflow:hidden;}
.pdp-media img{width:100%;height:auto;display:block;}
.pdp-thumbs{display:flex;gap:.6rem;flex-wrap:wrap;}
.pdp-thumbs img{width:78px;height:78px;object-fit:cover;background:var(--tint);
  border:1px solid var(--line-soft);cursor:pointer;}
.pdp-price{font-family:var(--display);font-weight:600;font-size:2rem;color:var(--primary);
  font-variant-numeric:tabular-nums;}
.pdp-vat{font-family:var(--body);font-size:.78rem;font-weight:600;color:var(--muted);
  margin-left:.5rem;letter-spacing:.02em;}
.pdp-intro{color:var(--muted);}
.pdp-intro p{margin-bottom:.6rem;}
.stock-in{color:var(--ok);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.4rem;}
.stock-out{color:var(--muted);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.4rem;}
.pdp-usp{border-top:1px solid var(--line-soft);padding-top:1.1rem;margin-top:.5rem;}
.pdp-usp li{display:flex;align-items:center;gap:.6rem;font-size:.87rem;color:var(--muted);padding:.32rem 0;}
.pdp-usp .ico{color:var(--primary);}

/* ── Aantalkiezer ── */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--pill);overflow:hidden;background:var(--surface);}
.qty button{width:34px;height:44px;background:transparent;border:0;color:var(--ink);
  font-size:1rem;display:grid;place-items:center;cursor:pointer;transition:background-color .18s;}
.qty button:hover:not([disabled]){background:var(--tint);}
.qty button[disabled]{opacity:.3;cursor:not-allowed;}
.qty output{min-width:34px;text-align:center;font-weight:700;font-size:.92rem;
  font-variant-numeric:tabular-nums;}

/* ── Winkelwagen ── */
.cart-row{display:grid;grid-template-columns:88px 1fr auto;gap:1rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line-soft);align-items:start;}
.cart-row img{width:88px;height:88px;object-fit:cover;background:var(--tint);}
.cart-name{font-family:var(--body);font-weight:700;font-size:.95rem;margin:0 0 .15rem;}
.cart-name a{color:var(--ink);}
.cart-meta{font-size:.79rem;color:var(--muted);}
.cart-remove{background:none;border:0;color:var(--muted);font-size:.79rem;font-weight:600;
  text-decoration:underline;padding:0;cursor:pointer;}
.cart-remove:hover{color:var(--primary);}
.cart-line-total{font-family:var(--display);font-weight:600;font-size:1.05rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.cart-skeleton span{display:block;height:88px;background:var(--tint);margin-bottom:1.15rem;
  animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.summary{background:var(--tint);padding:1.5rem;position:sticky;top:96px;}
.sum-row{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;font-size:.92rem;}
.sum-row.total{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.8rem;
  font-family:var(--display);font-weight:600;font-size:1.32rem;}
.sum-row .v{font-variant-numeric:tabular-nums;}
.sum-row.discount .v{color:var(--primary);font-weight:700;}
.sum-note{font-size:.76rem;color:var(--muted);}
.coupon-label{display:block;margin-bottom:.5rem;font-size:.85rem;font-weight:700;}
.coupon-form{display:flex;gap:.5rem;}
.coupon-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--pill);
  padding:.6rem 1rem;font-family:var(--body);font-size:.88rem;background:var(--surface);
  color:var(--ink);text-transform:none;}
.coupon-form input::placeholder{text-transform:none;color:var(--muted);}
.coupon-tag{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);
  border:1px dashed var(--primary);border-radius:var(--pill);padding:.35rem .85rem;
  font-size:.82rem;font-weight:700;color:var(--primary);}
.coupon-tag button{background:none;border:0;color:var(--primary);padding:0;line-height:1;
  opacity:.7;cursor:pointer;}
.coupon-tag button:hover{opacity:1;}
.back-link{font-size:.88rem;}

/* ── Formulieren ── */
.fs-block{border:1px solid var(--line-soft);padding:1.4rem;background:var(--surface);}
.fs-block legend{font-family:var(--display);font-weight:600;font-size:1.16rem;
  padding:0 .5rem;margin-left:-.5rem;width:auto;}
label{display:block;font-size:.84rem;font-weight:700;margin-bottom:.32rem;}
/* Alle invoervelden waar je in typt, in één regel. Bewust omgekeerd
   opgeschreven: niet opsommen welke types wél meedoen, maar uitsluiten wat
   een knop of een vinkje is. Anders vergeet je er een, en dan staat er
   ergens een veld zonder rand. Zo kreeg het telefoonnummer op de
   afrekenpagina geen opmaak, en het ringmaatveld op de maattabel ook niet. */
/* In :where(), zodat de regel geen voorrang heeft en elk onderdeel hem kan aanpassen. */
:where(input:not([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=image],[type=hidden]),
textarea){
  width:100%;border:1px solid var(--line);border-radius:8px;padding:.68rem .9rem;
  font-family:var(--body);font-size:.94rem;background:var(--surface);color:var(--ink);}
:where(input,textarea):focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent;}
input[readonly]{background:var(--tint);color:var(--muted);}
.fld-help{font-size:.78rem;color:var(--muted);margin:.3rem 0 0;}
.pay-options{display:grid;gap:.6rem;}
.pay-opt{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line);
  padding:.85rem 1rem;cursor:pointer;font-weight:400;margin:0;transition:border-color .2s,background-color .2s;}
.pay-opt:hover{border-color:var(--primary);}
.pay-opt input{margin:0;accent-color:var(--primary);}
.pay-opt strong{display:block;font-size:.92rem;}
.pay-opt small{color:var(--muted);font-size:.79rem;}
.pay-opt:has(input:checked){border-color:var(--primary);background:var(--tint);}
.search-big{display:flex;gap:.5rem;}
.search-big input{flex:1;border-radius:var(--pill);padding:.8rem 1.2rem;}
.contact-form{max-width:640px;}

/* ── Afsluitende regel op de homepage ── */
.uit-groningen{text-align:center;margin:0;padding-top:1.6rem;
  border-top:1px solid var(--line-soft);
  font-size:.92rem;color:var(--muted);letter-spacing:.01em;}
.uit-groningen .hart{font-size:.95em;vertical-align:-.05em;margin:0 .1rem;}
/* De melding onder het contactformulier. In de voettekst bestaat een
   soortgelijke melding (.nb-msg), maar die staat op een donkere ondergrond
   en heeft daarom andere kleuren nodig. */
.ct-msg{font-size:.9rem;line-height:1.55;margin:.9rem 0 0;padding:.7rem .9rem;
  border-left:3px solid transparent;}
.ct-msg:empty{display:none;}
.ct-msg.is-ok{color:var(--ok);background:var(--tint-2);border-left-color:var(--ok);}
.ct-msg.is-err{color:var(--primary);background:var(--tint);border-left-color:var(--primary);}
/* Cloudflare tekent zijn eigen kader; wij houden er alleen ruimte voor vrij. */
.cf-turnstile{min-height:65px;}

/* ── De kortingscode op de bevestigingspagina van de nieuwsbrief ── */
.nb-code{background:var(--tint);border:1px dashed var(--primary);border-radius:12px;
  padding:1.4rem 1.5rem;margin:1.6rem 0;text-align:center;}
.nb-code-kop{font-size:.78rem;letter-spacing:.08em;text-transform:none;color:var(--muted);
  font-weight:700;margin:0 0 .5rem;}
.nb-code-code{font-family:var(--mono);font-size:1.55rem;font-weight:700;color:var(--primary);
  letter-spacing:.04em;margin:0 0 .7rem;word-break:break-all;}
.nb-code-uitleg{font-size:.88rem;color:var(--muted);margin:0;max-width:44ch;
  margin-left:auto;margin-right:auto;}

/* ── Bedankt ── */
.thanks-block{padding:2rem 0 1rem;}
.thanks-ico{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:var(--tint);color:var(--ok);font-size:1.9rem;margin-bottom:1.2rem;}
.thanks-ico .ico{width:1.9rem;height:1.9rem;}
.thanks-steps{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  text-align:left;margin-top:2.5rem;}
.thanks-steps .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font-weight:800;font-size:.88rem;margin-bottom:.6rem;}
.thanks-steps h2{font-size:1.02rem;margin-bottom:.25rem;}
.thanks-steps p{font-size:.87rem;margin:0;}

/* ── Blog ── */
.post-card{background:var(--surface);border:1px solid var(--line-soft);height:100%;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.post-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--tint);}
.post-media img{width:100%;height:100%;object-fit:cover;}
.post-body{padding:1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.post-date{font-size:.72rem;letter-spacing:.1em;text-transform:none;color:var(--muted);font-weight:700;}
.post-title{font-size:1.16rem;margin:0;}
.post-title a{color:var(--ink);}
.post-title a:hover{color:var(--primary);}
.post-ex{font-size:.88rem;color:var(--muted);margin:0;}
.post-more{margin-top:auto;padding-top:.6rem;font-size:.85rem;font-weight:700;
  display:inline-flex;align-items:center;gap:.4rem;}
.post-hero{width:100%;height:auto;}
.post-content img{margin:1.2rem 0;}
.post-foot{border-top:1px solid var(--line-soft);padding-top:1.5rem;display:flex;
  gap:.6rem;flex-wrap:wrap;align-items:center;}
.side-card{background:var(--tint);padding:1.4rem;position:sticky;top:96px;}
.side-list li{display:flex;align-items:center;gap:.6rem;font-size:.87rem;color:var(--muted);padding:.32rem 0;}
.side-list .ico{color:var(--primary);}

/* ── Leegstaat ── */
.empty{text-align:center;padding:3.5rem 1rem;}
.empty .ico,.empty svg{width:2.4rem;height:2.4rem;color:var(--line);margin-bottom:1rem;display:block;
  margin-inline:auto;}
.empty p{margin-inline:auto;max-width:46ch;}

/* ── Meldingen ── */
.toaster{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1080;
  display:flex;flex-direction:column;gap:.5rem;width:min(94vw,430px);pointer-events:none;}
.toast-hp{display:flex;align-items:flex-start;gap:.7rem;background:var(--band-bg);color:var(--band-fg);
  padding:.85rem 1rem;border-radius:12px;box-shadow:0 16px 40px -14px rgba(0,0,0,.55);
  font-size:.88rem;pointer-events:auto;opacity:0;transform:translateY(14px);
  transition:opacity .28s,transform .28s;}
.toast-hp.is-in{opacity:1;transform:none;}
.toast-hp .ico{margin-top:.15rem;width:1.05rem;height:1.05rem;}
.toast-ok .ico{color:#9BE8AA}.toast-err .ico{color:#FFB4A8}.toast-info .ico{color:#E7C46A}
.toast-hp b{display:block;font-weight:800;margin-bottom:.1rem;}
.toast-hp span{opacity:.88;line-height:1.45;}
.toast-hp button{background:none;border:0;color:inherit;opacity:.6;margin-left:auto;
  padding:0;cursor:pointer;}
.toast-hp button:hover{opacity:1;}

/* ── Cookiemelding ── */
/* De cookiemelding staat midden op het scherm met een waas erachter. Zo
   valt hij niet weg onderin beeld en maakt de bezoeker echt een keuze.
   Op mobiel en op desktop hetzelfde, alleen de maten verschillen. */
/* De zichtbare toestand staat hier als standaard, en niet achter een klasse
   die er met javascript bij komt. Een browser bevriest overgangen in een
   tabblad dat op de achtergrond staat, en dan blijft zo'n melding hangen op
   zijn begintoestand: onzichtbaar, maar wel klikken tegenhoudend. De
   begintoestand zetten we daarom in javascript en halen we meteen weer weg,
   zodat het beeld altijd goed uitkomt en de animatie alleen meespeelt als
   de browser hem afdraait. */
.consent-waas{position:fixed;inset:0;z-index:1085;background:rgba(29,43,58,.42);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:1;transition:opacity .35s ease;}

.consent{position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%);opacity:1;
  z-index:1090;width:min(94vw,520px);max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 70px -22px rgba(29,43,58,.55);padding:1.6rem 1.5rem;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .3s ease;}
.consent h2{font-size:1.18rem;line-height:1.25;margin-bottom:.6rem;}
.consent p{font-size:.9rem;color:var(--muted);margin-bottom:1.3rem;max-width:none;}

/* Weigeren moet net zo makkelijk zijn als accepteren, dus beide knoppen
   krijgen dezelfde ruimte. */
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.consent-actions .btn-hp{width:100%;justify-content:center;}
.consent-actions .btn-label{white-space:nowrap;}

/* Zelf instellen: staat dicht, want de meeste mensen willen alleen ja of
   nee. Wie het per categorie wil regelen klapt het open. */
.consent-meer{display:block;width:100%;margin-top:.9rem;padding:.5rem 0;
  background:none;border:0;color:var(--muted);font-size:.85rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.consent-meer:hover{color:var(--primary);}
.consent-keuzes{margin-top:.4rem;border-top:1px solid var(--line-soft);padding-top:.9rem;}
.consent-rij{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem;cursor:pointer;}
.consent-rij input{margin-top:.2rem;flex:0 0 auto;width:1.05rem;height:1.05rem;
  accent-color:var(--primary);}
.consent-rij input:disabled{opacity:.55;cursor:default;}
.consent-rij span{font-size:.85rem;color:var(--muted);line-height:1.5;}
.consent-rij strong{display:block;color:var(--ink);font-size:.9rem;margin-bottom:.1rem;}
.consent-keuzes .btn-hp{width:100%;justify-content:center;}
.consent-voet{margin:1rem 0 0!important;font-size:.8rem!important;}

@media (max-width:479.98px){
  .consent{padding:1.3rem 1.2rem;}
  /* Onder elkaar, maar in dezelfde volgorde. De weigerknop naar boven
     halen zou net zo sturend zijn als hem verstoppen. */
  .consent-actions{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .consent,.consent-waas{transition-duration:.01ms;}
}

/* ── Footer ── */
.ft{background:var(--paper);border-top:1px solid var(--line-soft);}
/* Alleen de linkkolommen krijgen links onder elkaar. Een inline link in
   een lopende zin, zoals in de nieuwsbrieftekst, moet gewoon meelopen. */
.ft-kolom a{color:var(--muted);font-size:.87rem;display:block;padding:.2rem 0;}
.ft-kolom a:hover{color:var(--primary);}
.ft a{color:var(--muted);}
.ft a:hover{color:var(--primary);}
.ft-h{font-size:.72rem;letter-spacing:.16em;text-transform:none;font-family:var(--body);
  font-weight:800;color:var(--ink);margin-bottom:.85rem;}
.ft a:hover{color:var(--primary);}
.pay span{border:1px solid var(--line-soft);border-radius:5px;background:var(--surface);
  font-size:.66rem;font-weight:800;color:var(--muted);padding:.3rem .55rem;letter-spacing:.05em;}
.ft-bottom{border-top:1px solid var(--line-soft);font-size:.82rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .cat-tile:hover,.post-card:hover,.btn-hp:hover{transform:none;}
}
@media (max-width:767.98px){
  p{max-width:none;}
  .hero-tag{padding:.5rem 1rem;}
  /* De stippen naar de bovenkant van de foto. Onderaan staan op een telefoon
     het prijslabel en de knop, en daar liep de knop dwars overheen. */
  .hero-stippen{top:10px;bottom:auto;right:10px;}
  .summary{position:static;}
  .cart-row{grid-template-columns:70px 1fr;}
  .cart-row img{width:70px;height:70px;}
  .cart-line-total{grid-column:2;text-align:right;}
}

/* ── Beeldplaceholders, tot de echte foto's er zijn ── */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;background:var(--tint);border:1px dashed var(--line);color:var(--muted);
  text-align:center;padding:1rem;overflow:hidden;width:100%;}
.ph-mark{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round;opacity:.4;}
.ph-video .ph-mark{stroke-width:1.4;}
.ph-video .ph-mark path{fill:currentColor;stroke:none;opacity:.55;}
.ph-label{font-size:.8rem;font-weight:700;color:var(--ink);max-width:34ch;line-height:1.35;}
.ph-note{font-size:.72rem;color:var(--muted);max-width:36ch;line-height:1.4;}
.ph-ratio{position:absolute;top:.45rem;right:.55rem;font-size:.62rem;font-weight:800;
  letter-spacing:.09em;color:var(--muted);opacity:.7;font-variant-numeric:tabular-nums;}
.pcard-media .ph,.cat-tile .ph,.pdp-media .ph{border:0;height:100%;}
.nav-accent{color:var(--primary)!important;}
.sidebar-kop{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:none;
  color:var(--muted);margin:1.6rem 0 .3rem;}
.sidebar-nav-sm a{font-size:1.02rem;padding:.55rem 0;}
.sidebar-budget{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem;}
.sidebar-budget a{display:block;text-align:center;border:1px solid var(--line);border-radius:var(--pill);
  padding:.55rem .6rem;font-weight:700;font-size:.9rem;color:var(--ink);
  transition:background-color .2s,border-color .2s,color .2s;}
.sidebar-budget a:hover{background:var(--tint);border-color:var(--primary);color:var(--primary);}
.chip-f{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);
  background:transparent;border-radius:var(--pill);padding:.42rem 1rem;font-size:.83rem;
  font-weight:700;color:var(--ink);transition:background-color .2s,color .2s,border-color .2s;}
.chip-f:hover{border-color:var(--ink);color:var(--ink);}
.chip-f.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
/* Een alinea heeft een maximale leesbreedte. Zonder automatische marges staat
   dat blok dan links, en centreert alleen de tekst erbinnen. Dat scheelt net
   genoeg om scheef te ogen boven een gecentreerde kop. */
.eyebrow.justify-content-center{justify-content:center;margin-left:auto;margin-right:auto;}
/* ── Rekenhulp ── */
.tool{background:var(--tint);border:1px solid var(--line-soft);padding:1.5rem;margin:1.5rem 0 2rem;}
.tool-h{font-size:1.2rem;margin-bottom:.4rem;}
.tool-intro{font-size:.9rem;color:var(--muted);margin-bottom:1rem;}
.tool-row{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;}
.tool-field{flex:1;min-width:190px;}
.tool-field input{width:100%;}
.tool-out{margin:.9rem 0 .4rem;font-size:.95rem;min-height:1.2em;}
.tool-out.is-ok{color:var(--ink);background:var(--surface);border-left:3px solid var(--primary);
  padding:.7rem .9rem;}
.tool-out.is-err{color:var(--primary);}
.tool-out b{font-family:var(--display);font-size:1.15em;}

/* ── Footer ── */
.ft{background:var(--paper);border-top:1px solid var(--line-soft);}
.ft-news{background:var(--band-bg);color:var(--band-fg);padding:2.5rem 0;}
.ft-news p{color:var(--band-muted);font-size:.92rem;max-width:46ch;}
.ft-news-h{color:var(--band-fg);font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.4rem;}
/* Formulier en bijschrift vormen één blok van gelijke breedte, zodat de
   hulptekst netjes onder het invoerveld uitlijnt in plaats van door te lopen. */
.nb-blok{max-width:520px;}
.nb-form{display:flex;gap:.6rem;align-items:stretch;}
.nb-form input[type=email]{flex:1 1 auto;min-width:0;border-radius:var(--pill);
  border:1px solid transparent;padding:.85rem 1.3rem;background:#FFFFFF;color:#1D2B3A;
  font-family:var(--body);font-size:.95rem;line-height:1.3;}
.nb-form input[type=email]:focus{outline:2px solid var(--primary);outline-offset:2px;}
.nb-form .btn-hp{flex:0 0 auto;white-space:nowrap;padding-inline:1.6rem;}
.nb-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.nb-help{font-size:.78rem;line-height:1.5;color:var(--band-muted);margin:.7rem 0 0;opacity:.85;}
.nb-help a{color:var(--band-fg);text-decoration:underline;text-underline-offset:2px;}
.nb-msg{font-size:.86rem;line-height:1.5;margin:.6rem 0 0;}
.nb-msg:empty{display:none;}
.nb-msg.is-ok{color:#9BE8BF;}
.nb-msg.is-err{color:#FFD2CC;}
.ft-h{font-size:.72rem;letter-spacing:.16em;text-transform:none;font-family:var(--body);
  font-weight:800;color:var(--ink);margin-bottom:.85rem;}
.ft a:hover{color:var(--primary);}

/* ── Footerkolommen, op mobiel inklapbaar ──
   De kop is op elk scherm een knop, want anders verdwijnt de tekst zodra je
   hem op de brede weergave zou verbergen. Op breed ziet en gedraagt hij zich
   als gewone tekst; op smal wordt hij een echte knop met een pijltje. ── */
.ft-knop{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;
  background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:default;}
.ft-chev{display:none;}

@media (max-width:991.98px){
  .ft-h{margin-bottom:0;}
  .ft-knop{padding:.95rem 0;cursor:pointer;border-top:1px solid var(--line-soft);}
  .ft-kolom:first-of-type .ft-knop{border-top:0;}
  /* Het pijltje zit in een eigen element en niet in de svg zelf, want een
     svg draait om zijn linkerbovenhoek in plaats van om zijn midden. */
  .ft-chev{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--muted);
    transform-origin:50% 50%;
    transition:transform .28s cubic-bezier(.2,.7,.3,1);}
  .ft-knop.is-open .ft-chev{transform:rotate(180deg);}
  .ft-knop:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
  .ft-links{overflow:hidden;padding-bottom:.7rem;}
  .ft-links a{padding:.35rem 0;}
}
@media (prefers-reduced-motion:reduce){
  .ft-chev{transition-duration:.01ms;}
}

.pay span{border:1px solid var(--line-soft);border-radius:5px;background:var(--surface);
  font-size:.66rem;font-weight:800;color:var(--muted);padding:.3rem .55rem;letter-spacing:.05em;}
.ft-legal{border-top:1px solid var(--line-soft);padding:1rem 0;font-size:.8rem;color:var(--muted);}
.ft-legal-nav{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;}
.ft-legal-nav a,.ft-legal-nav button{display:inline;color:var(--muted);font-size:.8rem;padding:0;
  background:none;border:0;font-family:var(--body);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;}
.ft-legal-nav a:hover,.ft-legal-nav button:hover{color:var(--primary);}
/* ── Bedrijfsgegevens ── */
.bedrijf{font-style:normal;background:var(--tint);padding:1rem 1.2rem;margin:0 0 1rem;
  line-height:1.7;font-size:.94rem;}
.gegevens{list-style:none;padding:0;margin:0 0 1.2rem;}
.gegevens li{display:flex;gap:.75rem;padding:.35rem 0;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;font-variant-numeric:tabular-nums;}
.gegevens li span{flex:0 0 130px;color:var(--muted);font-weight:700;font-size:.82rem;
  letter-spacing:.03em;text-transform:none;padding-top:.1rem;}

/* ── Modelformulier voor herroeping ──
   Het formulier moet ook uitgeprint en met de pen ingevuld kunnen worden,
   vandaar de lege schrijfregels in plaats van invoervelden. ── */
.herroep-blok{border:1px solid var(--line-soft);padding:1.4rem 1.5rem;margin:0 0 1.6rem;
  background:#fff;font-size:.94rem;line-height:1.7;}
.herroep-blok p{margin:0 0 .9rem;}
.herroep-lijn{border-bottom:1px solid var(--line);height:1.6rem;margin-bottom:.5rem;}
.herroep-veld{display:inline-block;min-width:14rem;border-bottom:1px solid var(--line);}
@media print{
  .herroep-blok{border-color:#000;}
  .herroep-lijn,.herroep-veld{border-bottom-color:#000;}
}

/* ── Bevestiging na toevoegen aan winkelwagen ── */
.modal-scrim{position:fixed;inset:0;z-index:1070;background:rgba(29,43,58,.5);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease;}
.modal-scrim.is-in{opacity:1;}
.cart-modal{
  position:fixed;z-index:1075;background:var(--surface);
  left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);
  width:min(94vw,540px);padding:1.6rem 1.6rem 1.5rem;
  box-shadow:0 30px 70px -24px rgba(29,43,58,.55);
  opacity:0;transition:opacity .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1);
}
.cart-modal.is-in{opacity:1;transform:translate(-50%,-50%) scale(1);}
.cart-modal-grip{display:none;}
.cart-modal-sluit{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;
  border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:background-color .2s,color .2s;}
.cart-modal-sluit:hover{background:var(--tint);color:var(--ink);}
.cart-modal-kop{display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  font-family:var(--body);font-weight:800;font-size:.95rem;color:var(--ink);}
.cart-modal-kop .ico{color:var(--ok);width:1.15rem;height:1.15rem;}
.cart-modal-item{display:grid;grid-template-columns:72px 1fr;gap:.9rem;align-items:center;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line-soft);}
.cart-modal-item img{width:72px;height:72px;object-fit:cover;background:var(--tint);}
.cart-modal-item h3{font-family:var(--body);font-weight:700;font-size:.92rem;margin:0 0 .2rem;
  line-height:1.35;}
.cart-modal-item p{margin:0;font-size:.82rem;color:var(--muted);}
.cart-modal-item .prijs{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--primary);
  font-variant-numeric:tabular-nums;}
.cart-modal-verzending{font-size:.82rem;color:var(--muted);padding:.85rem 0 0;}
.cart-modal-verzending .balk{display:block;height:5px;background:var(--tint);margin:.5rem 0 .4rem;
  overflow:hidden;}
.cart-modal-verzending .balk i{display:block;height:100%;background:var(--primary);
  transition:width .5s cubic-bezier(.2,.7,.3,1);}
.cart-modal-verzending.gehaald{color:var(--ok);font-weight:700;}
.cart-modal-totaal{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.9rem 0 1.2rem;font-size:.9rem;color:var(--muted);}
.cart-modal-totaal strong{font-family:var(--display);font-weight:600;font-size:1.3rem;
  color:var(--ink);font-variant-numeric:tabular-nums;}
.cart-modal-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.cart-modal-knoppen .btn-hp{padding:.8rem 1rem;font-size:.88rem;width:100%;}
/* De knoptekst mag niet over twee regels vallen, dan staan de twee knoppen
   niet meer even hoog en oogt het slordig. */
.cart-modal-knoppen .btn-label{white-space:nowrap;}
/* Het venster na "mail mij als hij er weer is" heeft maar één knop. */
.cart-modal-knoppen.is-een{grid-template-columns:1fr;}
.terug-modal-tekst{font-size:.9rem;color:var(--muted);line-height:1.55;margin:1rem 0 1.3rem;}

/* ── Zoekvenster ── */
/* Bovenin het scherm in plaats van in het midden: dan blijft hij op een
   telefoon boven het toetsenbord staan. */
.zoek-venster{position:fixed;z-index:1075;left:50%;top:12vh;width:min(94vw,640px);
  background:var(--surface);padding:1.5rem 1.6rem 1.6rem;
  box-shadow:0 30px 70px -24px rgba(29,43,58,.55);
  opacity:0;transform:translate(-50%,-12px);
  transition:opacity .26s cubic-bezier(.2,.7,.3,1),transform .26s cubic-bezier(.2,.7,.3,1);}
.zoek-venster.is-in{opacity:1;transform:translate(-50%,0);}
.zoek-titel{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.02em;
  margin:0 2.4rem 1rem 0;color:var(--ink);}
.zoek-form{position:relative;display:flex;gap:.6rem;}
.zoek-form .zoek-loep{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;}
/* Met het id erbij, anders wint de algemene invoerregel verderop. */
#zoek-venster input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--pill);
  padding:.8rem 1rem .8rem 2.7rem;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1rem;}
#zoek-venster input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);}
.zoek-form .btn-hp{flex:0 0 auto;white-space:nowrap;padding-inline:1.4rem;}
@media (max-width:575.98px){
  .zoek-venster{top:0;width:100%;padding:1.1rem 16px 1.2rem;transform:translate(-50%,-100%);}
  .zoek-venster.is-in{transform:translate(-50%,0);}
  .zoek-titel{font-size:1.2rem;}
  .zoek-form .btn-hp{padding-inline:1rem;}
}
@media (prefers-reduced-motion:reduce){.zoek-venster{transition-duration:.01ms;}}

@media (max-width:575.98px){
  /* Op mobiel schuift hij van onderen omhoog, dat is met een duim beter te bedienen. */
  .cart-modal{left:0;right:0;top:auto;bottom:0;width:100%;
    transform:translateY(100%);padding-top:.6rem;}
  .cart-modal.is-in{transform:translateY(0);}
  .cart-modal-grip{display:block;width:38px;height:4px;border-radius:4px;background:var(--line);
    margin:0 auto .9rem;}
  .cart-modal-sluit{top:.5rem;}
  .cart-modal-knoppen{grid-template-columns:1fr;}
  .cart-modal-knoppen .btn-hp:last-child{order:-1;}
}
@media (prefers-reduced-motion:reduce){
  .cart-modal,.modal-scrim{transition-duration:.01ms;}
  .cart-modal-verzending .balk i{transition:none;}
}

/* ── Nieuwsbrief op een smal scherm ──
   Staat bewust helemaal onderaan, want anders wint de basisregel hierboven
   op grond van volgorde en blijft de knop smal. */
@media (max-width:575.98px){
  .nb-form{flex-wrap:wrap;}
  .nb-form input[type=email]{flex:1 1 100%;width:100%;min-height:52px;}
  .nb-form .btn-hp{flex:1 1 100%;width:100%;min-height:52px;padding-block:.75rem;}
  .nb-blok{max-width:none;}
}

/* ═══ Afrekenen ═══════════════════════════════════════════════ */
.ck-wrap{padding:1.5rem 0 4rem;}
.ck-stappen{margin-bottom:1.5rem;}
.ck-stappen ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0;
  font-size:.82rem;color:var(--muted);}
.ck-stappen li{display:flex;align-items:center;gap:.5rem;}
.ck-stappen li::after{content:"›";opacity:.4;margin-left:.4rem;}
.ck-stappen li:last-child::after{content:none;}
.ck-stappen li.nu{color:var(--ink);font-weight:800;}
.ck-stappen li.af a,.ck-stappen li.af span{color:var(--primary);}
.ck-stappen a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}

.ck-kolommen{border:1px solid var(--line-soft);background:var(--surface);}
.ck-links{padding:2rem;}
.ck-rechts{background:var(--tint);border-left:1px solid var(--line-soft);}
.ck-samenvatting{padding:2rem;position:sticky;top:90px;}

.ck-kop{font-size:1.25rem;margin:0 0 .3rem;}
.ck-kop:focus{outline:none;}
.ck-sub{font-size:.88rem;color:var(--muted);margin-bottom:1.2rem;}
.ck-veld{margin-bottom:.2rem;}
.ck-veld label,.ck-land{display:block;font-size:.84rem;font-weight:700;margin-bottom:.3rem;}
.ck-optioneel{font-weight:400;color:var(--muted);font-size:.78rem;}
.ck-hint{font-size:.78rem;color:var(--muted);margin:.3rem 0 0;}
.ck-fout{font-size:.8rem;color:var(--primary);font-weight:600;margin:.3rem 0 0;display:none;}
.ck-fout.is-zichtbaar{display:block;}
input.is-fout,textarea.is-fout{border-color:var(--primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);}
#ck-postcode.is-zoekt{background-image:none;opacity:.7;}
.ck-adres-gevonden{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  background:var(--tint);padding:.6rem .9rem;font-size:.88rem;margin:.4rem 0 0;}
.ck-adres-gevonden .ico{color:var(--ok);}
.ck-wijzig{background:none;border:0;color:var(--primary);font-size:.8rem;font-weight:700;
  text-decoration:underline;text-underline-offset:2px;padding:0;cursor:pointer;margin-left:auto;}
.ck-acties{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.8rem;flex-wrap:wrap;}
.ck-terug{background:none;border:0;color:var(--muted);font-size:.86rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.4rem;padding:0;cursor:pointer;}
.ck-terug:hover{color:var(--primary);}

.ck-overzichtsregel{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  border:1px solid var(--line-soft);padding:.75rem 1rem;font-size:.86rem;margin-bottom:-1px;}
.ck-overzichtsregel span:first-child{color:var(--muted);flex:0 0 90px;}
.ck-overzichtsregel strong{font-weight:600;flex:1;min-width:0;word-break:break-word;}

.ck-opties{display:grid;gap:.6rem;margin-top:.6rem;}
.ck-optie{display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);
  padding:.9rem 1rem;cursor:pointer;font-weight:400;margin:0;
  transition:border-color .2s,background-color .2s;}
.ck-optie:hover{border-color:var(--primary);}
.ck-optie.is-gekozen{border-color:var(--primary);background:var(--tint);}
.ck-optie input{margin:0;accent-color:var(--primary);flex:0 0 auto;}
.ck-optie-tekst{flex:1;min-width:0;}

/* ── Accountgedeelte ── */
.acc-smal{max-width:26rem;margin:0 auto;}
.acc-form label{display:block;font-size:.82rem;font-weight:600;margin:.9rem 0 .3rem;color:var(--ink);}
.acc-form input{width:100%;font:inherit;padding:.7rem .9rem;border:1px solid var(--line);
  border-radius:.6rem;background:var(--surface);color:var(--ink);}
.acc-form input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);}
.acc-twee{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
@media (max-width:479.98px){ .acc-twee{grid-template-columns:1fr;} }
.acc-code{font-size:1.4rem;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;}

.acc-melding{display:flex;align-items:flex-start;gap:.6rem;padding:.8rem 1rem;border-radius:.7rem;
  margin-bottom:1.2rem;font-size:.92rem;}
.acc-melding .ico{flex:0 0 auto;margin-top:.15rem;}
.acc-melding.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ok) 34%,transparent);}
.acc-melding.ok .ico{color:var(--ok);}
.acc-melding.fout{background:var(--tint);border:1px solid var(--line-soft);}
.acc-melding.fout .ico{color:var(--primary);}

.accountmenu{display:flex;flex-direction:column;gap:.15rem;}
.accountmenu a{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border-radius:.6rem;
  color:var(--muted);text-decoration:none;font-size:.94rem;}
.accountmenu a:hover{background:var(--tint);color:var(--ink);}
.accountmenu a[aria-current="page"]{background:var(--tint);color:var(--ink);font-weight:600;}
.accountmenu .ico{width:1rem;height:1rem;opacity:.75;}
.accountmenu-uit{margin-top:.6rem;border-top:1px solid var(--line-soft);padding-top:.9rem!important;}

.acc-kaart{background:var(--surface);border:1px solid var(--line-soft);border-radius:.9rem;
  padding:1.2rem 1.3rem;}
.acc-tegel{display:flex;flex-direction:column;gap:.3rem;height:100%;padding:1.1rem 1.2rem;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:.9rem;
  color:var(--ink);text-decoration:none;transition:border-color .2s,transform .15s;}
.acc-tegel:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}
.acc-tegel-ico{color:var(--primary);}
.acc-tegel small{color:var(--muted);}

.acc-lijst{display:flex;flex-direction:column;gap:.5rem;}
.acc-regel{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.9rem;align-items:center;
  padding:.9rem 1.1rem;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:.8rem;color:var(--ink);text-decoration:none;transition:border-color .2s;}
.acc-regel:hover{border-color:var(--primary);color:var(--ink);}
.acc-regel-nr{font-weight:700;font-variant-numeric:tabular-nums;}
.acc-regel-datum,.acc-regel-aantal{color:var(--muted);font-size:.88rem;}
.acc-regel-bedrag{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;}
@media (max-width:767.98px){
  .acc-regel{grid-template-columns:1fr auto;row-gap:.3rem;}
  .acc-regel-datum,.acc-regel-aantal{grid-column:1;}
}

.acc-regel-status{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:none;
  padding:.25rem .6rem;border-radius:var(--pill);background:var(--line-zacht,var(--tint));
  color:var(--muted);white-space:nowrap;}
.status-completed{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);}
.status-processing{background:var(--tint);color:var(--primary);}
.status-cancelled,.status-failed,.status-refunded{background:var(--line-soft);color:var(--muted);}
.acc-regel-zending{display:inline-flex;align-items:center;gap:.35rem;margin-left:.6rem;color:var(--primary);}
.acc-regel-zending .ico{width:.9rem;height:.9rem;}

/* Verzending op de bestelpagina: drie stappen en de track & trace. */
.acc-zending h2{display:flex;align-items:center;gap:.5rem;}
.acc-zending h2 .ico{width:1rem;height:1rem;color:var(--primary);}
.acc-pakketstappen{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;}
.acc-pakketstappen li{position:relative;padding-top:.9rem;font-size:.82rem;color:var(--muted);}
.acc-pakketstappen li::before{content:"";position:absolute;top:0;left:0;right:0;height:.3rem;
  border-radius:var(--pill);background:var(--line-soft);}
.acc-pakketstappen li.klaar::before,.acc-pakketstappen li.nu::before{background:var(--primary);}
.acc-pakketstappen li.nu{color:var(--ink);font-weight:600;}
.acc-zending-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;}
.acc-barcode{font-variant-numeric:tabular-nums;letter-spacing:.03em;color:var(--ink);word-break:break-all;}

.acc-item{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.7rem 0;border-bottom:1px solid var(--line-soft);}
.acc-item:last-child{border-bottom:0;}
.acc-item img,.acc-item-leeg{width:64px;height:64px;border-radius:.5rem;object-fit:cover;
  background:var(--paper);}
.acc-item-naam small{display:block;color:var(--muted);font-size:.84rem;}
.acc-item-bedrag{font-variant-numeric:tabular-nums;}

.acc-status{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;margin:0;}
.acc-status.aan .ico{color:var(--ok);}
.acc-status.uit .ico{color:var(--muted);}
.acc-stappen{padding-left:1.2rem;display:flex;flex-direction:column;gap:1.3rem;margin:0;}
.acc-stappen strong{display:block;margin-bottom:.2rem;}
.acc-geheim{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.02rem;
  letter-spacing:.08em;background:var(--paper);border:1px dashed var(--line);
  border-radius:.5rem;padding:.7rem .9rem;word-break:break-all;user-select:all;}
.acc-punten{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;}
.acc-punten li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--muted);}
.acc-punten .ico{flex:0 0 auto;margin-top:.2rem;color:var(--ok);}

/* De QR-code voor de authenticator-app. Wit blijft wit, ook in het donkere
   thema, want een scanner heeft dat contrast nodig. */
.qr-vak{display:inline-block;background:#fff;padding:.7rem;border-radius:.7rem;
  border:1px solid var(--line-soft);margin-bottom:1rem;}
.qr-vak .qr{display:block;width:190px;height:190px;}
.acc-uitklap summary{cursor:pointer;font-size:.9rem;color:var(--muted);}
.acc-uitklap summary:hover{color:var(--primary);}

/* ── Kortingscode, dichtgeklapt ── */
.kortingsknop{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.88rem;
  font-weight:600;color:var(--muted);background:none;border:0;padding:.2rem 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--line);}
.kortingsknop:hover{color:var(--primary);text-decoration-color:currentColor;}
.kortingsknop:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:.3rem;}
.kortingsknop .ico{width:1rem;height:1rem;}
/* Alleen als het javascript werkt klapt het dicht. Anders staat het veld er
   gewoon, zodat een code invullen altijd mogelijk blijft. */
.kortingsblok:not(.is-dicht) .kortingsknop{display:none;}
.kortingsblok.is-dicht .kortingsveld{display:none;}

/* ── Wachten in de winkelwagen ── */
/* Een dun streepje bovenaan terwijl de winkel op WordPress wacht. Zonder teken
   van leven klikken mensen nog een keer op verwijderen. */
.voortgang{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--primary),var(--primary-deep));
  border-radius:0 3px 3px 0;box-shadow:0 0 8px -1px var(--primary);
  transition:width .18s ease-out,opacity .3s ease;}

/* De regel die verdwijnt krimpt en vervaagt, in plaats van er ineens uit te
   klappen. Dan zie je wat er weggaat. */
.cart-row.gaat-weg{height:0!important;opacity:0;transform:translateX(-12px);
  margin:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;
  transition:height .32s ease,opacity .22s ease,transform .32s ease,
             margin .32s ease,padding .32s ease;}

/* De bedragen tellen naar hun nieuwe waarde toe. Vervagen deed het blok
   verspringen, en dan is het net of de pagina hapert. Nu zie je het getal zelf
   bewegen, en aan de kleur welke kant het op gaat. */
.sum-row .v{font-variant-numeric:tabular-nums;transition:color .25s ease;}
.telt-omhoog{color:var(--ink);}
.telt-omlaag{color:var(--ok);}

@media (prefers-reduced-motion:reduce){
  .cart-row.gaat-weg{transition:none;}
  .voortgang{transition:opacity .3s ease;}
}

/* ── Kleur kiezen vanuit een overzicht ── */
.kleur-laag{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:rgba(29,43,58,.62);}
.kleur-venster{background:var(--surface);color:var(--ink);border-radius:1rem;
  width:min(26rem,100%);max-height:85vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lift);overflow:hidden;}
.kleur-kop{position:relative;padding:1.1rem 3rem 1rem 1.3rem;border-bottom:1px solid var(--line-soft);}
.kleur-kopje{margin:0 0 .15rem;font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:none;color:var(--primary);}
.kleur-kop h2{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0;line-height:1.25;}
.kleur-sluit{position:absolute;top:.8rem;right:.9rem;font:inherit;font-size:1.6rem;line-height:1;
  border:0;background:none;color:var(--muted);cursor:pointer;padding:.1rem .4rem;border-radius:.4rem;}
.kleur-sluit:hover{color:var(--ink);}
.kleur-lijst{padding:.8rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;}
.kleur-laden{margin:.6rem;color:var(--muted);font-size:.92rem;}

.kleur-optie{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  font:inherit;color:var(--ink);background:var(--surface);cursor:pointer;
  border:1px solid var(--line);border-radius:.75rem;padding:.6rem .8rem;
  transition:border-color .2s,background-color .2s;}
.kleur-optie:hover:not([disabled]){border-color:var(--primary);background:var(--tint);}
.kleur-optie:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.kleur-optie img,.kleur-geenbeeld{flex:0 0 auto;width:56px;height:56px;border-radius:.5rem;
  object-fit:cover;background:var(--paper);}
.kleur-tekst{flex:1;min-width:0;}
.kleur-tekst strong{display:block;font-size:1rem;font-weight:700;}
.kleur-tekst small{display:block;font-size:.8rem;color:var(--muted);}
/* Bijna op: dan mag het opvallen, want dat is de reden om nu te kiezen. */
.kleur-tekst small.is-weinig{color:var(--primary);font-weight:600;}
.kleur-prijs{font-family:var(--display);font-size:1.05rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Terwijl het sieraad in de winkelwagen gaat: hetzelfde draaiende rondje als
   op de gewone knop, zodat je ziet dat er iets gebeurt. De regel blijft staan
   maar wordt gedimd, want anders springt het venster in elkaar. */
.kleur-optie[data-state="loading"]{pointer-events:none;cursor:progress;position:relative;}
.kleur-optie[data-state="loading"] > *{opacity:.25;}
.kleur-optie[data-state="loading"]::after{content:"";position:absolute;top:50%;left:50%;
  width:20px;height:20px;margin:-10px 0 0 -10px;border:2.4px solid var(--primary);
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;}

/* Een kleur die op is laten we zien, maar dan duidelijk niet aanklikbaar. */
.kleur-optie.is-op{cursor:not-allowed;opacity:.5;border-style:dashed;}
.kleur-optie.is-op img{filter:grayscale(1);}
.kleur-optie.is-op .kleur-prijs{text-decoration:line-through;}

/* ── Melding over het cadeautje in de winkelwagen ── */
.cadeau{display:flex;align-items:flex-start;gap:.8rem;padding:.95rem 1.1rem;margin-bottom:1.2rem;
  border-radius:.8rem;border:1px solid var(--line-soft);background:var(--tint);}
.cadeau .ico{flex:0 0 auto;width:1.25rem;height:1.25rem;margin-top:.15rem;color:var(--primary);}
.cadeau span{display:block;font-size:.92rem;color:var(--muted);line-height:1.5;}
.cadeau strong{display:block;color:var(--ink);font-size:.98rem;margin-bottom:.15rem;}
.cadeau-gehaald{background:color-mix(in srgb, var(--ok) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 34%, transparent);}
.cadeau-gehaald .ico{color:var(--ok);}

/* ── Betaalmethodes met logo ── */
/* De logo's zijn de officiele merkbeelden van Mollie, 32 bij 24, en staan op
   onze eigen server zodat de browser van de bezoeker niets bij Mollie ophaalt. */
.ck-logo{flex:0 0 auto;width:32px;height:24px;display:block;border-radius:3px;}
.ck-logo-leeg{width:32px;height:24px;border:1px dashed var(--line);border-radius:3px;}
.ck-betaaloptie .ck-optie-tekst strong{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.ck-tip{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:none;
  color:var(--on-primary);background:var(--primary);border-radius:var(--pill);
  padding:.18rem .55rem;line-height:1.3;}

/* Het vinkje bij de voorwaarden licht even op nadat het venster het aanzet. */
@keyframes ck-aanwijzen{0%,100%{box-shadow:0 0 0 0 rgba(35,128,47,0);}
  30%,70%{box-shadow:0 0 0 5px rgba(35,128,47,.28);}}
.form-check-input.net-aangezet{animation:ck-aanwijzen 1.6s ease;border-radius:4px;}

/* ── Venster op de afrekenpagina ── */
.ck-venster-laag{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:rgba(29,43,58,.62);}
.ck-venster{background:var(--surface);color:var(--ink);border-radius:1rem;
  width:min(40rem,100%);max-height:min(85vh,44rem);display:flex;flex-direction:column;
  box-shadow:var(--shadow-lift);overflow:hidden;}
.ck-venster-kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line-soft);}
.ck-venster-kop h2{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:0;}
.ck-venster-sluit{font:inherit;font-size:1.6rem;line-height:1;border:0;background:none;
  color:var(--muted);cursor:pointer;padding:.1rem .4rem;border-radius:.4rem;}
.ck-venster-sluit:hover{color:var(--ink);}
.ck-venster-inhoud{padding:1.1rem 1.3rem;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.ck-venster-inhoud p{margin:0 0 .9rem;}
.ck-venster-inhoud h2,.ck-venster-inhoud h3{font-family:var(--display);font-weight:600;
  font-size:1.05rem;margin:1.4rem 0 .5rem;}
.ck-venster-inhoud h1{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0 0 .8rem;}
.ck-venster-inhoud ul,.ck-venster-inhoud ol{margin:0 0 .9rem;padding-left:1.2rem;}
.ck-venster-laden{color:var(--muted);}
.ck-venster-voet{display:flex;gap:.6rem;flex-wrap:wrap;padding:1rem 1.3rem;
  border-top:1px solid var(--line-soft);background:var(--paper);}
@media (max-width:575.98px){
  .ck-venster{max-height:92vh;}
  .ck-venster-voet .btn-hp{flex:1 1 100%;}
}
.ck-optie-tekst strong{display:block;font-size:.94rem;font-weight:700;}
.ck-optie-tekst small{color:var(--muted);font-size:.79rem;}
.ck-optie-prijs{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;}

.ck-akkoord{display:flex;gap:.6rem;align-items:flex-start;margin:1.5rem 0 .3rem;font-size:.87rem;}
.ck-akkoord input{margin-top:.25rem;accent-color:var(--primary);flex:0 0 auto;}
.ck-akkoord label{font-weight:400;margin:0;}
.ck-bestel{margin-top:1.2rem;}
.ck-melding{margin-top:1rem;font-size:.9rem;padding:.9rem 1.1rem;display:none;}
.ck-melding.is-fout{display:block;background:var(--tint);border-left:3px solid var(--primary);
  color:var(--ink);}
.ck-vertrouwen{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.4rem;
  border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted);}
.ck-vertrouwen span{display:inline-flex;align-items:center;gap:.4rem;}
.ck-vertrouwen .ico{color:var(--primary);}

.ck-regels{display:grid;gap:.9rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);}
.ck-regel{display:grid;grid-template-columns:56px 1fr auto;gap:.8rem;align-items:center;}
.ck-regel-beeld{position:relative;}
.ck-regel-beeld img{width:56px;height:56px;object-fit:cover;background:var(--surface);
  border:1px solid var(--line-soft);}
.ck-aantal{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:.68rem;font-weight:800;
  display:grid;place-items:center;}
.ck-regel-naam{font-size:.86rem;font-weight:600;line-height:1.35;}
.ck-regel-prijs{font-variant-numeric:tabular-nums;font-size:.88rem;font-weight:600;white-space:nowrap;}
.ck-kortingsvak{padding:1.2rem 0;border-bottom:1px solid var(--line);}
.ck-totalen{padding-top:1.2rem;}

.ck-samenvatting-knop{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:1rem;background:var(--tint);border:1px solid var(--line-soft);padding:.9rem 1.1rem;
  font-family:var(--body);font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:0;}
.ck-samenvatting-knop .pijl{transition:transform .25s;}
.ck-samenvatting-knop[aria-expanded="true"] .pijl{transform:rotate(180deg);}

@media (max-width:991.98px){
  .ck-rechts{border-left:0;border-top:1px solid var(--line-soft);}
  .ck-samenvatting{position:static;padding:1.3rem;display:none;}
  .ck-samenvatting.is-open{display:block;}
  .ck-links{padding:1.3rem;}
  .ck-kolommen{border-left:0;border-right:0;}
}

/* ═══ Bedankt ═════════════════════════════════════════════════ */
.bd-wrap{padding:2.5rem 0 4rem;}
.bd-kop{text-align:center;max-width:60ch;margin-inline:auto;}
.bd-vink{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--tint);color:var(--ok);margin-bottom:1rem;}
.bd-vink .ico{width:1.7rem;height:1.7rem;}
.bd-kop .eyebrow{justify-content:center;}
.bd-kaart-blok{border:1px solid var(--line-soft);background:var(--surface);overflow:hidden;
  margin-bottom:1.5rem;}
.bd-kaart-blok h2{padding:1.2rem 1.3rem 0;display:flex;align-items:center;gap:.5rem;}
.bd-kaart-blok h2 .ico{color:var(--primary);}
.bd-kaart{height:300px;margin:1rem 0 0;background:var(--tint);position:relative;z-index:0;}
.bd-kaart-leeg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.6rem;color:var(--muted);font-size:.86rem;text-align:center;padding:1rem;}
.bd-kaart-leeg .ico{width:1.8rem;height:1.8rem;opacity:.5;}
.bd-adres{padding:1.1rem 1.3rem;}
.bd-adres strong{display:block;font-size:.95rem;}
.bd-adres span{color:var(--muted);font-size:.9rem;}
.bd-kaart-bron{font-size:.72rem;color:var(--muted);margin:.6rem 0 0;opacity:.8;}
.bd-stappen{border:1px solid var(--line-soft);background:var(--surface);padding:1.3rem;}
.bd-stappen ol{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1rem;}
.bd-stappen li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;
  column-gap:.9rem;align-items:start;}
.bd-stappen li::before{content:counter(s);grid-row:1/3;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font-weight:800;font-size:.82rem;
  display:grid;place-items:center;}
.bd-stappen li strong{font-size:.94rem;}
.bd-stappen li span{font-size:.87rem;color:var(--muted);grid-column:2;}
.bd-overzicht{background:var(--tint);padding:1.5rem;position:sticky;top:90px;}
.bd-gegevens{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:1.2rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--line);font-size:.86rem;}
.bd-gegevens dt{color:var(--muted);font-weight:700;font-size:.78rem;text-transform:none;
  letter-spacing:.05em;padding-top:.15rem;}
.bd-gegevens dd{margin:0;word-break:break-word;}
.bd-fout{margin-top:1.5rem;background:var(--tint);border-left:3px solid var(--primary);
  padding:1rem 1.2rem;font-size:.9rem;}
.leaflet-container{font-family:var(--body);font-size:.72rem;}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;}
@media (max-width:991.98px){ .bd-overzicht{position:static;} }
.bd-vink.is-wachten{background:var(--tint-2);color:var(--brand);}
.bd-vink.is-mislukt{background:var(--tint);color:var(--primary);}

/* Bedankje van Milou: staande video naast de volg- en deelknoppen. */
.bd-milou{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:2rem;align-items:center;
  max-width:860px;margin:2.2rem auto .5rem;padding:1.5rem;background:var(--tint-2);}
.bd-milou.is-zonder-video{grid-template-columns:1fr;text-align:center;max-width:640px;}
.bd-milou.is-zonder-video .eyebrow,.bd-milou.is-zonder-video .bd-knoppen{justify-content:center;}
.bd-video{position:relative;aspect-ratio:9/16;background:var(--band-bg);overflow:hidden;
  box-shadow:var(--shadow);}
.bd-video video{width:100%;height:100%;object-fit:cover;display:block;}
.bd-video-start{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;
  border:0;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;
  box-shadow:var(--shadow-lift);cursor:pointer;transition:transform .2s;}
.bd-video-start:hover{transform:scale(1.06);}
.bd-video-start .ico{width:1.5rem;height:1.5rem;margin-left:4px;}
.bd-milou-kop{font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .5rem;}
.bd-sub{font-size:.95rem;font-weight:800;margin:1.4rem 0 .2rem;}
.bd-klein{font-size:.86rem;color:var(--muted);margin:0 0 .7rem;}
.bd-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;}
.bd-knop{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;
  font-size:.88rem;text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s;}
.bd-knop:hover{border-color:var(--primary);color:var(--primary);}
.bd-knop .ico{width:1.05rem;height:1.05rem;}
.bd-knop.is-instagram .ico{color:#C13584;}
.bd-knop.is-whatsapp .ico{color:#1F9E50;}
.bd-knop.is-delen{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.bd-knop.is-delen:hover{background:var(--primary-deep);color:var(--on-primary);}
.bd-gekopieerd{margin-top:.6rem;min-height:1.2em;word-break:break-all;}
@media (max-width:767.98px){
  .bd-milou{grid-template-columns:1fr;padding:1.2rem;gap:1.4rem;}
  .bd-video{max-width:280px;width:100%;margin-inline:auto;}
}

/* ═══ Vragenblok ══════════════════════════════════════════════
   Eigen component in plaats van de accordeon van Bootstrap. Die
   gebruikt een vast donker pijltje in een achtergrondafbeelding,
   en dat is in donkere modus onzichtbaar. */
/* Het vragenblok staat op drie plekken: naast de tekst op een categoriepagina,
   binnen de tekstkolom op /veelgestelde-vragen en onderaan een artikel. Die
   laatste twee zitten in .prose, en daar gelden eigen regels voor h2 en h3. Elke
   regel hieronder staat daarom achter .faq, want dat weegt zwaarder dan .prose h3
   en dan ziet het blok er overal hetzelfde uit, waar je hem ook neerzet. */
.faq .faq-kop{font-size:clamp(1.35rem,2.1vw,1.7rem);margin:0 0 1rem;
  font-family:var(--display);font-weight:600;letter-spacing:normal;text-transform:none;}
.faq + .faq{margin-top:2.6rem;}
.faq-lijst{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq .faq-vraag{margin:0;font-size:inherit;font-family:inherit;font-weight:inherit;
  letter-spacing:normal;text-transform:none;}
.faq .faq-knop{
  display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  background:none;border:0;text-align:left;cursor:pointer;
  padding:1.15rem 0;                       /* lucht tussen de lijn en de tekst */
  font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.4;
  color:var(--ink);transition:color .2s;
}
.faq .faq-knop:hover{color:var(--primary);}
.faq .faq-knop:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.faq .faq-knop span{flex:1;min-width:0;}
.faq .faq-pijl{
  flex:0 0 auto;width:16px;height:16px;margin-top:.35rem;color:var(--primary);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.faq .faq-knop.is-dicht .faq-pijl{transform:rotate(-90deg);}
.faq .faq-antwoord{overflow:hidden;}
.faq .faq-tekst{
  padding:0 3rem 1.3rem 0;                 /* ruimte onder, en vrij van het pijltje */
  color:var(--muted);font-size:.94rem;line-height:1.65;
}
.faq .faq-tekst p{margin:0 0 .8rem;}
.faq .faq-tekst p:last-child{margin-bottom:0;}
.faq .faq-tekst a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:575.98px){
  .faq .faq-knop{font-size:.98rem;padding:1rem 0;}
  .faq .faq-tekst{padding-right:1.5rem;}
}
@media (prefers-reduced-motion:reduce){ .faq .faq-pijl{transition:none;} }

/* Het woordmerk groeit een fractie bij hover. Genoeg om te merken,
   te weinig om de regel eromheen te laten verspringen. */
.wordmark{display:inline-block;transform-origin:left center;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),color .2s;}
.wordmark:hover,.wordmark:focus-visible{transform:scale(1.04);}
.wordmark em{transition:color .2s;}
.wordmark:hover em{color:var(--primary-deep);}
@media (prefers-reduced-motion:reduce){ .wordmark{transition:color .2s;}
  .wordmark:hover{transform:none;} }

/* ═══ Productgalerij ══════════════════════════════════════════ */
.galerij{position:relative;}
.galerij-hoofd{position:relative;aspect-ratio:1;background:var(--tint);overflow:hidden;}
.galerij-vlak{
  position:absolute;inset:0;padding:0;border:0;background:none;cursor:zoom-in;
  opacity:0;visibility:hidden;transition:opacity .3s ease;
}
.galerij-vlak.is-actief{opacity:1;visibility:visible;}
.galerij-vlak img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.galerij-vlak:hover img{transform:scale(1.05);}
.galerij-vlak:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
.galerij-loep{
  position:absolute;right:.85rem;bottom:.85rem;width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);
  display:grid;place-items:center;opacity:0;transition:opacity .22s;pointer-events:none;
  box-shadow:var(--shadow);
}
.galerij-vlak:hover .galerij-loep,.galerij-vlak:focus-visible .galerij-loep{opacity:1;}
.galerij-teller{
  position:absolute;left:.85rem;bottom:.85rem;background:color-mix(in srgb,var(--ink) 82%,transparent);
  color:var(--paper);font-size:.74rem;font-weight:700;padding:.28rem .7rem;border-radius:var(--pill);
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.galerij-duimen{display:flex;gap:.55rem;margin-top:.7rem;overflow-x:auto;padding-bottom:.3rem;
  scrollbar-width:thin;}
.galerij-duim{
  flex:0 0 auto;width:76px;height:76px;padding:0;border:1px solid var(--line-soft);
  background:var(--tint);cursor:pointer;overflow:hidden;position:relative;
  transition:border-color .2s,opacity .2s;opacity:.72;
}
.galerij-duim img{width:100%;height:100%;object-fit:cover;display:block;}
.galerij-duim:hover{opacity:1;border-color:var(--line);}
.galerij-duim.is-actief{opacity:1;border-color:var(--primary);border-width:2px;}
.galerij-duim:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.galerij-vlak video{width:100%;height:100%;object-fit:cover;display:block;}
/* Driehoekje op de miniatuur van een video, zodat je ziet dat hij beweegt */
.galerij-speel,.lb-duimen .is-video::after{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 70%,transparent);pointer-events:none;z-index:1;
}
.galerij-speel::after,.lb-duimen .is-video::before{
  content:"";position:absolute;left:50%;top:50%;margin:-5px 0 0 -3px;z-index:2;
  border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--paper);
}
.lb-duimen .is-video{position:relative;}
.lb-duimen .is-video::after{content:"";}
.lb-vlak video{max-width:100%;max-height:100%;display:block;background:var(--ink);}

/* ═══ Volledig scherm ═════════════════════════════════════════ */
.lightbox{
  position:fixed;inset:0;z-index:1090;background:color-mix(in srgb,var(--ink) 96%,transparent);
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;gap:.5rem;padding:1rem;opacity:0;transition:opacity .28s ease;
}
.lightbox.is-in{opacity:1;}
.lb-vlak{grid-column:2;grid-row:1;display:grid;place-items:center;overflow:hidden;
  width:100%;height:100%;touch-action:pan-y;}
.lb-vlak img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  transition:opacity .2s,transform .35s cubic-bezier(.2,.7,.3,1);cursor:zoom-in;}
.lb-vlak img.is-ingezoomd{cursor:zoom-out;transform:scale(2);}
.lb-pijl{
  width:48px;height:48px;border-radius:50%;border:0;flex:0 0 auto;
  background:color-mix(in srgb,var(--paper) 14%,transparent);color:var(--paper);
  display:grid;place-items:center;cursor:pointer;transition:background-color .2s;
}
.lb-pijl:hover{background:color-mix(in srgb,var(--paper) 26%,transparent);}
.lb-pijl:focus-visible{outline:2px solid var(--paper);outline-offset:2px;}
.lb-vorige{grid-column:1;grid-row:1;}
.lb-vorige .ico{transform:rotate(180deg);}
.lb-volgende{grid-column:3;grid-row:1;}
.lb-sluit{
  position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:0;
  background:color-mix(in srgb,var(--paper) 14%,transparent);color:var(--paper);
  display:grid;place-items:center;cursor:pointer;z-index:2;transition:background-color .2s;
}
.lb-sluit:hover{background:color-mix(in srgb,var(--paper) 26%,transparent);}
.lb-teller{grid-column:2;grid-row:2;text-align:center;color:var(--paper);opacity:.75;
  font-size:.82rem;margin:0;font-variant-numeric:tabular-nums;}
.lb-duimen{grid-column:1/-1;grid-row:2;display:flex;gap:.5rem;justify-content:center;
  flex-wrap:wrap;margin-top:2.2rem;}
.lb-duimen button{width:54px;height:54px;padding:0;border:2px solid transparent;
  background:none;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s;}
.lb-duimen button img{width:100%;height:100%;object-fit:cover;display:block;}
.lb-duimen button.is-actief{opacity:1;border-color:var(--paper);}
.lb-duimen button:hover{opacity:.85;}
body.lb-open{overflow:hidden;}
@media (max-width:767.98px){
  .lightbox{grid-template-columns:1fr;padding:.5rem;}
  .lb-pijl{position:absolute;top:50%;transform:translateY(-50%);}
  .lb-vorige{left:.6rem;}
  .lb-volgende{right:.6rem;}
  .lb-vlak{grid-column:1;}
  .lb-teller{grid-column:1;}
  .lb-duimen{display:none;}
  .galerij-duim{width:64px;height:64px;}
}
@media (prefers-reduced-motion:reduce){
  .galerij-vlak img,.lb-vlak img,.lightbox{transition:none;}
  .galerij-vlak:hover img{transform:none;}
}

/* ═══ Auteursblok ═════════════════════════════════════════════ */
.auteur{display:flex;gap:1.2rem;align-items:flex-start;background:var(--tint);
  padding:1.5rem;margin-top:2.5rem;}
/* min-width is nodig omdat de basisregel img{max-width:100%} de foto
   anders platdrukt zodra de kolom smaller wordt dan de foto zelf. */
.auteur-foto{width:96px;height:96px;min-width:96px;border-radius:50%;object-fit:cover;
  flex:0 0 auto;border:3px solid var(--surface);box-shadow:var(--shadow);}
.auteur-label{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:none;
  color:var(--primary);margin:0 0 .1rem;}
.auteur-naam{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0 0 .5rem;
  color:var(--ink);}
.auteur-over{font-size:.9rem;color:var(--muted);margin:0 0 .7rem;max-width:52ch;line-height:1.6;}
.auteur-link{font-size:.87rem;font-weight:700;display:inline-flex;align-items:center;gap:.4rem;}
.auteur-compact{padding:1.1rem;gap:.9rem;}
.auteur-compact .auteur-foto{width:64px;height:64px;}
.auteur-compact .auteur-over{display:none;}
@media (max-width:575.98px){
  .auteur{flex-direction:column;gap:.9rem;}
  .auteur-foto{width:76px;height:76px;min-width:76px;}
}

/* ═══ Aanbevolen producten in een artikel ═════════════════════ */
.aanbevolen{background:var(--surface);border:1px solid var(--line-soft);padding:1.6rem;
  margin:2.5rem 0;}
.aanbevolen-kop{margin-bottom:1.2rem;}
.aanbevolen-kop .eyebrow .ico{color:var(--primary);}
.aanbevolen-intro{font-size:.9rem;color:var(--muted);margin:.3rem 0 0;max-width:60ch;}

/* ── Over ons: persoonlijke foto's van Milou ── */
.over-hero{display:flex;flex-direction:column-reverse;gap:1.4rem;margin:0 0 2.4rem;}
.over-hero-tekst{min-width:0;}
.over-hero-tekst .lead-p{margin-bottom:0;}
.over-hero-foto{width:100%;max-width:260px;aspect-ratio:2/3;object-fit:cover;object-position:center 22%;
  border-radius:1.1rem;box-shadow:0 .8rem 2rem rgba(29,43,58,.13);}
.over-beeld-rij{display:grid;grid-template-columns:1fr;gap:1.1rem;margin:2rem 0 2.4rem;}
.over-beeld-rij figure{margin:0;}
.over-beeld-rij img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center 20%;
  border-radius:1.1rem;display:block;}
.over-beeld-rij figcaption{color:var(--muted);font-size:.86rem;line-height:1.5;
  margin-top:.6rem;padding-left:.15rem;}
.over-slot{display:flex;align-items:center;gap:1rem;margin:2.4rem 0 0;padding:1.1rem 1.25rem;
  background:var(--tint);border-radius:1.1rem;}
.over-slot img{width:64px;height:64px;flex:0 0 64px;border-radius:50%;object-fit:cover;}
.over-slot p{margin:0;}
.over-slot-naam{font-family:var(--display);font-size:1.15rem;color:var(--ink);line-height:1.2;}
.over-slot-tekst{color:var(--muted);font-size:.92rem;line-height:1.5;margin-top:.15rem!important;}

@media (min-width:576px){
  .over-beeld-rij{grid-template-columns:1fr 1fr;gap:1.25rem;}
}
@media (min-width:992px){
  .over-hero{flex-direction:row;align-items:center;gap:2.2rem;}
  .over-hero-foto{flex:0 0 240px;max-width:240px;}
}

/* ── Laadweergave op de verlanglijst ── */
.laadmelding{display:flex;align-items:center;gap:.65rem;color:var(--muted);
  font-size:.94rem;margin:0 0 .4rem;}
.laadwiel{width:1.05rem;height:1.05rem;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--primary);
  animation:laadwiel-draai .7s linear infinite;}
@keyframes laadwiel-draai{to{transform:rotate(360deg);}}

/* Plaatshouders in de vorm van een productkaart, zodat de bezoeker ziet
   hoeveel sieraden er komen en waar ze terechtkomen. */
.pcard-skelet{pointer-events:none;}
.sk{display:block;background:var(--line-soft);border-radius:.4rem;
  position:relative;overflow:hidden;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--surface),transparent);
  animation:sk-glans 1.25s ease-in-out infinite;}
@keyframes sk-glans{to{transform:translateX(100%);}}
.sk-vlak{width:100%;aspect-ratio:1;border-radius:0;}
.sk-regel{height:.72rem;margin-top:.55rem;}
.sk-kort{width:38%;}
.sk-prijs{width:3.6rem;height:.9rem;margin:0;}
.sk-knop{display:block;width:7.4rem;height:2.1rem;border-radius:999px;
  background:var(--line-soft);}
@media (prefers-reduced-motion:reduce){
  .laadwiel,.sk::after{animation:none;}
}

/* ── Balk onderin met de winkelwagen ── */
.wagenbalk{position:fixed;left:0;right:0;bottom:0;z-index:1040;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -.5rem 1.6rem rgba(29,43,58,.1);
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .22s ease;}
.wagenbalk.open{transform:translateY(0);}
.wagenbalk-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.wagenbalk-tekst{margin:0;display:flex;align-items:baseline;gap:.5rem;min-width:0;}
.wagenbalk-aantal{color:var(--muted);font-size:.9rem;white-space:nowrap;}
.wagenbalk-tekst strong{font-size:1.02rem;white-space:nowrap;}
.wagenbalk .btn-hp{flex:0 0 auto;}

/* Op mobiel staat de menuknop rechtsonder, dus die schuift mee omhoog
   zolang de balk in beeld is. Anders liggen ze over elkaar heen. */
@media (max-width:991.98px){
  .wagenbalk-aantal{display:none;}
  .wagenbalk.open ~ .fab-menu,
  body:has(.wagenbalk.open) .fab-menu{bottom:calc(16px + 4.2rem);}
}
@media (prefers-reduced-motion:reduce){
  .wagenbalk{transition:none;}
}

/* ── Productkaart op mobiel ──
   De knop over de volle breedte, met het hartje ernaast. Zo is de knop
   makkelijk te raken met een duim en zie je meteen dat je iets kunt bewaren. */
@media (max-width:575.98px){
  .pcard-foot{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"prijs prijs" "knop hart";gap:.5rem .5rem;align-items:center;}
  .pcard-foot .price{grid-area:prijs;}
  /* Twee kaarten naast elkaar laat maar zo'n 160 pixels over, dus de knop
     krijgt kleinere tekst en minder ruimte opzij. Anders breekt
     "In winkelwagen" over twee regels en staat de rij scheef. */
  .pcard-foot .add{grid-area:knop;width:100%;min-height:42px;
    padding:.5rem .4rem;font-size:.8rem;line-height:1.2;}
  .pcard-foot .wish{grid-area:hart;position:static;align-self:center;
    width:40px;height:40px;background:var(--surface);border-color:var(--line);}
}

/* ── Producttekst in twee kolommen ──
   Alleen op een breed scherm, waar een enkele kolom anders veel te lang
   wordt. De browser verdeelt de tekst zelf, dus het blijft kloppen hoe lang
   of kort een beschrijving ook is. */
@media (min-width:992px){
  .pdp-tekst{columns:2;column-gap:3rem;orphans:2;widows:2;}
  /* Een kop hoort niet onderaan een kolom te staan met zijn alinea in de
     volgende, en een lijstje mag niet doormidden vallen. */
  .pdp-tekst h3,.pdp-tekst h4,.pdp-tekst ul,.pdp-tekst ol,
  .pdp-tekst table,.pdp-tekst blockquote,.pdp-tekst figure{break-inside:avoid;}
  .pdp-tekst h3,.pdp-tekst h4{break-after:avoid;}
  .pdp-tekst > :first-child{margin-top:0;}
}

/* ── Kop met een icoontje ──
   Het teken staat in een zacht rond vlakje in plaats van los voor de tekst.
   Dat leest rustiger, en het houdt de kop netjes uitgelijnd als hij over
   twee regels valt. Bruikbaar bij elke kop, niet alleen bij het sieraad. */
.kop-met-icoon{display:flex;align-items:center;gap:.75rem;}
.kop-icoon{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--tint);color:var(--primary);
  display:grid;place-items:center;font-size:.95rem;}
@media (max-width:575.98px){
  .kop-met-icoon{gap:.6rem;}
  .kop-icoon{width:1.9rem;height:1.9rem;font-size:.85rem;}
}

/* ── Aanbevolen producten in een artikel ──
   Het blok stond in de tekstkolom, en vier kaarten naast elkaar werden daar
   zo'n 170 pixels breed. Te klein om iets van het sieraad te zien, en het
   oogde rommelig. Vanaf een breed scherm laten we het blok daarom buiten de
   tekstkolom treden, zodat de kaarten weer ruimte krijgen. In een artikel
   werkt dat ook als een rustpunt tussen de alinea's door. */
@media (min-width:992px){
  /* De tekstkolom is acht van de twaalf kolommen breed. Het blok rekt uit
     naar alle twaalf, dus precies tot de randen van de rest van de site.
     Bewust niet met 100vw gerekend: die maat telt de schuifbalk mee, en dan
     staat het blok een paar pixels uit het midden. */
  .aanbevolen-breed{
    width:150%;
    margin-left:-25%;
    padding:2rem;
  }
}

/* ── Productkaart past zich aan zijn eigen breedte aan ──
   De regel hierboven kijkt naar de breedte van het scherm, maar een kaart
   kan ook op een breed scherm smal uitvallen, bijvoorbeeld met vier naast
   elkaar in een artikel. Dan brak de prijs over twee regels en de knoptekst
   ook. Met een containervraag kijkt de kaart naar zijn eigen breedte, dus
   het klopt overal waar we hem neerzetten. */
.pcard{container-type:inline-size;}
.price{white-space:nowrap;}

@container (max-width:260px){
  .pcard-foot{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"prijs prijs" "knop hart";gap:.5rem;align-items:center;}
  .pcard-foot .price{grid-area:prijs;}
  .pcard-foot .add{grid-area:knop;width:100%;min-height:42px;
    padding:.5rem .4rem;font-size:.8rem;line-height:1.2;}
  .pcard-foot .wish{grid-area:hart;position:static;align-self:center;
    width:40px;height:40px;background:var(--surface);border-color:var(--line);}
}

/* ═══════════════════════════════════════════════════════════════
   Huidproduct.nl, ontwerp "Helder" (oktober 2026)

   Dit bestand bepaalt de uitstraling van de hele winkel. Het komt na de
   basis uit huidproduct.css, die de werking van de onderdelen regelt
   (winkelmandvenster, zijpaneel, lightbox, afrekenen). Hier staan de
   kleuren, de typografie, de afstanden en elk zichtbaar onderdeel.

   Afspraken die overal gelden:
   - Kleuren uit de oude winkel: groen, lichtgroen en donkerblauw.
   - Nergens tekst in hoofdletters, ook niet via opmaak.
   - Een vaste maatvoering: knoppen 48 pixels hoog, hoeken 12 en 16 pixels,
     secties met dezelfde ruimte boven en onder.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#1B2A3A;
  --text:#3B4856;
  --muted:#5E6B7A;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --tint:#EFF7F1;
  --tint-2:#F4F7FA;
  --primary:#23802F;
  --primary-deep:#1A6324;
  --brand:#2E963A;
  --accent:#92CDA4;
  --navy:#334862;
  --navy-deep:#26374C;
  --line:#E2E8EE;
  --line-soft:#EEF2F5;
  --ok:#23802F;
  --warn:#B45309;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow-s:0 1px 2px rgba(27,42,58,.06),0 2px 8px -2px rgba(27,42,58,.08);
  --shadow:0 12px 32px -16px rgba(27,42,58,.28);
  --shadow-lift:0 22px 48px -22px rgba(27,42,58,.38);
  --sectie:clamp(3rem,6vw,5rem);
  --display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
}

/* ── Basis en typografie ─────────────────────────────────────── */
html{scroll-padding-top:150px;}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--paper);
  font-feature-settings:"cv11","ss01";}
*{text-transform:none!important;}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.02em;text-wrap:balance;}
h1,.h1-cat,.h1-pdp,.h1-post{font-size:clamp(2rem,3.6vw,2.85rem);font-weight:800;line-height:1.12;letter-spacing:-.03em;}
h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;line-height:1.2;}
.h2-sm{font-size:clamp(1.35rem,2vw,1.65rem);}
h3{font-size:1.18rem;font-weight:700;line-height:1.3;}
p{max-width:70ch;}
a{color:var(--primary);text-underline-offset:3px;}
a:hover{color:var(--primary-deep);}
strong{color:var(--ink);font-weight:600;}
.container{max-width:1240px;}
:focus-visible{outline:3px solid rgba(35,128,47,.45);outline-offset:2px;border-radius:6px;}
::selection{background:var(--accent);color:var(--ink);}

/* Het kleine label boven een kop. Een gewone zin in groen, nooit in kapitalen. */
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--body);font-size:.92rem;
  font-weight:600;letter-spacing:0;color:var(--primary);margin-bottom:.6rem;}
.eyebrow .ico{width:1.05em;height:1.05em;}
.eyebrow.justify-content-center{display:flex;}
.lead-p,.term-lead,.hero-lead{font-size:1.15rem;line-height:1.65;color:var(--text);}

.sectie{padding:var(--sectie) 0;}
.bg-tint{background:var(--tint);}
.bg-tint-2{background:var(--tint-2);}
.py-5{padding-top:var(--sectie)!important;padding-bottom:var(--sectie)!important;}

/* ── Knoppen ─────────────────────────────────────────────────── */
.btn-hp{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;
  padding:.75rem 1.4rem;border-radius:12px;border:1.5px solid transparent;font-family:var(--body);
  font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.2;cursor:pointer;text-decoration:none;
  transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;}
.btn-fill{background:var(--primary);color:#fff;box-shadow:0 6px 16px -8px rgba(35,128,47,.6);}
.btn-fill:hover{background:var(--primary-deep);color:#fff;transform:translateY(-1px);}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line);}
.btn-line:hover{border-color:var(--primary);color:var(--primary);background:#fff;transform:translateY(-1px);}
.btn-sm-hp{min-height:40px;padding:.5rem 1rem;font-size:.92rem;border-radius:10px;}
.btn-hp .ico{width:1.05em;height:1.05em;}

/* Labels en filterknoppen. */
.chip-f{display:inline-flex;align-items:center;gap:.35rem;min-height:38px;padding:.4rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.92rem;font-weight:500;
  letter-spacing:0;transition:border-color .18s,color .18s,background-color .18s;}
.chip-f:hover,.chip-f.is-on{border-color:var(--primary);color:var(--primary);background:var(--tint);}
.chip-aantal{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:999px;
  background:var(--tint);color:var(--primary);font-size:.75rem;font-weight:600;}

/* Kruimelpad. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.88rem;color:var(--muted);}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--primary);}
.crumbs span[aria-hidden]{opacity:.5;}
.crumbs span[aria-current]{color:var(--ink);font-weight:500;}

/* ── Servicebalk ─────────────────────────────────────────────── */
.balk{background:var(--tint);border-bottom:1px solid var(--line-soft);font-size:.86rem;color:var(--navy);}
.balk-rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;}
.balk-usps{display:flex;gap:1.6rem;margin:0;padding:0;list-style:none;}
.balk-usps li{display:flex;align-items:center;gap:.4rem;white-space:nowrap;}
.balk-usps .ico{color:var(--brand);}
.balk-links{display:none;gap:1.2rem;}
.balk-links a{color:var(--navy);}
.balk-links a:hover{color:var(--primary);}
@media (min-width:992px){.balk-links{display:flex;}}
/* Op een telefoon rouleren de beloftes een voor een (zie ui.js en de basis). */
@media (max-width:991.98px){
  .balk-usps{gap:0;}
  .balk-usps li{justify-content:center;}
}

/* ── Kop ─────────────────────────────────────────────────────── */
.kop{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);}
.kop-rij{display:flex;align-items:center;gap:1.75rem;min-height:76px;}
.logo{flex:0 0 auto;line-height:0;}
.logo img{width:clamp(150px,16vw,210px);height:auto;}
.kop-zoek{position:relative;flex:1;max-width:620px;display:none;align-items:center;}
.kop-zoek-ico{position:absolute;left:1rem;color:var(--muted);pointer-events:none;}
.kop-zoek input{width:100%;height:50px;border:1.5px solid var(--line);border-radius:14px;background:var(--tint-2);
  padding:0 7.5rem 0 2.75rem;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .18s,background-color .18s,box-shadow .18s;}
.kop-zoek input::placeholder{color:var(--muted);}
.kop-zoek input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(35,128,47,.12);}
.kop-zoek .btn-hp{position:absolute;right:5px;min-height:40px;box-shadow:none;}
.kop-acties{display:flex;align-items:center;gap:.25rem;margin-left:auto;}
.kop-knop{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-width:64px;
  height:56px;padding:0 .5rem;border-radius:12px;color:var(--ink);font-size:.78rem;font-weight:500;transition:background-color .18s,color .18s;}
.kop-knop .ico{width:1.3rem;height:1.3rem;}
.kop-knop:hover{background:var(--tint-2);color:var(--primary);}
.kop-knop-wagen{background:var(--primary);color:#fff;min-width:88px;}
.kop-knop-wagen:hover{background:var(--primary-deep);color:#fff;}
.kop-knop .badge-count{position:absolute;top:4px;right:10px;min-width:20px;height:20px;border-radius:999px;
  background:var(--warn);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;border:2px solid #fff;}
.kop-knop-wagen .badge-count{background:#fff;color:var(--primary);border-color:var(--primary);}
@media (min-width:992px){.kop-zoek{display:flex;}.kop-knop-zoek{display:none;}}
@media (max-width:767.98px){
  .kop-rij{min-height:64px;gap:.75rem;}
  .kop-knop{min-width:44px;height:44px;}
  .kop-knop-tekst,.kop-knop-account{display:none;}
  .kop-knop-wagen{min-width:48px;}
  .kop-knop .badge-count{top:0;right:0;}
}

/* ── Menu ────────────────────────────────────────────────────── */
.menu{border-top:1px solid var(--line-soft);display:none;}
@media (min-width:1200px){.menu{display:block;}}
.menu-lijst{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none;}
.menu-item{position:static;}
.menu .menu-knop,.menu .nav-sub-knop{display:inline-flex;align-items:center;gap:.4rem;height:52px;padding:0 .95rem;
  background:none;border:0;border-radius:0;color:var(--ink);font-family:var(--body);font-size:.98rem;font-weight:600;
  position:relative;cursor:pointer;}
.menu .menu-knop::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--primary);transform:scaleX(0);transition:transform .2s;}
.menu .menu-item:hover > .menu-knop,.menu .nav-sub.is-open > .menu-knop{color:var(--primary);}
.menu .menu-item:hover > .menu-knop::after,.menu .nav-sub.is-open > .menu-knop::after{transform:scaleX(1);}
.menu .nav-sub-knop .ico{width:.7em;height:.7em;transition:transform .2s;}
.menu-rechts{margin-left:auto;}
.menu-advies{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.95rem;color:var(--primary);}
.menu-advies .ico{color:var(--brand);}
.menu .nav-sub-lijst.menu-paneel{position:absolute;left:0;right:0;top:100%;min-width:0;padding:0;transform:translateY(6px);}
.menu .nav-sub-lijst.menu-paneel::before{display:none;}
.menu-paneel-in{max-width:1240px;margin:0 auto;padding:0 .75rem;}
.menu-paneel-in{display:grid;grid-template-columns:1fr 300px;gap:2rem;background:#fff;border:1px solid var(--line);
  border-top:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lift);padding:1.75rem 2rem;}
.menu-paneel-kop{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:.75rem;}
.menu-paneel-kop .ico{color:var(--brand);}
.menu-paneel-links ul{columns:3;column-gap:1.5rem;margin:0;}
.menu-paneel-links li{break-inside:avoid;padding:0!important;}
.menu .menu-paneel-links a{display:block;padding:.45rem .6rem;margin-left:-.6rem;border-radius:8px;color:var(--text);font-weight:500;}
.menu .menu-paneel-links a:hover{background:var(--tint);color:var(--primary);}
.menu .menu-alles{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;color:var(--primary);}
.menu-paneel-advies{background:var(--tint);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;}
.menu-paneel-advies p{font-size:.95rem;margin:0;}
.menu-advies-ico{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;font-size:1.25rem;}
.menu .menu-paneel-advies .btn-hp{color:var(--ink);}

/* ── Zwevende menuknop en zijpaneel (telefoon en tablet) ──────── */
.fab-menu{background:var(--navy);box-shadow:0 12px 28px -10px rgba(27,42,58,.55);font-weight:600;border-radius:999px;}
.fab-menu:hover{background:var(--navy-deep);}
.sidebar{border-radius:var(--radius-l) 0 0 var(--radius-l);}
.sidebar-head img{width:160px;height:auto;}
.sidebar-nav a,.sidebar-groep summary{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);
  padding:.8rem 0;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;}
.sidebar-groep{border:0;}
.sidebar-groep summary{list-style:none;cursor:pointer;}
.sidebar-groep summary::-webkit-details-marker{display:none;}
.sidebar-nav .ico,.sidebar-groep summary .ico{color:var(--brand);width:1.1em;}
.sidebar-nav .chev,.sidebar-groep .chev{opacity:.4;width:.8em;margin-left:auto;transition:transform .2s;}
.sidebar-groep[open] summary .chev{transform:rotate(180deg);}
.sidebar-kinderen{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;padding:.4rem 0 .9rem 1.7rem;border-bottom:1px solid var(--line-soft);}
.sidebar-nav .sidebar-kinderen a{font-family:var(--body);font-weight:400;font-size:.95rem;color:var(--text);border:0;padding:.4rem 0;display:block;}
.sidebar-nav .sidebar-kinderen a:first-child{grid-column:1/-1;font-weight:600;color:var(--primary);}
.sidebar-sub a{font-weight:500;color:var(--text);font-size:.95rem;}
.sidebar-foot{background:var(--tint);}

/* ── Hero op de homepage ─────────────────────────────────────── */
.hero{background:radial-gradient(1200px 500px at 85% 10%,rgba(146,205,164,.28),transparent 60%),linear-gradient(180deg,var(--tint) 0%,#fff 100%);
  overflow:hidden;}
.hero .container{padding-top:clamp(2.5rem,5vw,4.5rem)!important;padding-bottom:clamp(2.5rem,5vw,4.5rem)!important;}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.08;letter-spacing:-.035em;}
.hero h1 .accent{color:var(--primary);}
.hero-lead{max-width:48ch;}
.hero-zekerheden{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.95rem;color:var(--text);margin:0;padding:0;list-style:none;}
.hero-zekerheden li{display:flex;align-items:center;gap:.45rem;}
.hero-zekerheden .ico{color:var(--brand);}
.hero-media{max-width:500px;margin-left:auto;position:relative;}
.hero-tint{position:absolute;inset:-8% -8% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:var(--accent);opacity:.3;filter:blur(2px);}
.hero-slider{border-radius:var(--radius-l);}
.hero-slide{position:relative;aspect-ratio:1/1;background:#fff;border-radius:var(--radius-l);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);overflow:hidden;}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:13%;box-shadow:none;}
.hero-actie{left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:.6rem;}
.hero-tag{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.55rem .9rem;box-shadow:var(--shadow-s);min-width:0;}
.hero-tag span{display:block;font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--muted);max-width:24ch;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-tag b{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--ink);}
.hero-stippen{top:16px;bottom:auto;right:16px;}
.hero-stip.is-actief{background:var(--primary);}

/* ── Ingangen, stappen en blokken ────────────────────────────── */
.ingang{position:relative;display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1.5rem 1.4rem 3.25rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--text);transition:border-color .2s,box-shadow .25s,transform .25s;}
.ingang:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px);color:var(--text);}
.ingang-ico{width:52px;height:52px;border-radius:14px;background:var(--tint);color:var(--brand);display:grid;place-items:center;
  font-size:1.35rem;margin-bottom:.5rem;}
.ingang-naam{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);}
.ingang-tekst{font-size:.93rem;line-height:1.55;color:var(--muted);}
.ingang-pijl{position:absolute;left:1.4rem;bottom:1.25rem;color:var(--primary);transition:transform .2s;}
.ingang:hover .ingang-pijl{transform:translateX(5px);}
.snel{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;}
.snel-label{font-size:.95rem;color:var(--muted);margin-right:.25rem;}

.stappen{counter-reset:stap;}
.stap{position:relative;height:100%;padding:1.6rem 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);}
.stap-nr{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;margin-bottom:.9rem;}
.stap h3{margin-bottom:.35rem;}
.stap p{font-size:.95rem;color:var(--muted);margin:0;}

.truus-kaart{background:linear-gradient(160deg,var(--tint) 0%,#fff 75%);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:2rem;box-shadow:var(--shadow);}
.truus-ico{width:76px;height:76px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:2rem;margin-bottom:1rem;}
.truus-naam{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--ink);margin:0;}
.truus-vak{color:var(--muted);margin-bottom:1rem;}
.truus-feiten{margin:0;padding:0;list-style:none;}
.truus-feiten li{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;font-size:.97rem;}
.truus-feiten .ico{color:var(--brand);margin-top:.3rem;flex:0 0 auto;}

.merken{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;}
.merk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:110px;padding:1.25rem 1rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s;}
.merk span{font-family:var(--display);font-weight:800;font-size:1.08rem;color:var(--ink);}
.merk small{font-size:.85rem;color:var(--muted);}
.merk:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px);}

.trust{background:var(--tint-2);}
.trust-item{display:flex;gap:.9rem;align-items:flex-start;}
.trust-ico{width:46px;height:46px;flex:0 0 auto;border-radius:12px;background:#fff;color:var(--brand);display:grid;place-items:center;
  font-size:1.2rem;border:1px solid var(--line);}
.trust-item h3{font-size:1rem;margin-bottom:.2rem;}
.trust-item p{font-size:.9rem;color:var(--muted);margin:0;}

/* ── Productkaart ────────────────────────────────────────────── */
.pcard{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;container-type:inline-size;
  transition:box-shadow .25s,transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s;}
.pcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px);border-color:var(--accent);}
.pcard-media{position:relative;aspect-ratio:1;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--tint-2) 100%);
  border-bottom:1px solid var(--line-soft);}
.pcard-media img{width:100%;height:100%;object-fit:contain;padding:11%;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.pcard:hover .pcard-media img{transform:scale(1.05);}
.pcard-hover{display:none;}
@media (hover:hover){
  .pcard-hover{display:block;position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .3s;pointer-events:none;}
  .pcard:hover .pcard-hover{opacity:1;}
}
.flag{position:absolute;top:.8rem;left:.8rem;z-index:2;border-radius:999px;padding:.3rem .75rem;background:var(--primary);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:0;}
.flag-muted{background:var(--navy);}
.wish{position:absolute;top:.75rem;right:.75rem;z-index:2;width:40px;height:40px;border-radius:50%;background:#fff;
  border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-s);cursor:pointer;
  transition:color .18s,border-color .18s,transform .15s;}
.wish:hover{color:var(--primary);border-color:var(--primary);}
.wish[aria-pressed="true"]{color:#C2410C;border-color:#F5CDBB;background:#FFF6F1;}
.pcard-body{display:flex;flex-direction:column;gap:.35rem;flex:1;padding:1rem 1.1rem 1.15rem;}
.pcard-cat{font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--brand);}
.pcard-name{font-family:var(--display);font-size:1.02rem;font-weight:700;line-height:1.3;margin:0;}
.pcard-name a{color:var(--ink);}
.pcard-name a:hover{color:var(--primary);}
.pcard-belofte{font-size:.88rem;line-height:1.5;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;}
.pcard-labels{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem;}
.pcard-labels span{font-size:.76rem;font-weight:500;color:var(--primary);background:var(--tint);border-radius:999px;padding:.2rem .6rem;}
.pcard-foot{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;margin-top:auto;padding-top:.75rem;}
.pcard-prijs{display:flex;align-items:baseline;gap:.5rem;}
.price{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pcard-was{font-size:.88rem;color:var(--muted);}
.pcard-voorraad{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--ok);margin:0;}
.pcard-voorraad::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.pcard-voorraad.is-op{color:var(--warn);}
.add{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.55rem 1rem;
  border-radius:10px;border:1.5px solid var(--primary);background:var(--primary);color:#fff;font-family:var(--body);font-size:.93rem;
  font-weight:600;cursor:pointer;text-decoration:none;transition:background-color .18s,border-color .18s,color .18s;}
.add:hover:not([disabled]){background:var(--primary-deep);border-color:var(--primary-deep);color:#fff;}
.add.add-vol{width:100%;}
.pcard.is-op .add{background:#fff;color:var(--ink);border-color:var(--line);}
.add[data-state="loading"]{color:transparent;}
.add[data-state="loading"]::after{border-color:rgba(255,255,255,.5);border-top-color:#fff;}
.add[data-state="done"]{background:var(--brand);border-color:var(--brand);color:#fff;}
@media (max-width:575.98px){
  .pcard-body{padding:.85rem .85rem 1rem;}
  .pcard-name{font-size:.95rem;}
  .pcard-belofte{display:none;}
  .price{font-size:1.15rem;}
  .add{font-size:.85rem;padding:.5rem .4rem;}
}

/* ── Term- en overzichtspagina's ─────────────────────────────── */
.term-kop{background:linear-gradient(180deg,var(--tint) 0%,#fff 100%);padding-top:.5rem!important;padding-bottom:2.25rem!important;margin-bottom:1.5rem;}
.term-aantal{font-size:.92rem;color:var(--muted);font-weight:500;}
.term-tegel{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.35rem 1.3rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--text);transition:border-color .2s,box-shadow .25s,transform .25s;}
.term-tegel:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px);color:var(--text);}
.term-tegel-naam{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--ink);}
.term-tegel-tekst{font-size:.9rem;line-height:1.55;color:var(--muted);flex:1;}
.term-tegel-voet{display:flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;color:var(--primary);}
.empty{text-align:center;padding:3rem 1.5rem;background:var(--tint-2);border-radius:var(--radius);}
.empty .ico{width:2.2rem;height:2.2rem;color:var(--accent);margin-bottom:.75rem;}

/* ── Lopende tekst ───────────────────────────────────────────── */
.prose-band{background:var(--tint-2);}
.prose{font-size:1.0625rem;line-height:1.75;color:var(--text);}
.prose h2{font-size:clamp(1.35rem,2vw,1.6rem);margin:2.2rem 0 .8rem;}
.prose h3{font-size:1.15rem;margin:1.6rem 0 .5rem;}
.prose > :first-child{margin-top:0;}
.prose ul,.prose ol{padding-left:1.25rem;}
.prose li{margin:.3rem 0;}
.prose li::marker{color:var(--brand);}
.prose a{text-decoration:underline;text-decoration-color:rgba(35,128,47,.35);}
.prose a:hover{text-decoration-color:currentColor;}
.prose .advies-truus,.advies-truus{position:relative;margin:1.75rem 0;padding:1.15rem 1.25rem 1.15rem 3.6rem;background:var(--tint);
  border-radius:var(--radius);border:1px solid rgba(146,205,164,.6);color:var(--ink);}
.advies-truus::before{content:"";position:absolute;left:1.15rem;top:1.2rem;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm-96 55.2C54 332.9 0 401.3 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-81-54-149.4-128-171.1V362c27.6 7.1 48 32.2 48 62v40c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16s7.2-16 16-16v-24c0-17.7-14.3-32-32-32s-32 14.3-32 32v24c8.8 0 16 7.2 16 16s-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16v-40c0-29.8 20.4-54.9 48-62v-57.1c-6-.6-12.1-.9-18.3-.9h-91.4c-6.2 0-12.3.3-18.3.9v65.4c23.1 6.9 40 28.3 40 53.7 0 30.9-25.1 56-56 56s-56-25.1-56-56c0-25.4 16.9-46.8 40-53.7v-59.1z'/%3E%3C/svg%3E") center/55% no-repeat;}
.prose .advies-truus strong{color:var(--primary);}

/* Adviesblok naast tekst. */
.advies{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-s);}
.advies-kop{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem;}
.advies-foto{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--brand);display:grid;place-items:center;font-size:1.35rem;flex:0 0 auto;}
.advies-naam{font-family:var(--display);font-weight:800;color:var(--ink);margin:0;line-height:1.3;}
.advies-vak{font-size:.86rem;color:var(--muted);margin:0;}
.advies p{font-size:.97rem;}
.side-card{background:var(--tint-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.4rem;}
.side-list li{display:flex;gap:.6rem;align-items:center;padding:.35rem 0;font-size:.95rem;}
.side-list .ico{color:var(--brand);}
.h2-sum{font-size:1.15rem;}

/* Vragenblok. */
.faq{margin:2rem 0;}
.faq-kop{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:1rem;}
.faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:.6rem;overflow:hidden;}
.faq-knop{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;background:#fff;border:0;
  text-align:left;font-family:var(--body);font-size:1.02rem;font-weight:600;color:var(--ink);cursor:pointer;}
.faq-knop:hover{color:var(--primary);}
.faq-antwoord,.faq-item [id$="-a"]{padding:0 1.2rem 1.1rem;color:var(--text);}

/* ── Productpagina ───────────────────────────────────────────── */
.galerij-hoofd{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);}
.galerij-vlak img{object-fit:contain;padding:8%;}
.galerij-duim{border-radius:12px;border:1px solid var(--line);background:#fff;overflow:hidden;}
.galerij-duim.is-actief{border-color:var(--primary);box-shadow:0 0 0 2px rgba(35,128,47,.2);}
.galerij-duim img{object-fit:contain;}
.pdp-price{display:flex;align-items:baseline;gap:.6rem;font-family:var(--display);font-weight:800;font-size:2rem;color:var(--ink);}
.pdp-vat{font-family:var(--body);font-size:.88rem;font-weight:400;color:var(--muted);}
.pdp-intro{font-size:1.05rem;color:var(--text);}
.pdp-intro ul{padding-left:1.2rem;}
.stock-in,.stock-out{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.95rem;}
.stock-in{color:var(--ok);}
.stock-out{color:var(--warn);}
.variantlabel{font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:.5rem;letter-spacing:0;}
.variantknop{min-height:44px;padding:.5rem 1rem;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:500;}
.variantknop.is-gekozen{border-color:var(--primary);background:var(--tint);color:var(--primary);}
.qty{border:1.5px solid var(--line);border-radius:12px;min-height:48px;}
.pdp-usp{margin-top:1.25rem;padding:1.1rem 1.25rem;background:var(--tint-2);border-radius:var(--radius);}
.pdp-usp li{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;font-size:.95rem;}
.pdp-usp .ico{color:var(--brand);}
.kop-met-icoon{display:flex;align-items:center;gap:.7rem;}
.kop-icoon{width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--brand);display:grid;place-items:center;flex:0 0 auto;}
.geschikt-kop{font-size:.92rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-bottom:.5rem;}

/* ── Artikelen ───────────────────────────────────────────────── */
.post-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .25s,transform .25s;}
.post-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.post-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.post-media-leeg{display:grid;place-items:center;aspect-ratio:3/2;background:var(--tint);color:var(--accent);font-size:2.5rem;}
.post-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.post-date{font-size:.85rem;color:var(--muted);letter-spacing:0;}
.post-title{font-size:1.15rem;margin:0;}
.post-title a{color:var(--ink);}
.post-ex{font-size:.95rem;color:var(--muted);margin:0;}
.post-more{margin-top:auto;padding-top:.5rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;color:var(--muted);font-size:.95rem;}
.post-meta .ico{color:var(--brand);}
.post-hero{border-radius:var(--radius-l);width:100%;height:auto;}

/* ── Formulieren ─────────────────────────────────────────────── */
.contact-form label,.acc label{display:block;font-weight:600;font-size:.95rem;color:var(--ink);margin-bottom:.35rem;}
.contact-form input,.contact-form textarea,.acc input,.ck-veld input,.ck-veld select{width:100%;min-height:48px;padding:.7rem .95rem;border:1.5px solid var(--line);
  border-radius:12px;font:inherit;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s;}
.contact-form input:focus,.contact-form textarea:focus,.acc input:focus,.ck-veld input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(35,128,47,.12);}
.contact-kanalen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem;}
.kanaal{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);}
.kanaal .ico{width:1.4rem;height:1.4rem;color:var(--brand);}
.kanaal strong{display:block;color:var(--ink);}
.kanaal:hover{border-color:var(--primary);color:var(--text);}

/* ── Winkelmand en vensters ──────────────────────────────────── */
.cart-modal,.zoek-venster{border-radius:var(--radius-l);}
.wagenbalk{background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 30px -20px rgba(27,42,58,.35);}
.toast-hp{border-radius:14px;}

/* ── Footer ──────────────────────────────────────────────────── */
.ft{background:var(--navy);color:rgba(255,255,255,.82);border:0;}
.ft a{color:#fff;}
.ft a:hover{color:var(--accent);}
.ft-advies{background:var(--tint);color:var(--text);padding:2.5rem 0;border:0;}
.ft-advies a.btn-hp{color:#fff;}
.ft-advies-kop{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);margin-bottom:.35rem;}
.ft-advies-kop .ico{color:var(--brand);}
.ft-news{background:var(--navy-deep);color:#fff;padding:2.5rem 0;}
.ft-news-h{color:#fff;font-size:1.5rem;}
.ft-news input{border-radius:12px;min-height:48px;border:0;}
.ft-h,.ft-knop{color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:0;}
.ft-knop{background:none;border:0;padding:0;}
.ft-links a{display:block;padding:.3rem 0;color:rgba(255,255,255,.8);font-size:.95rem;}
.ft-links a:hover{color:#fff;}
.ft .muted,.ft-intro{color:rgba(255,255,255,.72);}
.ft-adres{color:rgba(255,255,255,.72);font-style:normal;font-size:.92rem;line-height:1.7;}
.ft-adres a{color:#fff;}
.pay span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:8px;padding:.25rem .6rem;font-size:.82rem;}
.ft-legal{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:.86rem;}
.ft-legal a,.ft-legal button{color:rgba(255,255,255,.75);}
.ft img[alt="Huidproduct.nl"]{filter:brightness(0) invert(1);}

/* ── Animaties: rustig, en uit voor wie minder beweging wil ──── */
@media (prefers-reduced-motion:no-preference){
  .verschijn{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
  .verschijn.is-zichtbaar{opacity:1;transform:none;}
}

/* Tabellen in lopende tekst. */
.tabel{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.95rem;}
.tabel th{background:var(--tint-2);color:var(--ink);font-weight:600;text-align:left;padding:.75rem 1rem;}
.tabel td{padding:.75rem 1rem;border-top:1px solid var(--line-soft);vertical-align:top;}

/* Producttekst in één kolom: medische uitleg leest rustiger zonder sprong naar een tweede kolom. */
.pdp-tekst{columns:auto!important;max-width:72ch;}

/* Foto van Truus: overal rond, met een zachte rand in het lichtgroen. */
.advies-foto,.truus-foto,.menu-advies-foto,.ft-advies-foto,.post-meta-foto{border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 0 0 2px var(--accent);flex:0 0 auto;}
.advies-foto{width:56px;height:56px;}
.truus-foto{width:120px;height:120px;margin-bottom:1rem;}
.menu-advies-foto{width:52px;height:52px;}
.ft-advies-foto{width:48px;height:48px;}
.post-meta-foto{width:36px;height:36px;border-width:2px;}