@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}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{font-size:1.25rem}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-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-3{flex:0 0 auto;width:25%}.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{flex:1 0 0}.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}}.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%}}.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}.d-none{display:none!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}.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}.mb-5{margin-bottom:3rem!important}.ms-2{margin-left:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!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}.gap-4{gap:1.5rem!important}.fs-5{font-size:1.25rem!important}.text-center{text-align:center!important}@media (min-width:768px){.d-md-flex{display:flex!important}}@media (min-width:992px){.d-lg-block{display:block!important}.d-lg-none{display:none!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}}
/* ═══════════════════════════════════════════════════════════════
   Loulou, ontwerpsysteem "Bes en Goud"
   Doelgroep: meisjes en vrouwen in Nederland. Onderwerp: sieraden.
   Alle contrastverhoudingen zijn getoetst aan WCAG AA.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#241C1F;        /* 16.30:1 op papier */
  --paper:#FFFCFA;
  --surface:#FFFFFF;
  --blush:#FBEFF1;
  --sand:#F3E9DC;
  --berry:#A5124A;      /* 7.38:1 op papier */
  --berry-deep:#7C0D38;
  --gold:#8A6D00;       /* 4.82:1 */
  --muted:#786A6D;      /* 5.04:1 */
  --on-berry:#FFFFFF;   /* 7.54:1 */
  --ok:#1F7A4D;
  --line:rgba(36,28,31,.13);
  --line-soft:rgba(36,28,31,.07);
  /* Donkere band, blijft in beide thema's donker met lichte tekst. */
  --band-bg:#241C1F;
  --band-fg:#FFFCFA;
  --band-muted:rgba(255,252,250,.74);
  --shadow:0 12px 34px -20px rgba(36,28,31,.42);
  --shadow-lift:0 22px 50px -24px rgba(36,28,31,.5);
  --pill:999px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --bs-body-bg:var(--paper); --bs-body-color:var(--ink);
  --bs-body-font-family:var(--body); --bs-border-color:var(--line);
  --bs-link-color:var(--berry); --bs-link-hover-color:var(--berry-deep);
  --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--muted);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F6EFEF; --paper:#171213; --surface:#201A1C;
    --blush:#2A1E22; --sand:#26201B;
    --berry:#FF7FA3; --berry-deep:#FFA9C1; --gold:#D7B44A;
    --muted:#B3A3A6; --on-berry:#2A0A18; --ok:#7ED9A6;
    --line:rgba(246,239,239,.16); --line-soft:rgba(246,239,239,.09);
    --band-bg:#2A2124; --band-fg:#F6EFEF; --band-muted:rgba(246,239,239,.72);
    --shadow:0 12px 34px -20px rgba(0,0,0,.8);
    --shadow-lift:0 22px 50px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ink:#F6EFEF; --paper:#171213; --surface:#201A1C;
  --blush:#2A1E22; --sand:#26201B;
  --berry:#FF7FA3; --berry-deep:#FFA9C1; --gold:#D7B44A;
  --muted:#B3A3A6; --on-berry:#2A0A18; --ok:#7ED9A6;
  --line:rgba(246,239,239,.16); --line-soft:rgba(246,239,239,.09);
  --band-bg:#2A2124; --band-fg:#F6EFEF; --band-muted:rgba(246,239,239,.72);
}

/* ── Lettertypes, zelf gehost zodat er geen bezoekersgegevens naar Google gaan ── */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-600i.woff2) format("woff2");
  font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-800.woff2) format("woff2");
  font-weight:800;font-style:normal;font-display:swap;}

body{background:var(--paper);color:var(--ink);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:600;letter-spacing:-.015em;
  text-wrap:balance;color:var(--ink);}
h1{font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.02;letter-spacing:-.028em;}
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(--berry);}
a:hover{color:var(--berry-deep);}
:focus-visible{outline:2px solid var(--berry);outline-offset:3px;border-radius:3px;}
img{max-width:100%;height:auto;}
.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(--berry);}
.eyebrow{font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--berry);display:flex;align-items:center;gap:.45rem;}
.stars{color:var(--gold);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-lou{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(--berry);color:var(--on-berry);}
.btn-fill:hover{background:var(--berry-deep);color:var(--on-berry);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-lou{padding:.55rem 1.25rem;font-size:.85rem;}
.btn-lou:active:not([disabled]):not([data-state]){transform:scale(.97);}
.btn-lou[disabled],.btn-lou[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-lou[data-state="loading"]{cursor:progress;pointer-events:none;}
.btn-lou[data-state="loading"] .btn-label{opacity:0;transform:translateY(-4px);}
.btn-lou[data-state="loading"] .spinner{display:flex;}
.btn-lou[data-state="done"]{background:var(--gold);color:#241C1F;border-color:var(--gold);}

/* ── Bovenbalk met USP's ── */
.topbar{background:var(--band-bg);color:var(--band-fg);font-size:.79rem;}
.usp-track{display:flex;justify-content:center;align-items:center;gap:2.5rem;min-height:1.5rem;}
.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;}
  .usp-item{position:absolute;inset:0;justify-content:center;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(--berry);}
.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(--berry);transition:right .24s ease;}
.mainnav a:hover{color:var(--berry);}
.mainnav a:hover::after{right:0;}
.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(--blush);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(--berry);color:var(--on-berry);font-size:.67rem;font-weight:800;
  display:grid;place-items:center;font-family:var(--body);}
.search-mini{position:relative;}
.search-mini input{border:1px solid var(--line);border-radius:var(--pill);
  padding:.5rem 2.4rem .5rem 1rem;font-size:.88rem;background:var(--surface);
  color:var(--ink);width:190px;font-family:var(--body);}
.search-mini button{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--muted);width:30px;height:30px;border-radius:50%;}
.search-mini button:hover{color:var(--berry);}

/* ── 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(--berry);color:var(--on-berry);border:none;font-family:var(--body);
  font-weight:800;font-size:.92rem;box-shadow:0 10px 28px -8px rgba(165,18,74,.55);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background-color .2s,opacity .22s;}
.fab-menu:hover{background:var(--berry-deep);color:var(--on-berry);}
.fab-menu:active{transform:scale(.94);}
.fab-menu[aria-expanded="true"]{opacity:0;pointer-events:none;transform:scale(.8);}
@media (max-width:991.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(36,28,31,.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(36,28,31,.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(--berry);padding-left:.35rem;}
.sidebar-nav .ico{color:var(--berry);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(--berry);}
.sidebar-foot{padding:1rem 1.25rem;border-top:1px solid var(--line-soft);background:var(--blush);}
.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(--blush);
  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. */
.hero-tag{position:absolute;left:14px;bottom:18px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--pill);padding:.6rem 1.2rem;
  box-shadow:var(--shadow);}
.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.1;}
.hero-tag span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);}

/* 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;}

/* ── 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(--berry);color:var(--ink);}
.cat-tile-ico{width:52px;height:52px;border-radius:50%;background:var(--blush);color:var(--berry);
  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(--blush);}
.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);}
.flag{position:absolute;top:0;left:0;z-index:2;background:var(--berry);color:var(--on-berry);
  font-family:var(--body);font-size:.66rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;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(--berry);}
.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:uppercase;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(--berry);}
.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(--berry);
  font-variant-numeric:tabular-nums;}
.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;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s;}
.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(--gold);border-color:var(--gold);color:#241C1F;}

/* ── Banden ── */
.theme-band{background:var(--blush);}
.prose-band{background:var(--surface);}
.trust{background:var(--sand);}
.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(--berry);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(--berry);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(--berry);}
.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(--berry);
  box-shadow:0 0 0 .22rem var(--blush);}
.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(--blush);color:var(--berry);
  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(--berry);}
.prose a{text-decoration:underline;text-underline-offset:2px;}
.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--line-soft);
  --bs-accordion-btn-color:var(--ink);--bs-accordion-active-color:var(--berry);
  --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:uppercase;}
.notice-draft{background:var(--sand);border-left:3px solid var(--gold);padding:.9rem 1.1rem;margin-bottom:1.5rem;}
.notice-draft p{margin:0;font-size:.88rem;color:var(--ink);}
.todo{background:var(--blush);padding:0 .3rem;border-radius:3px;color:var(--berry);font-weight:700;}

/* ── Productpagina ── */
.pdp-media{background:var(--blush);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(--blush);
  border:1px solid var(--line-soft);cursor:pointer;}
.pdp-price{font-family:var(--display);font-weight:600;font-size:2rem;color:var(--berry);
  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(--berry);}

/* ── 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(--blush);}
.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(--blush);}
.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(--berry);}
.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(--blush);margin-bottom:1.15rem;
  animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.summary{background:var(--blush);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(--berry);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:uppercase;}
.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(--berry);border-radius:var(--pill);padding:.35rem .85rem;
  font-size:.82rem;font-weight:700;color:var(--berry);}
.coupon-tag button{background:none;border:0;color:var(--berry);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. */
input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=image]):not([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);}
input:focus,textarea:focus{outline:2px solid var(--berry);outline-offset:1px;border-color:transparent;}
input[readonly]{background:var(--blush);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(--berry);}
.pay-opt input{margin:0;accent-color:var(--berry);}
.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(--berry);background:var(--blush);}
.search-big{display:flex;gap:.5rem;}
.search-big input{flex:1;border-radius:var(--pill);padding:.8rem 1.2rem;}
.contact-form{max-width:640px;}

/* ── Bedankt ── */
.thanks-block{padding:2rem 0 1rem;}
.thanks-ico{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:var(--blush);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(--berry);color:var(--on-berry);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(--blush);}
.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:uppercase;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(--berry);}
.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(--blush);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(--berry);}

/* ── 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-lou{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-lou.is-in{opacity:1;transform:none;}
.toast-lou .ico{margin-top:.15rem;width:1.05rem;height:1.05rem;}
.toast-ok .ico{color:#7ED9A6}.toast-err .ico{color:#FF8FA8}.toast-info .ico{color:#E7C46A}
.toast-lou b{display:block;font-weight:800;margin-bottom:.1rem;}
.toast-lou span{opacity:.88;line-height:1.45;}
.toast-lou button{background:none;border:0;color:inherit;opacity:.6;margin-left:auto;
  padding:0;cursor:pointer;}
.toast-lou 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(36,28,31,.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(36,28,31,.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-lou{width:100%;justify-content:center;}
.consent-actions .btn-label{white-space:nowrap;}

@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(--berry);}
.ft a{color:var(--muted);}
.ft a:hover{color:var(--berry);}
.ft-h{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);
  font-weight:800;color:var(--ink);margin-bottom:.85rem;}
.ft a:hover{color:var(--berry);}
.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-lou:hover{transform:none;}
}
@media (max-width:767.98px){
  p{max-width:none;}
  .hero-tag{left:10px;bottom:12px;padding:.5rem 1rem;}
  .hero-stippen{right:10px;bottom:12px;}
  .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(--blush);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(--berry)!important;}
.sidebar-kop{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:1.6rem 0 .3rem;}
.sidebar-nav-sm a{font-size:1.02rem;padding:.55rem 0;}
.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);}
.eyebrow.justify-content-center{justify-content:center;}
/* ── Rekenhulp ── */
.tool{background:var(--blush);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(--berry);
  padding:.7rem .9rem;}
.tool-out.is-err{color:var(--berry);}
.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:#FFFCFA;color:#241C1F;
  font-family:var(--body);font-size:.95rem;line-height:1.3;}
.nb-form input[type=email]:focus{outline:2px solid var(--berry);outline-offset:2px;}
.nb-form .btn-lou{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:#FFB3C6;}
.ft-h{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);
  font-weight:800;color:var(--ink);margin-bottom:.85rem;}
.ft a:hover{color:var(--berry);}
.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(--berry);}
/* ── Bedrijfsgegevens ── */
.bedrijf{font-style:normal;background:var(--blush);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:uppercase;padding-top:.1rem;}

/* ── Bevestiging na toevoegen aan winkelwagen ── */
.modal-scrim{position:fixed;inset:0;z-index:1070;background:rgba(36,28,31,.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(36,28,31,.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(--blush);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(--blush);}
.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(--berry);
  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(--blush);margin:.5rem 0 .4rem;
  overflow:hidden;}
.cart-modal-verzending .balk i{display:block;height:100%;background:var(--berry);
  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-lou{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;}

@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-lou: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-lou{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(--berry);}
.ck-stappen a{color:var(--berry);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(--blush);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(--berry);font-weight:600;margin:.3rem 0 0;display:none;}
.ck-fout.is-zichtbaar{display:block;}
input.is-fout,textarea.is-fout{border-color:var(--berry)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--berry) 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(--blush);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(--berry);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(--berry);}

.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(--berry);}
.ck-optie.is-gekozen{border-color:var(--berry);background:var(--blush);}
.ck-optie input{margin:0;accent-color:var(--berry);flex:0 0 auto;}
.ck-optie-tekst{flex:1;min-width:0;}
.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(--berry);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(--blush);border-left:3px solid var(--berry);
  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(--berry);}

.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(--blush);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(--blush);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(--berry);}
.bd-kaart{height:300px;margin:1rem 0 0;background:var(--blush);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(--berry);color:var(--on-berry);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(--blush);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:uppercase;
  letter-spacing:.05em;padding-top:.15rem;}
.bd-gegevens dd{margin:0;word-break:break-word;}
.bd-fout{margin-top:1.5rem;background:var(--blush);border-left:3px solid var(--berry);
  padding:1rem 1.2rem;font-size:.9rem;}
.leaflet-container{font-family:var(--body);font-size:.72rem;}
.leaflet-control-attribution{background:rgba(255,252,250,.85)!important;}
@media (max-width:991.98px){ .bd-overzicht{position:static;} }
.bd-vink.is-wachten{background:var(--sand);color:var(--gold);}
.bd-vink.is-mislukt{background:var(--blush);color:var(--berry);}

/* ═══ 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. */
.faq-kop{font-size:clamp(1.35rem,2.1vw,1.7rem);margin:0 0 1rem;}
.faq-lijst{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-vraag{margin:0;font-size:inherit;font-family:inherit;font-weight:inherit;}
.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-knop:hover{color:var(--berry);}
.faq-knop:focus-visible{outline:2px solid var(--berry);outline-offset:3px;}
.faq-knop span{flex:1;min-width:0;}
.faq-pijl{
  flex:0 0 auto;width:16px;height:16px;margin-top:.35rem;color:var(--berry);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.faq-knop.is-dicht .faq-pijl{transform:rotate(-90deg);}
.faq-antwoord{overflow:hidden;}
.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-tekst p{margin:0 0 .8rem;}
.faq-tekst p:last-child{margin-bottom:0;}
.faq-tekst a{color:var(--berry);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:575.98px){
  .faq-knop{font-size:.98rem;padding:1rem 0;}
  .faq-tekst{padding-right:1.5rem;}
}
@media (prefers-reduced-motion:reduce){ .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(--berry-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(--blush);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(--berry);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(--blush);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(--berry);border-width:2px;}
.galerij-duim:focus-visible{outline:2px solid var(--berry);outline-offset:2px;}

/* ═══ 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(--blush);
  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:uppercase;
  color:var(--berry);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(--berry);}
.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(36,28,31,.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(--blush);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(--berry);
  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(36,28,31,.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-lou{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(--blush);color:var(--berry);
  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);}
}