@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-outline-width: 1px;--f-button-outline-color: rgba(0, 0, 0, .7);--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-opacity: 1;--f-button-svg-disabled-opacity: .5;--f-button-svg-transition: opacity .15s ease;--f-button-svg-transform: none}.f-button{width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);transform:var(--f-button-transform);transition:var(--f-button-transition);backdrop-filter:var(--f-button-backdrop-filter);display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;pointer-events:all;cursor:pointer;overflow:hidden}@media(hover:hover){.f-button:hover:not([aria-disabled]){color:var(--f-button-hover-color, var(--f-button-color));background-color:var(--f-button-hover-bg, var(--f-button-bg))}}.f-button:active:not([aria-disabled]){color:var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));background-color:var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))}.f-button:focus{outline:none}.f-button:focus-visible{outline:var(--f-button-outline-width) solid var(--f-button-outline-color);outline-offset:var(--f-button-outline-offset)}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);transform:var(--f-button-svg-transform);fill:var(--f-button-svg-fill);filter:var(--f-button-svg-filter);opacity:var(--f-button-svg-opacity, 1);transition:var(--f-button-svg-transition);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.f-button[aria-disabled]{cursor:default}.f-button[aria-disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}[data-panzoom-action=toggleFS] g:first-child{display:flex}[data-panzoom-action=toggleFS] g:last-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:first-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:last-child{display:flex}[data-autoplay-action=toggle] svg g:first-child{display:flex}[data-autoplay-action=toggle] svg g:last-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:first-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:last-child{display:flex}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child{display:flex}:root{--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px}.f-spinner{position:absolute;top:50%;left:50%;margin:0;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height);translate:-50% -50%;border:var(--f-spinner-border-width) solid var(--f-spinner-color-1);border-top-color:var(--f-spinner-color-2);border-radius:var(--f-spinner-border-radius);animation:f-spinner .75s linear infinite,f-fadeIn .2s ease .2s both}@keyframes f-spinner{to{rotate:360deg}}.f-panzoom,.f-zoomable{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column}.f-panzoom:before,.f-panzoom:after,.f-zoomable:before,.f-zoomable:after{display:block;content:""}.f-panzoom:not(.has-controls):before,.f-zoomable:not(.has-controls):before{margin-bottom:auto}.f-panzoom:after,.f-zoomable:after{margin-top:auto}.f-panzoom.in-fullscreen,.f-zoomable.in-fullscreen{position:fixed;top:0;left:0;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:unset!important;z-index:9999}.f-panzoom__wrapper{position:relative;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__wrapper.will-zoom-out{cursor:zoom-out}.f-panzoom__wrapper.can-drag{cursor:move;cursor:grab}.f-panzoom__wrapper.will-zoom-in{cursor:zoom-in}.f-panzoom__wrapper.is-dragging{cursor:move;cursor:grabbing}.f-panzoom__wrapper.has-error{display:none}.f-panzoom__content{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__content.is-lazyloading,.f-panzoom__content.has-lazyerror{visibility:hidden}img.f-panzoom__content{width:auto;height:auto;vertical-align:top;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.f-panzoom__wrapper>.f-panzoom__content{visibility:hidden}.f-panzoom__viewport{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.f-panzoom__viewport>.f-panzoom__content{width:100%;height:100%;-o-object-fit:fill;object-fit:fill}picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.f-panzoom__protected{position:absolute;inset:0;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}html.with-panzoom-in-fullscreen{overflow:hidden}.f-fadeIn{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeOut{to{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-crossfadeOut{to{opacity:0}}.is-horizontal .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextX}.is-horizontal .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevX}.is-horizontal .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextX}.is-horizontal .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevX}@keyframes f-slideInPrevX{0%{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextX{0%{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextX{to{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevX{to{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}}.is-vertical .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextY}.is-vertical .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevY}.is-vertical .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextY}.is-vertical .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevY}@keyframes f-slideInPrevY{0%{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextY{0%{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextY{to{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevY{to{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}}.f-zoomInUp{animation:var(--f-transition-duration, .3s) ease both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, .3s) ease both f-zoomOutDown}@keyframes f-zoomInUp{0%{transform:scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0),var(--f-zoomInUp-y, 16px),0);opacity:var(--f-zoomInUp-opacity, 0)}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0),var(--f-zoomOutDown-y, 16px),0);opacity:0}}.f-throwOutUp{animation:var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throwOutUp-y, 150px) * -1),0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throwOutDown-y, 150px),0);opacity:0}}.has-iframe .f-html,.has-pdf .f-html,.has-gmap .f-html{width:100%;height:100%;min-height:1px;overflow:visible}.has-pdf .f-html,.has-gmap .f-html{padding:0}.f-html{position:relative;box-sizing:border-box;margin:var(--f-html-margin, 0);padding:var(--f-html-padding, 2rem);color:var(--f-html-color, currentColor);background:var(--f-html-bg)}.is-loading>.f-html{opacity:0}.f-html.is-error{text-align:center}.f-iframe{display:block;margin:0;border:0;height:100%;width:100%}.f-caption{align-self:center;flex-shrink:0;margin:var(--f-caption-margin);padding:var(--f-caption-padding, 16px 8px);max-width:100%;max-height:calc(80vh - 100px);overflow:auto;overflow-wrap:anywhere;line-height:var(--f-caption-line-height);color:var(--f-caption-color);background:var(--f-caption-bg);font:var(--f-caption-font)}.has-html5video .f-html,.has-youtube .f-html,.has-vimeo .f-html{padding:0;width:100%;height:100%;min-height:1px;overflow:visible;max-width:var(--f-video-width, 960px);max-height:var(--f-video-height, 540px);aspect-ratio:var(--f-video-aspect-ratio);background:var(--f-video-bg, rgba(0, 0, 0, .9))}.f-html5video{border:0;display:block;height:100%;width:100%;background:transparent}.f-button.is-arrow{--f-button-width: var(--f-arrow-width, 46px);--f-button-height: var(--f-arrow-height, 46px);--f-button-svg-width: var(--f-arrow-svg-width, 24px);--f-button-svg-height: var(--f-arrow-svg-height, 24px);--f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);--f-button-border-radius: var(--f-arrow-border-radius, unset);--f-button-bg: var(--f-arrow-bg, transparent);--f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));--f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));--f-button-shadow: var(--f-arrow-shadow);--f-button-color: var(--f-arrow-color);--f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));--f-button-active-color: var( --f-arrow-active-color, var(--f-arrow-hover-color) );overflow:visible}.f-button.is-arrow.is-prev,.f-button.is-arrow.is-next{position:absolute;transform:translate(0);z-index:20}.is-horizontal .f-button.is-arrow.is-prev,.is-horizontal .f-button.is-arrow.is-next{inset:50% auto auto;transform:translateY(-50%)}.is-horizontal.is-ltr .f-button.is-arrow.is-prev{left:var(--f-arrow-pos, 0)}.is-horizontal.is-ltr .f-button.is-arrow.is-next{right:var(--f-arrow-pos, 0)}.is-horizontal.is-rtl .f-button.is-arrow.is-prev{right:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-horizontal.is-rtl .f-button.is-arrow.is-next{left:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-vertical.is-ltr .f-button.is-arrow.is-prev,.is-vertical.is-rtl .f-button.is-arrow.is-prev{top:var(--f-arrow-pos, 0);right:auto;bottom:auto;left:50%;transform:translate(-50%)}.is-vertical.is-ltr .f-button.is-arrow.is-next,.is-vertical.is-rtl .f-button.is-arrow.is-next{top:auto;right:auto;bottom:var(--f-arrow-pos, 0);left:50%;transform:translate(-50%)}.is-vertical .f-button.is-arrow.is-prev svg,.is-vertical .f-button.is-arrow.is-next svg{transform:rotate(90deg)}.f-carousel__toolbar{display:grid;grid-template-columns:1fr auto 1fr;margin:var(--f-toolbar-margin, 0);padding:var(--f-toolbar-padding, 8px);line-height:var(--f-toolbar-line-height);background:var(--f-toolbar-bg, none);box-shadow:var(--f-toolbar-shadow, none);backdrop-filter:var(--f-toolbar-backdrop-filter);position:relative;z-index:20;color:var(--f-toolbar-color, currentColor);font-size:var(--f-toolbar-font-size, 17px);font-weight:var(--f-toolbar-font-weight, inherit);font-family:var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);text-shadow:var(--f-toolbar-text-shadow);text-align:center;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;white-space:nowrap;pointer-events:none}.f-carousel__toolbar.is-absolute{position:absolute;top:0;left:0;right:0}.f-carousel__toolbar .f-button:focus-visible{position:relative;z-index:1}.f-carousel__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:var(--f-toolbar-gap, 0)}.f-carousel__toolbar__column.is-left{display:flex;justify-self:flex-start;justify-content:flex-start}.f-carousel__toolbar__column.is-middle{display:flex;justify-content:center}.f-carousel__toolbar__column.is-right{display:flex;justify-self:flex-end;justify-content:flex-end;flex-flow:nowrap}.f-carousel__toolbar__column{pointer-events:none}.f-carousel__toolbar__column>*{pointer-events:all}.f-counter{position:relative;display:flex;flex-direction:row;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:var(--f-counter-margin, 0);padding:var(--f-counter-padding, 4px);line-height:var(--f-counter-line-height);background:var(--f-counter-bg);border-radius:var(--f-counter-border-radius)}.f-counter span{padding:0 var(--f-counter-gap, 4px)}:root{--f-thumbs-gap: 8px;--f-thumbs-margin: 0;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: transparent;--f-thumbs-transition: max-height .3s ease, max-width .3s ease, padding .3s ease;--f-thumbs-z-index: 1;--f-thumbs-viewport-padding-x: 0px;--f-thumbs-viewport-padding-y: 0px;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-clip-width: 46px;--f-thumb-extra-gap: 16px;--f-thumb-opacity: 1;--f-thumb-transition: opacity .3s ease, transform .15s ease;--f-thumb-border: none;--f-thumb-border-radius: 4px;--f-thumb-shadow: none;--f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));--f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-border-transition: all .1s ease;--f-thumb-img-width: 100%;--f-thumb-img-height: 100%;--f-thumb-img-fit: cover;--f-thumb-img-position: 50% 20%}.f-thumbs{--f-carousel-slide-width: var(--f-thumb-width);--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: var(--f-thumbs-gap);position:relative;box-sizing:border-box;flex-shrink:0;margin:var(--f-thumbs-margin);padding:var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);overflow:hidden;background:var(--f-thumbs-bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--f-thumbs-transition);z-index:var(--f-thumbs-z-index)}.f-thumbs.is-horizontal{max-height:calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2)}.f-thumbs.is-horizontal.is-hidden{max-height:0;--f-thumbs-padding-y: 0}.f-thumbs.is-vertical{max-width:calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2)}.f-thumbs.is-vertical.is-hidden{max-width:0;--f-thumbs-padding-x: 0}.f-thumbs.is-scrollable.is-hidden{max-height:0;--f-thumbs-padding-y: 0}.f-thumbs.is-ltr{direction:ltr}.f-thumbs.is-rtl{direction:rtl}.f-thumbs img{display:block;width:var(--f-thumb-img-width);height:var(--f-thumb-img-height);-o-object-fit:var(--f-thumb-img-fit);object-fit:var(--f-thumb-img-fit);-o-object-position:var(--f-thumb-img-position);object-position:var(--f-thumb-img-position);pointer-events:none;border-radius:inherit;color:transparent}.f-thumbs img[data-lazy-src]{visibility:hidden}.f-thumbs img.has-lazyerror{display:none}.f-thumbs__viewport{box-sizing:border-box;height:100%;padding:var(--f-thumbs-viewport-padding-y) var(--f-thumbs-viewport-padding-x);overflow:visible;display:grid}.f-thumbs__slide{position:relative;box-sizing:border-box;grid-area:1/1;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);margin:0;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;overflow:visible}.f-thumbs__slide:hover button{opacity:var(--f-thumb-hover-opacity, 1);transform:var(--f-thumb-hover-transform, none)}.f-thumbs__slide:hover button:after{border:var(--f-thumb-hover-border, none);box-shadow:var(--f-thumb-hover-shadow, var(--f-thumb-shadow))}.f-thumbs__slide button{all:unset;display:block;margin:auto;padding:0;position:relative;overflow:visible;width:100%;height:100%;outline:none;transition:var(--f-thumb-transition);border-radius:var(--f-thumb-border-radius);opacity:var(--f-thumb-opacity);transform:var(--f-thumb-transform);background:var(--f-thumb-bg)}.f-thumbs__slide button:after{content:"";position:absolute;inset:0;z-index:1;transition:var(--f-thumb-border-transition);border-radius:inherit;border:var(--f-thumb-border);box-shadow:var(--f-thumb-shadow)}.f-thumbs__slide button:focus-within{opacity:var(--f-thumb-focus-opacity, 1);transform:var(--f-thumb-focus-transform, none)}.f-thumbs__slide button:focus-within:after{border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, var(--f-thumb-shadow))}.f-thumbs__slide:active{opacity:var(--f-thumb-active-opacity, 1);transform:var(--f-thumb-active-transform, none)}.f-thumbs__slide:active:after{border:var(--f-thumb-active-border, none);box-shadow:var(--f-thumb-active-shadow, var(--f-thumb-shadow))}.f-thumbs__slide.is-selected{z-index:2}.f-thumbs__slide.is-selected button{opacity:var(--f-thumb-selected-opacity, 1);transform:var(--f-thumb-selected-transform, none)}.f-thumbs__slide.is-selected button:after{border:var(--f-thumb-selected-border, none);box-shadow:var(--f-thumb-selected-shadow, var(--f-thumb-shadow))}.f-thumbs.is-modern{--f-carousel-slide-width: calc( var(--f-thumb-clip-width) + var(--f-thumbs-gap) );--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: 0;--width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))}.f-thumbs.is-modern .f-thumbs__viewport{width:calc(100% + var(--f-carousel-slide-width) * 2 + var(--f-thumbs-padding-x));margin-inline:calc((var(--f-carousel-slide-width) + var(--f-thumbs-padding-x)) * -1)}.f-thumbs.is-modern .f-thumbs__slide{--clip-shift: calc((var(--width-diff) * .5) * var(--progress));--clip-path: inset( 0 var(--clip-shift) round var(--f-thumb-border-radius, 0) );padding:0;overflow:visible;left:var(--shift, 0);will-change:left;transition:left var(--f-transition-duration) var(--f-transition-easing)}.f-thumbs.is-modern .f-thumbs__slide button{display:block;margin-inline:50%;width:var(--f-thumb-width);clip-path:var(--clip-path);border:none;box-shadow:none;transition:clip-path var(--f-transition-duration) var(--f-transition-easing),opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)}.f-thumbs.is-modern .f-thumbs__slide button:after{display:none}.f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible){outline:none}.f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before{content:"";position:absolute;z-index:1;top:0;left:var(--clip-shift);bottom:0;right:var(--clip-shift);transition:border var(--f-transition-duration) var(--f-transition-easing),box-shadow var(--f-transition-duration) var(--f-transition-easing);border-radius:inherit;border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, none)}.f-thumbs.is-modern{--f-transition-duration: .25s;--f-transition-easing: ease-out}.f-thumbs.is-modern.is-syncing{--f-transition-duration: 0s}.f-thumbs.is-scrollable .f-thumbs__viewport{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--f-thumb-width),1fr));grid-auto-rows:var(--f-thumb-height);gap:var(--f-thumbs-gap);overflow:auto;overscroll-behavior:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none}.f-thumbs.is-scrollable .f-thumbs__viewport .f-thumbs__slide{grid-area:auto;display:block;position:relative;max-width:100%;width:var(--f-thumb-width);height:var(--f-thumb-height);cursor:pointer;outline:none}:root{--f-progressbar-height: 3px;--f-progressbar-color: var(--f-carousel-theme-color, #575ad6);--f-progressbar-opacity: 1;--f-progressbar-z-index: 30}.f-progressbar{position:absolute;top:0;left:0;right:0;z-index:var(--f-progressbar-z-index);height:var(--f-progressbar-height);transform:scaleX(0);transform-origin:0;opacity:var(--f-progressbar-opacity);background:var(--f-progressbar-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;animation-name:f-progressbar;animation-play-state:running;animation-timing-function:linear}.f-progressbar:empty{display:block}button>.f-progressbar{--f-progressbar-height: 100%;--f-progressbar-opacity: .2}@keyframes f-progressbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}[data-fullscreen-action=toggle] svg g:first-child{display:flex}[data-fullscreen-action=toggle] svg g:last-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:last-child{display:flex}.in-fullscreen-mode>.f-carousel{flex:1;min-width:0!important;min-height:0!important}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}.fancybox__dialog{position:fixed;inset:0;z-index:1050;width:100%;height:100vh;max-height:unset;max-width:unset;padding:0;margin:0;border:0;overflow:hidden;background:transparent;touch-action:none;overscroll-behavior:contain}.fancybox__dialog:focus{outline:none}.fancybox__dialog::backdrop{opacity:0}@supports (height: 100dvh){.fancybox__dialog{height:100dvh}}.fancybox__dialog *:empty{display:block}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-backdrop-bg: rgba(24, 24, 27, .95);--f-toolbar-margin: 0;--f-toolbar-padding: 8px;--f-toolbar-gap: 0;--f-toolbar-color: #ddd;--f-toolbar-font-size: 16px;--f-toolbar-font-weight: 500;--f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;--f-toolbar-line-height: var(--f-button-height);--f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);--f-toolbar-shadow: none;--f-toolbar-bg: none;--f-counter-margin: 0;--f-counter-padding: 0px 10px;--f-counter-gap: 4px;--f-counter-line-height: var(--f-button-height);--f-carousel-gap: 17px;--f-carousel-slide-width: 100%;--f-carousel-slide-height: 100%;--f-carousel-slide-padding: 0;--f-carousel-slide-bg: unset;--f-html-color: #222;--f-html-bg: #fff;--f-error-color: #fff;--f-error-bg: #333;--f-caption-margin: 0;--f-caption-padding: 16px 8px;--f-caption-color: var(--fancybox-color, #dbdbdb);--f-caption-bg: transparent;--f-caption-font: inherit;--f-caption-line-height: 1.375;--f-spinner-color-1: rgba(255, 255, 255, .2);--f-spinner-color-2: rgba(255, 255, 255, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px;--f-progressbar-color: rgba(255, 255, 255);--f-button-width: 46px;--f-button-height: 46px;--f-button-color: #ddd;--f-button-hover-color: #fff;--f-button-outline-width: 1px;--f-button-outline-color: rgba(255, 255, 255, .75);--f-button-outline-offset: 0px;--f-button-bg: rgba(54, 54, 54, .75);--f-button-border: 0;--f-button-border-radius: 0;--f-button-shadow: none;--f-button-transition: all .2s ease;--f-button-transform: none;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.75;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .5;--f-arrow-pos: 32px;--f-arrow-width: 50px;--f-arrow-height: 50px;--f-arrow-svg-width: 24px;--f-arrow-svg-height: 24px;--f-arrow-svg-stroke-width: 2.5;--f-arrow-border-radius: 50%;--f-arrow-bg: rgba(54, 54, 54, .65);--f-arrow-color: #ddd;--f-arrow-hover-color: #fff;--f-close-button-width: 30px;--f-close-button-height: 30px;--f-close-button-svg-width: 24px;--f-close-button-svg-height: 24px;--f-close-button-svg-stroke-width: 1.75;--f-close-border-radius: 4px;--f-close-button-color: #fff;--f-close-button-hover-color: #fff;--f-close-button-bg: transparent;--f-close-button-hover-bg: transparent;--f-close-button-active-bg: transparent;--f-thumbs-margin: 0px;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: none;--f-thumb-transition: all .2s ease;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-opacity: 1;--f-thumb-border: none;--f-thumb-shadow: none;--f-thumb-transform: none;--f-thumb-focus-opacity: 1;--f-thumb-focus-border: none;--f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);--f-thumb-focus-transform: none;--f-thumb-hover-opacity: 1;--f-thumb-hover-border: none;--f-thumb-hover-transform: none;--f-thumb-active-opacity: var(--f-thumb-hover-opacity);--f-thumb-active-border: var(--f-thumb-hover-border);--f-thumb-active-transform: var(--f-thumb-hover-transform);--f-thumb-selected-opacity: 1;--f-thumb-selected-border: none;--f-thumb-selected-shadow: inset 0 0 0 2px #fff;--f-thumb-selected-transform: none;--f-scrollbar-width: 7px;--f-scrollbar-track-bg: #444;--f-scrollbar-track-border-radius: 10px;--f-scrollbar-track-shadow: inset 0 0 6px rgba(0, 0, 0, .2);--f-scrollbar-thumb-bg: #ddd;--f-scrollbar-thumb-border-radius: 10px}.fancybox__container[theme=light]{--fancybox-color: #222;--fancybox-backdrop-bg: rgba(255, 255, 255, .97);--f-toolbar-color: var(--fancybox-color, #222);--f-toolbar-text-shadow: none;--f-toolbar-font-weight: 400;--f-html-color: var(--fancybox-color, #222);--f-html-bg: #fff;--f-error-color: #555;--f-error-bg: #fff;--f-video-bg: #fff;--f-caption-color: #333;--f-spinner-color-1: rgba(0, 0, 0, .2);--f-spinner-color-2: rgba(0, 0, 0, .8);--f-spinner-border-width: 3.5px;--f-progressbar-color: rgba(111, 111, 116);--f-button-color: #333;--f-button-hover-color: #000;--f-button-outline-color: rgba(0, 0, 0, .85);--f-button-bg: rgba(255, 255, 255, .85);--f-button-svg-stroke-width: 1.3;--f-button-svg-filter: none;--f-arrow-bg: rgba(255, 255, 255, .85);--f-arrow-color: #333;--f-arrow-hover-color: #000;--f-arrow-svg-stroke-width: 1.3;--f-close-button-color: #555;--f-close-button-hover-color: #000;--f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);--f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;--f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000;--f-scrollbar-track-bg: #ddd;--f-scrollbar-thumb-bg: #444}.fancybox__container{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column}.fancybox__container:focus{outline:none}.fancybox__container.has-vertical-thumbs{flex-direction:row-reverse}.fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport{overflow-x:clip;overflow-y:visible}.fancybox__container>*:not(.fancybox__carousel),.fancybox__container .fancybox__carousel>*:not(.fancybox__grid,.fancybox__viewport),.fancybox__container .fancybox__column>*:not(.fancybox__viewport),.fancybox__container .fancybox__slide:not(.is-selected),.fancybox__container .fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){opacity:var(--f-drag-opacity, 1)}.fancybox__container:not(.is-ready,.is-hiding){visibility:hidden}.fancybox__container.is-revealing>*:not(.fancybox__carousel),.fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__grid,.fancybox__viewport),.fancybox__container.is-revealing .fancybox__column>*:not(.fancybox__viewport),.fancybox__container.is-revealing .fancybox__slide:not(.is-selected),.fancybox__container.is-revealing .fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-enter-duration, .35s) ease none f-fadeIn}.fancybox__container.is-hiding>*:not(.fancybox__carousel),.fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__grid,.fancybox__viewport),.fancybox__container.is-hiding .fancybox__column>*:not(.fancybox__viewport),.fancybox__container.is-hiding .fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut}.fancybox__container.is-hiding .fancybox__carousel .fancybox__slide:not(.is-selected){opacity:0}.fancybox__container.is-hiding{pointer-events:none}.fancybox__container.is-idle .f-carousel__toolbar{pointer-events:none;opacity:0}.fancybox__container.is-idle .f-button.is-arrow{opacity:0}.fancybox__container.is-idle.is-ready .f-carousel__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__container.is-idle.is-ready .f-button.is-arrow{animation:.15s ease-out both f-fadeOut}.fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-backdrop-bg);filter:var(--fancybox-backdrop-filter)}.fancybox__carousel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__carousel.is-vertical{--f-carousel-slide-height: 100%}.fancybox__carousel.is-ltr{direction:ltr}.fancybox__carousel.is-rtl{direction:rtl}.fancybox__carousel>.f-button.is-arrow:before{position:absolute;content:"";inset:-30px;z-index:1}.fancybox__viewport{display:grid;flex:1;min-height:0;min-width:0;position:relative;overflow:visible;transform:translate3d(0,var(--f-drag-offset, 0),0)}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__viewport [data-selectable],.fancybox__viewport [contenteditable]{cursor:auto}.fancybox__slide{box-sizing:border-box;position:relative;grid-area:1/1;display:flex;align-items:center;flex-direction:column;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);min-width:0;min-height:0;max-width:100%;margin:0;padding:var(--f-carousel-slide-padding);background:var(--f-carousel-slide-bg);backface-visibility:hidden;transform:translateZ(0);will-change:transform}.fancybox__slide:before,.fancybox__slide:after{display:block;content:""}.fancybox__slide:before{margin-bottom:auto}.fancybox__slide:after{margin-top:auto}.fancybox__slide.is-selected{z-index:1}.fancybox__slide.f-zoomable{overflow:visible}.fancybox__slide.has-error{--f-html-color: var(--f-error-color, --f-html-color);--f-html-bg: var(--f-error-bg, --f-html-bg)}.fancybox__slide.has-html{overflow:auto;padding:8px}.fancybox__slide.has-iframe{overflow:hidden;padding:8px 0}.fancybox__slide.has-close-btn{padding-top:34px}.fancybox__slide.has-controls:before{margin:0}.fancybox__slide .f-spinner{cursor:pointer}.fancybox__container.is-closing .f-caption,.fancybox__slide.is-loading .f-caption{visibility:hidden}.fancybox__container.is-closing .fancybox__carousel,.fancybox__container.is-closing .fancybox__viewport,.fancybox__container.is-closing .fancybox__slide.is-selected{overflow:visible}.f-button.is-close-button{--f-button-width: var(--f-close-button-width);--f-button-height: var(--f-close-button-height);--f-button-border-radius: var(--f-close-border-radius);--f-button-color: var(--f-close-button-color);--f-button-hover-color: var(--f-close-button-hover-color);--f-button-bg: var(--f-close-button-bg);--f-button-hover-bg: var(--f-close-button-hover-bg);--f-button-active-bg: var(--f-close-button-active-bg);--f-button-svg-width: var(--f-close-button-svg-width);--f-button-svg-height: var(--f-close-button-svg-height);--f-button-svg-stroke-width: var(--f-close-button-svg-stroke-width);position:absolute;top:calc((var(--f-button-height) + 2px) * -1);right:0;z-index:10}.is-loading .f-button.is-close-button{visibility:hidden}.fancybox__thumbs{flex:0 1 100%}.fancybox__thumbs.is-scrollable{--f-thumbs-cols: 1;--f-thumbs-gap: 8px;--f-thumbs-transition: none;--f-thumbs-padding-x: 4px;--f-thumbs-padding-y: 8px;--f-thumbs-viewport-padding-x: 4px;--f-thumbs-viewport-padding-y: 0px;max-width:calc(var(--f-thumb-width) * var(--f-thumbs-cols) + var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-viewport-padding-x) * 2)}.fancybox__thumbs.is-scrollable ::-webkit-scrollbar{width:var(--f-scrollbar-width)}.fancybox__thumbs.is-scrollable ::-webkit-scrollbar-track{background:var(--f-scrollbar-track-bg);border-radius:var(--f-scrollbar-track-border-radius);box-shadow:var(--f-scrollbar-track-shadow)}.fancybox__thumbs.is-scrollable ::-webkit-scrollbar-thumb{background:var(--f-scrollbar-thumb-bg);border-radius:var(--f-scrollbar-thumb-border-radius)}.fancybox__thumbs.is-scrollable.is-hidden{max-width:0;--f-thumbs-padding-x: 0;max-height:unset;--f-thumbs-padding-y: unset}.fancybox__thumbs.is-scrollable .f-thumbs__viewport{overflow-x:hidden!important;grid-template-columns:repeat(auto-fill,calc((100% - var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1)) / var(--f-thumbs-cols)))!important}

:root {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-size-h1: 38px;
    --font-size-h2: 20px;
    --font-size-h3: 16px;
    --font-size-text1: 16px;
    --font-size-text2: 14px;
    --font-size-text3: 12px;
    --font-lineheight-h1: 120%;
    --font-lineheight-h2: 120%;
    --font-lineheight-h3: 120%;
    --font-lineheight-text1: 140%;
    --font-lineheight-text2: 120%;
    --font-lineheight-text3: 120%;
    --color-text: #151515;
    --color-text-secondary: #626262;
    --color-highlight: #de5a13;
    --color-highlight-2: #ff8800;
    --color-highlight-blue: #0077ff;
    --color-base: #fff;
    --color-bg: #f4f4f4;
    --color-selection: #d9d9d9;
    --color-border-weak: var(--color-selection);
    --color-border-strong: #141414;
    --color-error: #ee3616;
    --color-error-box: #ffdbc8;
    --color-warning: #ee3616;
    --color-warning-box: #ffdbc8;
    --color-confirm: #349357;
    --color-confirm-box: #c2f6c3;
    --color-black: #000;
    --color-surface-muted: #f3f3f3;
    --goodie-blue-start: #0077FF;
    --goodie-blue-end: #4DDAC2;
    --goodie-green-start: #37B900;
    --goodie-green-end: #2FFF00;
    --goodie-purple-start: #9518E9;
    --goodie-purple-end: #FF45D7;
    --goodie-orange-start: #DA4D4D;
    --goodie-orange-end: #FFAE00;
    --space-1: 4px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 36px;
    --space-8: 48px;
    --space-9: 76px;
    --logo-scroll-gap: 50px;
    --logo-width-max: 150px;
    --radius-1: 8px;
    --radius-2: 16px;
    --radius-round: 9999px;
    --card-radius: var(--radius-2);
    --card-shadow: var(--shadow-1);
    --card-padding: var(--space-5);
    --shadow-1: 0 4px 8px rgba(0, 0, 0, .02), 0 6px 12px rgba(0, 0, 0, .03);
    --shadow-elevated: 0 0 10px 0 rgba(0, 0, 0, .25);
    --shadow-button: var(--shadow-1);
    --module-size: 342px;
    --button-width: var(--module-size);
    --button-height: 56px;
    --button-padding: var(--space-4);
    --button-gap: var(--space-2-5);
    --button-radius: var(--radius-2);
    --icon-size: 24px;
    --icon-size-sm: 16px;
    --icon-size-lg: 42px;
    --icon-size-xl: 50px;
    --icon-size-xxl: 100px;
    --qty-input-min-width: 25px;
    --qty-input-max-width: 50px;
    --btn-anim-fade: 250ms;
    --section-gap: var(--space-6);
    --section-gap-lg: var(--space-8);
    --container-max: 1440px;
    --overlay-bg: rgba(0, 0, 0, .5);
    --focus-ring-color: var(--color-highlight);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px
}

@media (min-width: 1024px) {
    :root {
        --font-size-h1: 48px;
        --font-size-h2: 24px
    }
}

*, *::before, *::after {
    box-sizing: border-box
}

* {
    margin: 0
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

a, button {
    touch-action: manipulation
}

@media (hover: none) {
    * {
        pointer-events: auto !important
    }

    *:hover {
        pointer-events: auto
    }
}

@media (hover: none)and (pointer: coarse) {
    a:hover, button:hover, [role=button]:hover {
        text-decoration: inherit;
        opacity: inherit;
        transform: none
    }
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%
}

input, button, textarea, select {
    font: inherit
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word
}

p {
    text-wrap: pretty
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance
}

:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #ff8800);
    outline-offset: var(--focus-ring-offset, 2px)
}

#root, #__next {
    isolation: isolate
}

fieldset {
    border: 0;
    min-inline-size: 0
}

body {
    font-family: var(--font-sans), serif;
    color: var(--color-text);
    background: var(--color-bg);
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1)
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1)
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1)
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1)
}

h1 strong, h2 strong, h3 strong {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit
}

.text-bold {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.text-1 {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1)
}

.text-1-bold {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1)
}

.text-2 {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1)
}

.text-3, .note, small {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text-secondary)
}

.section-title {
    text-align: center;
    color: var(--color-text)
}

.heading-2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(font-lineheight-text1);
    color: var(--color-text)
}

:root {
    --gap: var(--space-4);
    --page-padding-x: var(--space-4)
}

@media (min-width: 1024px) {
    :root {
        --gap: var(--space-5);
        --page-padding-x: var(--space-5)
    }
}

:root {
    --header-height: 128px
}

@media (min-width: 1024px) {
    :root {
        --header-height: 88px
    }
}

:root:has(.header-nav .promo) {
    --header-height: 184px
}

@media (min-width: 1024px) {
    :root:has(.header-nav .promo) {
        --header-height: 144px
    }
}

:root:has(header._logos-row) {
    --header-height: 60px
}

.layout-content {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch
}

@media (min-width: 1024px) {
    .layout-content {
        padding-inline: 0;
        padding-bottom: var(--space-8)
    }
}

.layout-content > main {
    width: 100%;
    align-self: stretch
}

.layout-content > header[role=banner] {
    position: fixed;
    top: max(0px, env(safe-area-inset-top));
    left: var(--space-4);
    right: var(--space-4);
    max-width: var(--container-max);
    margin-inline: auto;
    z-index: 1000
}

@media (min-width: 1024px) {
    .layout-content > header[role=banner] {
        left: 0;
        right: 0
    }
}

.sidebar-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    width: 100%
}

.sidebar-layout > .sidebar {
    width: 100%
}

.sidebar-layout > .primary {
    flex: 1 1 auto;
    width: 100%
}

@media (min-width: 1024px) {
    .sidebar-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-5)
    }

    .sidebar-layout > .sidebar {
        width: var(--module-size);
        min-width: var(--module-size);
        flex: 0 0 var(--module-size)
    }
}

._container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-padding-x)
}

._stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}

._row {
    display: flex;
    align-items: center;
    gap: var(--gap)
}

._grid {
    display: grid;
    gap: var(--gap)
}

._gap-component {
    gap: var(--space-2)
}

.hover-underline {
    text-decoration: none !important
}

@media (hover: hover)and (pointer: fine) {
    .hover-underline:hover {
        text-decoration: underline !important
    }
}

@media (hover: none) {
    .hover-underline:hover {
        text-decoration: none !important
    }
}

.d-none {
    display: none !important
}

._visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

._space-1 {
    block-size: var(--space-1);
    inline-size: 100%
}

._space-2 {
    block-size: var(--space-2);
    inline-size: 100%
}

._space-3 {
    block-size: var(--space-3);
    inline-size: 100%
}

._space-4 {
    block-size: var(--space-4);
    inline-size: 100%
}

._space-5 {
    block-size: var(--space-5);
    inline-size: 100%
}

._space-6 {
    block-size: var(--space-6);
    inline-size: 100%
}

._space-7 {
    block-size: var(--space-7);
    inline-size: 100%
}

._space-8 {
    block-size: var(--space-8);
    inline-size: 100%
}

._space-9 {
    block-size: var(--space-9);
    inline-size: 100%
}

@media (min-width: 1024px) {
    ._space-desktop-1 {
        block-size: var(--space-1)
    }

    ._space-desktop-2 {
        block-size: var(--space-2)
    }

    ._space-desktop-3 {
        block-size: var(--space-3)
    }

    ._space-desktop-4 {
        block-size: var(--space-4)
    }

    ._space-desktop-5 {
        block-size: var(--space-5)
    }

    ._space-desktop-6 {
        block-size: var(--space-6)
    }

    ._space-desktop-7 {
        block-size: var(--space-7)
    }

    ._space-desktop-8 {
        block-size: var(--space-8)
    }

    ._space-desktop-9 {
        block-size: var(--space-9)
    }
}

.u-h-56 {
    min-height: 56px;
    display: block
}

._logos-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-5) 0
}

._logos-row a {
    display: inline-flex;
    align-items: center;
    text-decoration: none
}

._logos-row .logo {
    height: 24px;
    width: auto;
    max-width: var(--logo-width-max)
}

.u-list-reset {
    list-style: none;
    padding: 0;
    margin: 0
}

.u-list-checks {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .u-list-checks {
        gap: var(--space-5)
    }
}

.u-list-checks > .item, .u-list-checks > li, .u-list-checks > .benefit-item {
    display: flex;
    align-items: center;
    gap: var(--space-3)
}

.u-list-checks > .item > .icon, .u-list-checks > li > .icon, .u-list-checks > .benefit-item > svg, .u-list-checks > .benefit-item > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.u-list-checks > .item > .label, .u-list-checks > li > .label, .u-list-checks > .benefit-item > span {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text)
}

.header-spacer {
    block-size: calc(var(--header-height) + 32px)
}

@media (min-width: 1024px) {
    .header-spacer {
        block-size: calc(var(--header-height) + 48px)
    }
}

.goodies-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center
}

.goodies-list.-no-mb {
    margin-bottom: 0 !important
}

@media (min-width: 1024px) {
    .goodies-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--space-5)
    }

    .goodies-list > .goodie-card {
        width: var(--module-size);
        max-width: var(--module-size);
        flex: 0 0 var(--module-size)
    }
}

.energy .efc0 {
    fill: #2fac45
}

.energy .efc1 {
    fill: #4dbc37
}

.energy .efc2 {
    fill: #afda19
}

.energy .efc3 {
    fill: #f5ef13
}

.energy .efc4 {
    fill: #f9af0d
}

.energy .efc5 {
    fill: #f25c1a
}

.energy .efc6 {
    fill: #ec1c26
}

@media (max-width: 1023px) {
    .energy {
        width: 45px;
        height: 25px
    }
}

._surface, .u-surface {
    display: block;
    width: 100%;
    max-width: 100%;
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    padding: var(--space-5)
}

._card {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, var(--space-5))
}

._card:focus-within {
    box-shadow: var(--card-shadow)
}

.form-field {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

.form-field > .input, .form-field > .select, .form-field > .textarea {
    width: 100%;
    padding: var(--button-padding);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    background: rgba(0, 0, 0, 0);
    color: var(--color-text);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium)
}

.form-field > .input, .form-field > .select {
    height: var(--button-height)
}

.form-field > .textarea {
    min-height: calc(var(--button-height) * 2);
    resize: vertical
}

.form-field > .input::-moz-placeholder, .form-field > .textarea::-moz-placeholder {
    color: var(--color-text-secondary)
}

.form-field > .input::placeholder, .form-field > .textarea::placeholder {
    color: var(--color-text-secondary)
}

.form-field.-with-hint > .hint {
    font-size: var(--font-size-text3);
    color: var(--color-text-secondary);
    padding: 0 var(--button-padding);
    text-align: left
}

.form-field > .input:focus-visible, .form-field > .select:focus-visible, .form-field > .textarea:focus-visible {
    outline: none;
    border-width: 2px
}

.form-field.error > .input, .form-field.error > .select, .form-field.error > .textarea {
    border-color: var(--color-error)
}

.form-field > .error {
    color: var(--color-error);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    padding: 0 var(--button-padding);
    background: none;
    border-radius: 0
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: 0;
    margin: 0;
    border: 0
}

.radio-group > .legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.radio-group > .option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    width: 100%
}

.radio-group > .option > .input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.radio-group > .option > .indicator {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 2px solid var(--color-selection);
    margin-top: 2px
}

.radio-group > .option > .input:checked + .indicator::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-text);
    border-radius: 7px
}

.radio-group > .option > .label {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.radio-group > .option > .meta {
    color: var(--color-text);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium)
}

.radio-group > .option > .logo {
    height: 20px;
    width: auto;
    flex-shrink: 0
}

.radio-group > .option > .input:focus-visible + .indicator {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2)
}

input[type=radio] {
    width: 24px;
    height: 24px;
    accent-color: var(--color-text)
}

input[type=checkbox] {
    width: 24px;
    height: 24px;
    accent-color: var(--color-text)
}

.checkbox-option {
    display: grid;
    grid-template-columns:min-content auto;
    align-items: flex-start;
    -moz-column-gap: var(--space-2);
    column-gap: var(--space-2);
    cursor: pointer
}

.checkbox-option > .sublabel {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    line-height: var(--font-lineheight-text3);
    grid-column: 2
}

.checkbox-option > .checkbox-input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px
}

.checkbox-option > .checkmark {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid var(--color-selection);
    border-radius: 5px;
    background: var(--color-base)
}

.checkbox-option > .checkbox-input:focus-visible + .checkmark {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.checkbox-option > .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 10px;
    height: 6px;
    border: solid var(--color-base);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    display: none
}

.checkbox-option > .checkbox-input:checked + .checkmark {
    background-color: var(--color-text);
    border-color: var(--color-text)
}

.checkbox-option > .checkbox-input:checked + .checkmark::after {
    display: block
}

.checkbox-option > .label {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text)
}

.std_form .form_row {
    position: relative
}

.btn.-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.btn.-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .btn.-primary:active {
        transform: translateY(1px)
    }
}

.btn.-primary {
    background-color: var(--color-highlight);
    color: var(--color-base)
}

.btn.-outline {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.btn.-outline:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .btn.-outline:active {
        transform: translateY(1px)
    }
}

.btn.-outline {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text)
}

.back-link {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.back-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .back-link:active {
        transform: translateY(1px)
    }
}

.back-link {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.back-link > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.button-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .button-bar {
        flex-direction: row
    }
}

.button-bar > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center
}

.page-header > .title, .page-header > h1, .page-header > h2, .page-header > h3 {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center
}

.tiles-1-2-4 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns:repeat(1, minmax(0, 1fr))
}

@media (min-width: 768px) {
    .tiles-1-2-4 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .tiles-1-2-4 {
        gap: var(--space-5);
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

.tiles-2-3 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

@media (min-width: 1024px) {
    .tiles-2-3 {
        gap: var(--space-5);
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.table_normal, .tg, .finanz_table {
    width: 100%;
    border: 1px solid var(--color-border-weak);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed
}

.table_normal th, .table_normal td, .tg th, .tg td, .finanz_table th, .finanz_table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border-weak);
    word-break: break-word;
    hyphens: auto;
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2)
}

.table_normal th, .tg th, .finanz_table th {
    background: var(--color-surface-muted);
    font-weight: var(--font-weight-bold);
    text-align: left;
    border-right: 1px solid #d9d9d9
}

.table_normal th:last-child, .tg th:last-child, .finanz_table th:last-child {
    border-right: none
}

.table_normal td, .tg td, .finanz_table td {
    padding-block: var(--space-3)
}

.table_normal td:not(:last-child), .tg td:not(:last-child), .finanz_table td:not(:last-child) {
    border-right: 1px solid var(--color-border-weak)
}

.table_normal tr:last-child td, .tg tr:last-child td, .finanz_table tr:last-child td {
    border-bottom: none
}

@media (max-width: calc(1024px - 1px)) {
    .table_normal th, .tg th, .finanz_table th {
        padding: var(--space-1);
        font-size: var(--font-size-text3)
    }

    .table_normal td, .tg td, .finanz_table td {
        padding: var(--space-2);
        font-size: var(--font-size-text3)
    }
}

.table_normal.-technical td:first-child {
    border-right: 1px solid var(--color-border-weak)
}

.table_normal.-technical td:last-child {
    width: 30%
}

.table_normal.-technical small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-text3);
    color: var(--color-text-secondary)
}

.table_normal.-technical th[colspan="2"] {
    padding: var(--space-4) var(--space-2);
    font-size: var(--font-size-h3);
    border-top: 1px solid var(--color-border-weak);
    border-bottom: none
}

@media (max-width: calc(1024px - 1px)) {
    .table_normal.-technical th[colspan="2"] {
        padding: var(--space-3) var(--space-2);
        font-size: var(--font-size-text2)
    }
}

.table_normal.-technical tr:has(+tr:has(th[colspan="2"])) td {
    border-bottom: none
}

.table_normal.-technical tr:has(th[colspan="2"]):first-child th {
    border-top: none
}

.table_normal.-devices th:nth-child(1), .table_normal.-devices td:nth-child(1) {
    width: 20%
}

.table_normal.-devices th:nth-child(2), .table_normal.-devices td:nth-child(2) {
    width: 35%
}

.table_normal.-devices th:nth-child(3), .table_normal.-devices td:nth-child(3) {
    width: 25%
}

.table_normal.-devices th:nth-child(4), .table_normal.-devices td:nth-child(4) {
    width: 20%
}

.table_normal.-devices td:nth-child(4) {
    text-align: center;
    color: var(--color-error)
}

.table_normal.-devices .compatible td:nth-child(4) {
    color: var(--color-confirm)
}

.table_normal.-devices td:nth-child(1), .table_normal.-devices td:nth-child(2), .table_normal.-devices td:nth-child(3) {
    border-right: 1px solid var(--color-border-weak)
}

.table_normal.-devices thead .label-mobile {
    display: none
}

.table_normal.-devices thead .label-desktop {
    display: inline
}

.table_normal.-devices thead th {
    position: sticky;
    top: 0;
    z-index: 1
}

@media (max-width: calc(1024px - 1px)) {
    .table_normal.-devices thead .label-mobile {
        display: inline
    }

    .table_normal.-devices thead .label-desktop {
        display: none
    }
}

.finanz_table {
    min-width: 520px
}

@media (max-width: calc(1024px - 1px)) {
    .finanz_table {
        min-width: 0
    }
}

.table_normal.-shipping td.right {
    text-align: right
}

.table_normal.-shipping tr.blue_sub td {
    background: var(--color-surface-muted);
    font-weight: var(--font-weight-medium)
}

.tg th:not(:last-child) {
    border-right: 1px solid #d9d9d9
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--space-3)
}

.accordion-item {
    display: flex;
    flex-direction: column
}

.accordion-item > .accordion-trigger {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    border: none;
    cursor: pointer;
    width: 100%
}

@media (hover: hover)and (pointer: fine) {
    .accordion-item > .accordion-trigger:hover > .trigger-content > .trigger-left > .label {
        text-decoration: underline
    }
}

.accordion-item > .accordion-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.accordion-item > .accordion-trigger > .trigger-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--icon-size)
}

.accordion-item > .accordion-trigger > .trigger-content > .trigger-left {
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.accordion-item > .accordion-trigger > .trigger-content > .trigger-left > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.accordion-item > .accordion-trigger > .trigger-content > .trigger-left > .label {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-h3);
    text-wrap: balance;
    text-align: left
}

.accordion-item > .accordion-trigger > .trigger-content > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.accordion-item > .accordion-trigger[aria-expanded=true] > .trigger-content > .chevron {
    transform: rotate(90deg)
}

.accordion-item > .accordion-content {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    opacity: 0
}

.accordion-item > .accordion-content.-active {
    max-height: 100%;
    margin-top: var(--space-4);
    opacity: 1;
    margin-bottom: 0
}

.accordion-item > .accordion-content > .content-inner {
    font-size: var(--font-size-text1);
    color: var(--color-text)
}

@media (max-width: calc(1024px - 1px)) {
    .accordion-item > .accordion-trigger {
        padding: var(--space-4)
    }

    .accordion-item > .accordion-trigger > .trigger-content > .trigger-left > .label {
        font-size: var(--font-size-text2)
    }

    .accordion-item > .accordion-content {
        display: none
    }

    .accordion-item > .accordion-content.-active {
        display: block
    }
}

.accordion-item.-card-content > .accordion-content > .content-inner {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4)
}

@media (min-width: 1024px) {
    .accordion-item.-card-content > .accordion-content > .content-inner {
        padding: var(--space-5)
    }
}

.calc-controls {
    align-items: flex-end;
    --gap: var(--space-3)
}

.calc-controls > label {
    white-space: nowrap;
    color: var(--color-text)
}

.calc-controls > .form-field {
    flex: 0 0 300px;
    max-width: 320px
}

@media (min-width: 1024px) {
    .calc-controls > .form-field {
        flex-basis: 240px;
        max-width: 260px
    }
}

@media (max-width: calc(1024px - 1px)) {
    .calc-controls {
        display: grid
    }

    .calc-controls .h2, .calc-controls .h2.cs {
        font-size: var(--font-size-text2);
        line-height: var(--font-lineheight-text2);
        margin-bottom: var(--space-2)
    }

    .calc-controls .text_content {
        font-size: var(--font-size-text3);
        line-height: var(--font-lineheight-text3)
    }

    .calc-controls .text_content .tg th, .calc-controls .text_content .tg td {
        padding: var(--space-2) var(--space-2);
        font-size: var(--font-size-text3);
        line-height: var(--font-lineheight-text3)
    }

    .calc-controls > ._space-4 {
        block-size: var(--space-3)
    }

    .calc-controls {
        flex-wrap: wrap;
        align-items: stretch
    }

    .calc-controls > .form-field {
        flex: 1 1 auto;
        max-width: 100%
    }

    .calc-controls > .btn {
        width: 100%
    }
}

.header-nav button {
    border: none;
    background: none;
    font: inherit;
    padding: 0;
    cursor: pointer
}

.header-nav a:focus-visible, .header-nav button:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 3px;
    border-radius: var(--radius-1)
}

.header-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    align-items: center;
    box-shadow: var(--shadow-1);
    background: var(--color-base);
    border-radius: 0 0 var(--radius-2) var(--radius-2);
    overflow: hidden
}

.header-nav > .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    padding-inline: var(--page-padding-x);
    align-self: stretch;
    width: 100%;
    background-color: var(--color-base)
}

.header-nav > .wrapper > .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    width: 100%;
    flex-wrap: wrap;
    row-gap: var(--space-4);
    -moz-column-gap: var(--space-4);
    column-gap: var(--space-4)
}

.header-nav > .wrapper > .main > .left {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4)
}

.header-nav > .wrapper > .main > .right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4)
}

.header-nav > .wrapper > .main > .right > a {
    display: inline-flex
}

.header-nav > .wrapper > .main > .search-bar {
    order: 2;
    flex-basis: 100%
}

.header-nav > .wrapper > .main > .left, .header-nav > .wrapper > .main > .right {
    order: 1
}

.header-nav .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-1);
    color: var(--color-text);
    text-decoration: none
}

.header-nav .icon-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.header-nav .icon-btn {
    line-height: 0
}

.header-nav .icon-btn > img, .header-nav .icon-btn > svg {
    width: 100%;
    height: 100%
}

.header-nav > .promo-container {
    position: relative;
    width: 100%;
    min-height: 0
}

.header-nav > .promo-container > .promo {
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    align-self: stretch;
    border-radius: 0;
    background: linear-gradient(90deg, var(--color-highlight) 0%, var(--color-highlight-2) 100%)
}

.header-nav > .promo-container > .promo > .icon {
    display: flex;
    width: var(--icon-size);
    height: var(--icon-size);
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-1)
}

.header-nav > .promo-container > .promo > .icon > .image {
    width: 18px;
    height: 16px
}

.header-nav > .promo-container > .promo > .content {
    display: inline-flex;
    align-items: center
}

.header-nav > .promo-container > .promo > .content > .text {
    font-weight: var(--font-weight-bold);
    color: var(--color-base);
    text-decoration: underline;
    white-space: normal
}

@media (min-width: 1024px) {
    .header-nav > .wrapper > .main {
        flex-wrap: nowrap
    }

    .header-nav > .wrapper > .main > .search-bar {
        order: 0;
        flex-basis: auto
    }

    .header-nav > .wrapper > .main > .left, .header-nav > .wrapper > .main > .right {
        order: 0
    }

    .header-nav > .wrapper > .main > .left a > .logo {
        max-width: none
    }

    .header-nav > .promo-container > .promo {
        justify-content: center
    }

    .header-nav > .wrapper > .main > .right .toggle {
        display: none !important
    }
}

@media (max-width: calc(1024px - 1px)) {
    .header-nav > .wrapper > .main > .left a > .logo {
        max-width: 85px;
        height: auto
    }

    .header-nav > .wrapper > .main > .search-bar.-collapsed {
        display: none
    }

    .header-nav > .wrapper > .main > .right .toggle {
        display: none
    }

    .header-nav > .wrapper > .main > .right .toggle.-visible {
        display: inline-flex
    }
}

.header-menu {
    opacity: 0;
    pointer-events: none;
    visibility: hidden
}

.header-menu.-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible
}

.header-menu > .backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg, rgba(0, 0, 0, 0.5));
    border: 0;
    padding: 0;
    margin: 0;
    cursor: default;
    z-index: 1100
}

.header-menu > .panel {
    position: fixed;
    top: var(--space-8);
    bottom: 0;
    left: var(--space-4);
    right: var(--space-4);
    width: calc(100% - 2 * var(--space-4));
    max-width: var(--container-max);
    margin-inline: auto;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    padding-bottom: 0;
    border-radius: var(--radius-2) var(--radius-2) 0 0;
    box-shadow: var(--shadow-1);
    background: var(--color-base);
    z-index: 1110
}

@media (min-width: 1024px) {
    .header-menu > .panel {
        top: 72px;
        bottom: auto;
        left: auto;
        right: auto;
        width: var(--module-size);
        height: var(--menu-height, 28rem);
        max-height: calc(100vh - var(--header-height, 72px) - var(--space-4));
        padding-bottom: var(--space-4);
        border-radius: var(--radius-2)
    }
}

.header-menu .header-menu-nav {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
}

.header-menu .header-menu-nav .menu_category {
    display: none
}

.header-menu .header-menu-nav .menu_category.-active {
    display: block
}

.header-menu .header-menu-nav .sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-base)
}

.header-menu .header-menu-nav .section {
    display: block;
    padding-bottom: var(--space-4);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-selection)
}

.header-menu .header-menu-nav .section .back {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--color-text);
    text-decoration: none
}

.header-menu .header-menu-nav .section .back .chevron-left, .header-menu .header-menu-nav .section .back .chevron.-left {
    width: var(--icon-size);
    height: var(--icon-size)
}

.header-menu .header-menu-nav .section[hidden] {
    display: none !important
}

.header-menu .header-menu-nav .section-heading, .header-menu .header-menu-nav .section.-heading {
    margin-top: 0;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-selection)
}

.header-menu .header-menu-nav .section-heading .heading, .header-menu .header-menu-nav .section.-heading .heading {
    color: var(--color-highlight);
    font-weight: var(--font-weight-bold);
    text-decoration: underline
}

.header-menu .header-menu-nav .section-heading[hidden], .header-menu .header-menu-nav .section.-heading[hidden] {
    display: none !important
}

.header-menu .header-menu-nav .list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0
}

.header-menu .header-menu-nav .list .item {
    display: flex;
    align-items: center
}

.header-menu .header-menu-nav .list .item .link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-weight-bold)
}

@media (max-width: calc(1024px - 1px)) {
    .header-menu .header-menu-nav .list .item .link:focus {
        outline: none
    }
}

.header-menu .header-menu-nav .list .item .link .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-left: auto
}

.header-menu .header-menu-nav .list .item.active .link {
    text-decoration: underline !important
}

.header-menu .header-menu-nav .list[hidden] {
    display: none !important
}

.header-menu .header-menu-nav .section[hidden] + .section-heading, .header-menu .header-menu-nav .section[hidden] + .section.-heading {
    padding-top: 0
}

.search-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    flex: 1
}

.search-bar > .input-group {
    display: flex;
    align-items: center;
    align-self: stretch;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-1);
    overflow: hidden
}

.search-bar > .input-group > .input {
    flex: 1;
    height: var(--button-height);
    padding: var(--button-padding);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-h3);
    white-space: nowrap;
    outline: 0;
    scroll-margin-top: 0;
    scroll-margin-bottom: 0
}

.search-bar > .input-group > .input::-moz-placeholder {
    color: var(--color-text-secondary)
}

.search-bar > .input-group > .input::placeholder {
    color: var(--color-text-secondary)
}

.search-bar > .input-group button.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-1);
    color: var(--color-text);
    text-decoration: none
}

.search-bar > .input-group button.icon-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.search-bar > .input-group button.icon-btn {
    flex: 0 0 auto;
    border-radius: 0;
    margin: 0 var(--space-4)
}

.search-bar.-filled .submit {
    display: none !important
}

.search-bar.-filled .clear {
    display: inline-flex !important
}

.search-bar .clear[hidden] {
    display: none !important
}

.search-bar .input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.search-bar .input[type=search]::-webkit-search-cancel-button, .search-bar .input[type=search]::-webkit-search-decoration, .search-bar .input[type=search]::-webkit-search-results-button, .search-bar .input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none
}

.search-bar .input[type=search]::-ms-clear, .search-bar .input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

.cart-widget {
    align-items: center;
    justify-content: center;
    text-decoration: none
}

.cart-widget > .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-1);
    color: var(--color-text);
    text-decoration: none
}

.cart-widget > .icon-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.cart-widget > .icon-btn {
    pointer-events: none
}

.cart-widget > .badge {
    display: flex;
    min-width: var(--space-4);
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: none
}

.cart-widget > .badge > .count {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    color: var(--color-selection);
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    white-space: nowrap
}

.cart-widget.-has-items > .badge > .count {
    color: var(--color-highlight)
}

.cart-widget.-has-availability-problems > .icon-btn img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(1892%) hue-rotate(344deg) brightness(102%) contrast(98%)
}

.cart-widget.-has-availability-problems > .badge > .count {
    color: var(--color-warning)
}

.site-footer {
    width: 100%;
    margin-bottom: calc(var(--space-6) * -1);
    padding: var(--space-6) 0;
    background: var(--color-base);
    box-shadow: 0 0 0 100vmax var(--color-base);
    clip-path: inset(0 -100vmax);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: var(--space-6)
}

.site-footer > .sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: stretch
}

.site-footer > .sections > .section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.site-footer > .sections > .section .price-comparisons {
    display: flex;
    gap: 25px
}

.site-footer > .sections > .section .price-comparisons .ads {
    display: block
}

.site-footer > .sections > .section .price-comparisons .ads-idealo {
    background-image: url(/assets/ads/idealo.png);
    width: 70px;
    height: 70px
}

.site-footer > .sections > .section .price-comparisons .ads-geizhals {
    background-image: url(/assets/ads/geizhals.png);
    width: 120px;
    height: 60px
}

.site-footer > .sections > .section > .head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4)
}

.site-footer > .sections > .section > .head > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.site-footer > .sections > .section > .head > .title {
    margin: 0;
    font-weight: var(--font-weight-bold)
}

.site-footer > .sections > .section > nav > .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.site-footer > .sections > .section > nav > .list > .item > .link {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text-secondary);
    text-decoration: underline
}

.site-footer > .sections > .section > nav > .list > .item > .link:hover, .site-footer > .sections > .section > nav > .list > .item > .link:focus-visible {
    color: var(--color-text)
}

.site-footer > .sections > .section > .address {
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.site-footer > .sections > .section > .text {
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.site-footer > .sections > .section .lead {
    font-weight: var(--font-weight-bold)
}

.site-footer > .sections > .section > .benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.site-footer > .sections > .section > .benefits > .line {
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.site-footer > .sections > .section > .payments {
    display: grid;
    grid-template-columns:repeat(2, calc(76px + var(--space-2) * 2));
    gap: var(--space-3);
    justify-content: start
}

.site-footer > .sections > .section > .payments > .logo {
    display: inline-block;
    width: 76px;
    height: auto;
    background-color: #f4f4f4;
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1)
}

.site-footer .list {
    list-style: none;
    padding-left: 0;
    margin: 0
}

.site-footer > .divider {
    border: none;
    border-top: 1px solid var(--color-selection);
    margin: 0;
    width: 100%
}

.site-footer > .legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    align-self: stretch
}

.site-footer > .legal > .link {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text-secondary);
    text-decoration: underline
}

.site-footer > .legal > .link:hover, .site-footer > .legal > .link:focus-visible {
    color: var(--color-text)
}

@media (min-width: 1024px) {
    .site-footer {
        margin-bottom: calc(var(--space-8) * -1);
        padding: var(--space-8) 0;
        gap: var(--space-5)
    }

    .site-footer > .sections {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-5)
    }

    .site-footer > .sections > .section {
        width: var(--module-size);
        max-width: var(--module-size);
        flex: 0 0 var(--module-size)
    }

    .site-footer > .legal {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        flex-wrap: nowrap;
        gap: 0
    }
}

#toTopButton {
    position: fixed;
    right: var(--page-padding-x);
    z-index: 900;
    line-height: 0
}

#toTopButton svg {
    display: block
}

#toTopButton_container {
    pointer-events: none
}

#toTopButton {
    pointer-events: auto
}

.image-banner {
    width: 100%
}

.image-banner > .viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    height: var(--banner-height, var(--module-size));
    aspect-ratio: var(--banner-aspect, auto)
}

.image-banner > .viewport > .image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.image-banner > .viewport > .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    color: var(--color-black)
}

.image-banner > .viewport > .content > .action {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.image-banner > .viewport > .content > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .image-banner > .viewport > .content > .action:active {
        transform: translateY(1px)
    }
}

.image-banner > .viewport > .content > .action {
    border: 2px solid var(--color-black);
    color: var(--color-black);
    text-decoration: none
}

.breadcrumb-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    width: 100%
}

.breadcrumb-nav > .back {
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text-secondary)
}

@media (min-width: 1024px) {
    .breadcrumb-nav > .back {
        display: none
    }
}

.breadcrumb-nav > .list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2)
}

@media (max-width: calc(1024px - 1px)) {
    .breadcrumb-nav > .list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%
    }

    .breadcrumb-nav > .list::-webkit-scrollbar {
        display: none
    }

    .breadcrumb-nav > .list:focus {
        outline: none
    }

    .breadcrumb-nav > .list:focus-visible {
        outline: none
    }
}

.breadcrumb-nav > .list > .item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0
}

.breadcrumb-nav > .list > .item > .link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    display: inline-flex;
    align-items: center
}

.breadcrumb-nav > .list > .item > .link svg path {
    fill: currentColor
}

.breadcrumb-nav > .list > .item > .link:is(:visited,:active) {
    color: var(--color-text-secondary);
    text-decoration: none
}

@media (min-width: 1024px) {
    .breadcrumb-nav > .list > .item > .link:hover {
        color: var(--color-text)
    }
}

.breadcrumb-nav > .list > .item > .link.-active, .breadcrumb-nav > .list > .item > .link[aria-current=page] {
    color: var(--color-text);
    font-weight: var(--font-weight-medium)
}

.breadcrumb-nav > .list > .item > .chevron {
    width: var(--icon-size);
    height: var(--icon-size)
}

.category-sidebar {
    display: block;
    padding: var(--space-4);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    background: var(--color-base);
    overflow: visible
}

@media (max-width: calc(1024px - 1px)) {
    .category-sidebar {
        display: none
    }
}

.category-sidebar > .section {
    display: block;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-selection)
}

.category-sidebar > .section > .back {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--color-text);
    text-decoration: none
}

.category-sidebar > .section > .back > .chevron-left, .category-sidebar > .section > .back > .chevron.-left {
    width: var(--icon-size);
    height: var(--icon-size)
}

.category-sidebar > .viewport {
    max-height: 576px;
    overflow: auto;
    border-radius: var(--radius-2);
    background-clip: padding-box;
    padding-bottom: var(--space-1);
    padding-inline-end: var(--space-4);
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: var(--color-black) var(--color-bg)
}

.category-sidebar > .viewport::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

.category-sidebar > .viewport::-webkit-scrollbar-track {
    background: var(--color-bg);
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-round)
}

.category-sidebar > .viewport::-webkit-scrollbar-thumb {
    background-color: var(--color-black);
    border-radius: var(--radius-round);
    border: 0;
    box-shadow: none
}

.category-sidebar > .viewport::-webkit-scrollbar-corner {
    background: var(--color-bg)
}

.category-sidebar > .viewport > .action {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.category-sidebar > .viewport > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .category-sidebar > .viewport > .action:active {
        transform: translateY(1px)
    }
}

.category-sidebar > .viewport > .action {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%;
    margin-bottom: var(--space-4)
}

.category-sidebar > .viewport > .action:is(:visited,:hover,:active) {
    color: var(--color-text)
}

.category-sidebar > .viewport > .action > .text {
    pointer-events: none
}

.category-sidebar > .viewport > .root {
    color: var(--color-highlight, #DE5A13);
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-selection);
    padding-bottom: var(--space-4)
}

.category-sidebar > .viewport > .list.-children {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0
}

.category-sidebar > .viewport > .list.-children > .item {
    display: flex;
    align-items: center;
    padding-left: 16px
}

.category-sidebar > .viewport > .list.-children > .item > .link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-weight-medium)
}

.category-sidebar > .viewport > .list.-children > .item > .link:is(:visited,:hover,:active) {
    color: var(--color-text)
}

.category-sidebar > .viewport > .list.-children > .item > .link > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-left: auto
}

.category-sidebar > .viewport > .list.-children > .item.-current {
    padding-left: 0
}

.category-sidebar > .viewport > .list.-children > .item.-current > .label {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    text-decoration: none
}

.quantity-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    border: 2px solid var(--color-border-strong);
    background-color: var(--color-base);
    box-shadow: var(--shadow-1);
    align-self: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.quantity-picker * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (min-width: 1024px) {
    .quantity-picker {
        align-self: auto
    }
}

.quantity-picker.-error {
    border-color: var(--color-warning);
    background-color: var(--color-warning-box)
}

.quantity-picker.-hover-left > .quantity-picker__button:first-child, .quantity-picker.-hover-right > .quantity-picker__button:last-child {
    color: var(--color-highlight)
}

.quantity-picker > .quantity-picker__button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-h3);
    touch-action: manipulation
}

.quantity-picker > .quantity-picker__button:hover {
    color: var(--color-highlight)
}

.quantity-picker > .quantity-picker__button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.quantity-picker > .quantity-picker__input {
    all: unset;
    box-sizing: border-box;
    width: auto;
    height: calc(var(--button-height) - 24px);
    padding-inline: var(--space-2);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
    min-width: calc(var(--qty-input-min-width) + var(--space-3));
    max-width: var(--qty-input-max-width);
    text-align: center;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-h3);
    border-radius: var(--radius-1);
    background: rgba(0, 0, 0, 0)
}

.quantity-picker > .quantity-picker__input::-webkit-outer-spin-button, .quantity-picker > .quantity-picker__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.quantity-picker > .quantity-picker__input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.cart-item-card {
    --media-w: 300px;
    --media-w-mobile: 120px;
    --btn-hit-x: 8px;
    --btn-hit-y: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-4);
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
    width: 100%
}

@media (min-width: 1024px) {
    .cart-item-card {
        display: grid;
        grid-template-columns:1fr;
        -moz-column-gap: var(--space-5);
        column-gap: var(--space-5);
        align-items: start
    }
}

@media (min-width: 1024px) {
    .cart-item-card.-has-services {
        grid-template-columns:1fr 1fr
    }
}

.cart-item-card.-has-availability-problem {
    box-shadow: 0 0 0 2px var(--color-warning-box)
}

.cart-item-card > .product-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .cart-item-card > .product-info {
        display: grid;
        grid-template-columns:var(--media-w) 1fr;
        -moz-column-gap: var(--space-5);
        column-gap: var(--space-5);
        align-items: start;
        grid-column: 1
    }
}

.cart-item-card > .product-info > .media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

@media (min-width: 1024px) {
    .cart-item-card > .product-info > .media {
        width: var(--media-w);
        min-width: var(--media-w);
        flex: 0 0 var(--media-w)
    }
}

.cart-item-card > .product-info > .media > .image {
    width: 100%;
    max-width: var(--media-w);
    height: auto;
    aspect-ratio: 1;
    -o-object-fit: contain;
    object-fit: contain
}

.cart-item-card > .product-info > .details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%
}

.cart-item-card > .product-info > .details > .head {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5)
}

.cart-item-card > .product-info > .details > .head > .title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-wrap: pretty
}

.cart-item-card > .product-info > .details > .head > .title > .titlelink {
    color: inherit;
    text-decoration: none
}

.cart-item-card > .product-info > .details > .head > .title > .titlelink:hover {
    color: var(--color-highlight)
}

.cart-item-card > .product-info > .details > .meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4)
}

.cart-item-card > .product-info > .details > .meta > .meta-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4)
}

.cart-item-card > .product-info > .details > .meta > .codes {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text)
}

.cart-item-card > .product-info > .details > .meta .codes {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text)
}

.cart-item-card > .product-info > .details > .meta .avail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2)
}

.cart-item-card > .product-info > .details > .meta .avail > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.cart-item-card > .product-info > .details > .meta .avail > .text {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    white-space: nowrap
}

.cart-item-card > .product-info > .details > .meta > .notice {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary)
}

.cart-item-card > .product-info > .details > .meta > .availability-notice {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text3);
    color: var(--color-warning)
}

.cart-item-card > .product-info > .details > .meta .quantity-picker {
    padding: 0 var(--space-5);
    flex-shrink: 0
}

.cart-item-card > .product-info > .details > .pricing {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start
}

@media (min-width: 1024px) {
    .cart-item-card > .product-info > .details > .pricing {
        align-items: flex-end
    }
}

.cart-item-card > .product-info > .details > .pricing > .prices {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-end;
    text-align: right
}

.cart-item-card > .product-info > .details > .pricing > .prices > .single, .cart-item-card > .product-info > .details > .pricing > .prices > .total {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1)
}

.cart-item-card > .product-info > .details > .pricing > .prices > .single > .label, .cart-item-card > .product-info > .details > .pricing > .prices > .total > .label {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text)
}

.cart-item-card > .product-info > .details > .pricing > .prices > .single > .label.-bold, .cart-item-card > .product-info > .details > .pricing > .prices > .total > .label.-bold {
    font-weight: var(--font-weight-bold)
}

.cart-item-card > .product-info > .details > .pricing > .prices > .single > .amount, .cart-item-card > .product-info > .details > .pricing > .prices > .total > .amount {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text)
}

.cart-item-card > .product-info > .details > .pricing > .prices > .single > .amount.-bold, .cart-item-card > .product-info > .details > .pricing > .prices > .total > .amount.-bold {
    font-weight: var(--font-weight-bold)
}

.cart-item-card > .product-info > .details > .pricing > .prices > .note {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text)
}

@media (min-width: 1024px) {
    .cart-item-card > .services-box {
        grid-column: 2;
        justify-self: stretch;
        width: 100%
    }
}

.cart-item-card > .services-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    margin-top: calc(-1 * var(--space-5))
}

@media (min-width: 1024px) {
    .cart-item-card > .services-footer {
        grid-column: 2;
        justify-self: end
    }
}

.cart-item-card > .services-footer > .sum {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: 1
}

.cart-item-card > .services-footer > .vat-note {
    font-size: var(--font-size-text3);
    color: var(--color-text);
    line-height: 1
}

.cart-item-card > .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2)
}

@media (min-width: 1024px) {
    .cart-item-card > .actions {
        grid-column: 1/-1;
        justify-self: end
    }
}

.cart-item-card > .actions > .delete {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

@media (hover: none) {
    .cart-item-card > .actions > .delete {
        touch-action: auto;
        -webkit-tap-highlight-color: rgba(238, 54, 22, .1)
    }
}

.cart-item-card > .actions > .delete > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.cart-item-card > .actions > .delete > .text {
    transition: -webkit-text-decoration .2s ease;
    transition: text-decoration .2s ease;
    transition: text-decoration .2s ease, -webkit-text-decoration .2s ease
}

@media (min-width: 1024px) {
    .cart-item-card.-has-services > .actions {
        grid-column: 2
    }
}

@media (max-width: calc(1024px - 1px)) {
    .cart-item-card > .product-info {
        display: grid;
        grid-template-columns:var(--media-w-mobile) 1fr;
        grid-template-areas:"title    title" "avail    codes" "image    quantity" "image    pricing" "notice   notice";
        gap: var(--space-4)
    }

    .cart-item-card > .product-info > .details, .cart-item-card > .product-info > .details > .meta, .cart-item-card > .product-info > .details > .meta > .meta-row, .cart-item-card > .product-info > .details > .meta > .meta-row > .codes {
        display: contents
    }

    .cart-item-card > .product-info > .details > .head {
        grid-area: title;
        margin-bottom: 0
    }

    .cart-item-card > .product-info > .details > .meta > .meta-row > .codes > .avail {
        grid-area: avail;
        justify-content: flex-start;
        margin-top: 0
    }

    .cart-item-card > .product-info > .details > .meta > .meta-row > .codes > .codes-text {
        grid-area: codes;
        text-align: right;
        justify-self: end
    }

    .cart-item-card > .product-info > .media {
        grid-area: image;
        width: var(--media-w-mobile);
        height: var(--media-w-mobile);
        align-self: start
    }

    .cart-item-card > .product-info > .media > .image {
        width: var(--media-w-mobile);
        height: var(--media-w-mobile)
    }

    .cart-item-card > .product-info > .details > .meta > .meta-row > .quantity-picker {
        grid-area: quantity;
        justify-self: end;
        align-self: start
    }

    .cart-item-card > .product-info > .details > .pricing {
        grid-area: pricing;
        align-items: flex-end;
        align-self: start;
        margin-top: 0
    }

    .cart-item-card > .product-info > .details > .pricing > .prices {
        gap: var(--space-3)
    }

    .cart-item-card > .product-info > .details > .meta > .notice {
        grid-area: notice
    }

    .cart-item-card > .services-footer {
        margin-top: calc(-1 * var(--space-4))
    }

    .cart-item-card > .actions {
        margin-top: var(--space-5);
        justify-content: flex-end
    }
}

.services-box {
    align-self: start;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    color: var(--color-text)
}

@media (min-width: 1024px) {
    .services-box {
        width: var(--module-size)
    }
}

.services-box > .head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-2)
}

.services-box > .head > .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4)
}

.services-box > .head > .title-row > .title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h4)
}

.services-box > .head > .title-row > .info {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-1)
}

.services-box > .head > .title-row > .info:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px
}

.services-box > .head > .title-row > .info > .icon {
    width: 100%;
    height: 100%;
    display: block
}

.services-box > .head > .subtitle {
    margin: 0;
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary)
}

.services-box > .services-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background-color: var(--color-base);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    padding: var(--space-4)
}

.services-box > .services-list > .notice-text {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: var(--font-size-text1)
}

.services-box .service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4)
}

.services-box .service-row > .label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3)
}

.services-box .service-row > .price {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    white-space: nowrap
}

.services-box .name {
    all: unset;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.services-box .name:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px
}

.services-box .name > .variant {
    font-weight: var(--font-weight-regular);
    margin-left: var(--space-2)
}

.services-box .service-row.-blocked > .checkbox-option > .checkmark {
    border: 2px solid var(--color-selection)
}

.services-box .checkbox-option .checkmark {
    border: 2px solid #000
}

.extra_services_description > .extra_service_description {
    margin-bottom: 5px
}

.extra_services_description > .extra_service_description > .title {
    font-size: 20px;
    padding: 15px 0
}

.product-card > .details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    flex: 1 1 auto;
    width: 100%
}

@media (min-width: 1024px) {
    .product-card > .details {
        justify-content: space-between;
        min-height: 100%
    }
}

.product-card > .head, .product-card > .details > .head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .product-card > .head, .product-card > .details > .head {
        gap: var(--space-5)
    }
}

.product-card > .head > .bar, .product-card > .details > .head > .bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .product-card > .head > .bar, .product-card > .details > .head > .bar {
        display: grid;
        grid-template-columns:1fr auto auto;
        align-items: center;
        gap: var(--space-5)
    }
}

.product-card > .head > .bar > .badges, .product-card > .details > .head > .bar > .badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3)
}

@media (min-width: 1024px) {
    .product-card > .head > .bar > .badges, .product-card > .details > .head > .bar > .badges {
        gap: var(--space-5)
    }
}

.product-card > .head > .bar > .badges > .badge, .product-card > .details > .head > .bar > .badges > .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    height: var(--space-6);
    border-radius: var(--radius-1);
    border: 2px solid var(--color-highlight);
    background-color: var(--color-base)
}

.product-card > .head > .bar > .badges > .badge > .text, .product-card > .head > .bar > .badges > .badge > .text-bold, .product-card > .details > .head > .bar > .badges > .badge > .text, .product-card > .details > .head > .bar > .badges > .badge > .text-bold {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text);
    white-space: nowrap
}

.product-card > .head > .bar > .label, .product-card > .details > .head > .bar > .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    line-height: 0
}

.product-card > .head > .bar > .doc, .product-card > .details > .head > .bar > .doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-5);
    align-self: stretch;
    text-decoration: none;
    color: inherit
}

@media (min-width: 1024px) {
    .product-card > .head > .bar > .doc, .product-card > .details > .head > .bar > .doc {
        display: inline-flex;
        justify-content: flex-start;
        align-self: auto;
        width: auto
    }
}

.product-card > .head > .bar > .doc > .text, .product-card > .details > .head > .bar > .doc > .text {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    text-decoration: underline;
    white-space: nowrap
}

.product-card > .head > .title, .product-card > .details > .head > .title {
    margin: 0
}

.product-card > .head > .title.title-link, .product-card > .head > .title > .title-link, .product-card > .details > .head > .title.title-link, .product-card > .details > .head > .title > .title-link {
    color: inherit;
    text-decoration: none;
    line-height: 130%;
    overflow-wrap: break-word;
    text-wrap: auto
}

.product-card > .head > .title.title-link:visited, .product-card > .head > .title.title-link:hover, .product-card > .head > .title.title-link:active, .product-card > .head > .title > .title-link:visited, .product-card > .head > .title > .title-link:hover, .product-card > .head > .title > .title-link:active, .product-card > .details > .head > .title.title-link:visited, .product-card > .details > .head > .title.title-link:hover, .product-card > .details > .head > .title.title-link:active, .product-card > .details > .head > .title > .title-link:visited, .product-card > .details > .head > .title > .title-link:hover, .product-card > .details > .head > .title > .title-link:active {
    color: inherit;
    text-decoration: none
}

.product-card > .info, .product-card > .details > .info {
    display: grid;
    grid-template-columns:auto 1fr;
    -moz-column-gap: var(--space-4);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    width: 100%
}

.product-card > .info > .price, .product-card > .details > .info > .price {
    grid-column: 1/-1
}

.product-card > .info > .eek-col, .product-card > .details > .info > .eek-col {
    grid-column: 1/-1
}

@media (min-width: 1024px) {
    .product-card > .info, .product-card > .details > .info {
        grid-template-columns:minmax(auto, max-content) minmax(auto, max-content) minmax(auto, max-content) 1fr;
        align-items: start;
        gap: var(--space-5)
    }

    .product-card > .info > .price, .product-card > .details > .info > .price {
        grid-column: auto;
        justify-self: end
    }

    .product-card > .info > .eek-col, .product-card > .details > .info > .eek-col {
        grid-column: auto
    }
}

.product-card > .info > .eek-col, .product-card > .details > .info > .eek-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0
}

.product-card > .info > .eek-col > .label, .product-card > .details > .info > .eek-col > .label {
    display: inline-flex;
    text-decoration: none;
    line-height: 0
}

.product-card > .info > .eek-col > .doc, .product-card > .info > .eek-col > .gpsr, .product-card > .details > .info > .eek-col > .doc, .product-card > .details > .info > .eek-col > .gpsr {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    font-weight: 500;
    text-decoration: underline
}

.product-card > .info > .eek-col > .doc:visited, .product-card > .info > .eek-col > .doc:hover, .product-card > .info > .eek-col > .doc:active, .product-card > .info > .eek-col > .gpsr:visited, .product-card > .info > .eek-col > .gpsr:hover, .product-card > .info > .eek-col > .gpsr:active, .product-card > .details > .info > .eek-col > .doc:visited, .product-card > .details > .info > .eek-col > .doc:hover, .product-card > .details > .info > .eek-col > .doc:active, .product-card > .details > .info > .eek-col > .gpsr:visited, .product-card > .details > .info > .eek-col > .gpsr:hover, .product-card > .details > .info > .eek-col > .gpsr:active {
    color: var(--color-text-secondary)
}

.product-card > .info > .eek-col > .doc > .text, .product-card > .info > .eek-col > .gpsr > .text, .product-card > .details > .info > .eek-col > .doc > .text, .product-card > .details > .info > .eek-col > .gpsr > .text {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit
}

.product-card > .info > .brand-slot, .product-card > .details > .info > .brand-slot {
    min-height: 24px;
    display: flex;
    align-items: flex-start
}

.product-card > .info > .brand-slot > .brand, .product-card > .details > .info > .brand-slot > .brand {
    width: auto;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain
}

.product-card > .info > .meta, .product-card > .details > .info > .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
    text-align: right
}

@media (min-width: 1024px) {
    .product-card > .info > .meta, .product-card > .details > .info > .meta {
        align-items: flex-start;
        text-align: left
    }

    .product-card > .info > .meta > .stars, .product-card > .details > .info > .meta > .stars {
        margin-right: 0
    }
}

.product-card > .info > .meta > .stars, .product-card > .details > .info > .meta > .stars {
    display: flex;
    align-items: center
}

.product-card > .info > .meta > .stars > .star, .product-card > .details > .info > .meta > .stars > .star {
    width: var(--icon-size);
    height: var(--icon-size);
    aspect-ratio: 1
}

.product-card > .info > .meta > .codes, .product-card > .details > .info > .meta > .codes {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.product-card > .info > .extra-services, .product-card > .details > .info > .extra-services {
    font-weight: 700;
    grid-column: 1/3;
    display: flex;
    white-space: nowrap
}

@media (min-width: 1024px) {
    .product-card > .info > .extra-services, .product-card > .details > .info > .extra-services {
        grid-column: 1/3
    }
}

@media (max-width: calc(1024px - 1px)) {
    .product-card > .info > .extra-services, .product-card > .details > .info > .extra-services {
        order: 2
    }
}

.product-card > .info > .lieferzeit, .product-card > .details > .info > .lieferzeit {
    font-weight: 700;
    display: flex;
    flex-flow: column
}

@media (min-width: 1024px) {
    .product-card > .info > .lieferzeit, .product-card > .details > .info > .lieferzeit {
        grid-column: 3/5;
        text-align: right;
        justify-self: end
    }
}

@media (max-width: calc(1024px - 1px)) {
    .product-card > .info > .lieferzeit, .product-card > .details > .info > .lieferzeit {
        grid-column: 1/3;
        order: 1
    }
}

.product-card > .info .lieferzeit img, .product-card > .info .extra-services img, .product-card > .details > .info .lieferzeit img, .product-card > .details > .info .extra-services img {
    display: inline;
    vertical-align: middle;
    margin-right: 8px
}

.product-card > .info > .price, .product-card > .details > .info > .price {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
    width: 100%
}

@media (min-width: 1024px) {
    .product-card > .info > .price, .product-card > .details > .info > .price {
        width: auto;
        align-items: flex-end
    }
}

.product-card > .info > .price > .amount, .product-card > .details > .info > .price > .amount {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-highlight);
    letter-spacing: -0.02em;
    white-space: nowrap
}

@media (min-width: 1024px) {
    .product-card > .info > .price > .amount, .product-card > .details > .info > .price > .amount {
        font-size: var(--product-price-size, 32px)
    }
}

.product-card > .info > .price > .note, .product-card > .details > .info > .price > .note {
    margin: 0;
    font-size: var(--font-size-text2);
    line-height: 0;
    color: var(--color-text-secondary);
    text-align: right
}

.product-card > .info > .price > .note a, .product-card > .details > .info > .price > .note a {
    color: var(--color-text-secondary)
}

.product-card > .info > .price > .note a:hover, .product-card > .details > .info > .price > .note a:hover {
    text-decoration: none
}

.product-card > .info > .price > .avail, .product-card > .details > .info > .price > .avail {
    display: flex;
    align-items: center;
    gap: var(--space-3)
}

.product-card > .info > .price > .avail > .icon, .product-card > .details > .info > .price > .avail > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.product-card > .info > .price > .avail > .text, .product-card > .details > .info > .price > .avail > .text {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    white-space: nowrap
}

.product-card > .actions, .product-card > .details > .actions {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-5);
    margin-top: 0
}

@media (min-width: 1024px) {
    .product-card > .actions > .quantity-picker, .product-card > .details > .actions > .quantity-picker {
        align-self: auto
    }
}

.product-card > .actions > .action, .product-card > .details > .actions > .action {
    --btn-anim-fade: 500ms;
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.product-card > .actions > .action:focus-visible, .product-card > .details > .actions > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .product-card > .actions > .action:active, .product-card > .details > .actions > .action:active {
        transform: translateY(1px)
    }
}

.product-card > .actions > .action, .product-card > .details > .actions > .action {
    background-color: var(--color-highlight);
    color: var(--color-base);
    gap: var(--button-gap);
    padding-inline: var(--space-4);
    width: 100%
}

@media (min-width: 1024px) {
    .product-card > .actions > .action, .product-card > .details > .actions > .action {
        flex: 1 1 auto;
        max-width: none
    }
}

.product-card > .actions > .action > .icon, .product-card > .details > .actions > .action > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.product-card > .actions > .action > .text, .product-card > .details > .actions > .action > .text {
    color: var(--color-base)
}

.product-card > .actions > .action, .product-card > .details > .actions > .action {
    position: relative;
    overflow: hidden;
    transition: none
}

.product-card > .actions > .action::after, .product-card > .details > .actions > .action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-size);
    height: var(--icon-size);
    opacity: 0;
    pointer-events: none;
    transition: none;
    -webkit-mask: url("/assets/icons/toast-checkmark.svg") no-repeat center/contain;
    mask: url("/assets/icons/toast-checkmark.svg") no-repeat center/contain;
    background: #fff
}

.product-card > .actions > .action > .text, .product-card > .actions > .action > .logo, .product-card > .actions > .action > .icon, .product-card > .details > .actions > .action > .text, .product-card > .details > .actions > .action > .logo, .product-card > .details > .actions > .action > .icon {
    opacity: 1;
    transition: none
}

.product-card > .actions > .action.is-adding, .product-card > .details > .actions > .action.is-adding {
    transition: background-color var(--btn-anim-fade) ease;
    background-color: var(--color-confirm);
    pointer-events: none
}

.product-card > .actions > .action.is-adding::after, .product-card > .details > .actions > .action.is-adding::after {
    opacity: 1;
    transition: opacity var(--btn-anim-fade) ease
}

.product-card > .actions > .action.is-adding > .text, .product-card > .actions > .action.is-adding > .logo, .product-card > .actions > .action.is-adding > .icon, .product-card > .details > .actions > .action.is-adding > .text, .product-card > .details > .actions > .action.is-adding > .logo, .product-card > .details > .actions > .action.is-adding > .icon {
    opacity: 0;
    transition: opacity var(--btn-anim-fade) ease
}

@media (prefers-reduced-motion: reduce) {
    .product-card > .actions > .action, .product-card > .actions > .action::after, .product-card > .actions > .action > .text, .product-card > .actions > .action > .logo, .product-card > .actions > .action > .icon, .product-card > .details > .actions > .action, .product-card > .details > .actions > .action::after, .product-card > .details > .actions > .action > .text, .product-card > .details > .actions > .action > .logo, .product-card > .details > .actions > .action > .icon {
        transition: none !important
    }
}

.product-card .product-grid {
    display: grid;
    gap: 24px;
    margin: 25px 0;
    grid-template-columns:repeat(4, 1fr)
}

@media (max-width: calc(1024px - 1px)) {
    .product-card .product-grid {
        grid-template-columns:1fr
    }
}

.product-card {
    display: grid;
    gap: var(--space-4);
    grid-template-areas:"pdb pdb" "media meta" "badges badges" "title title" "details details" "actions actions";
    grid-template-rows:24px 150px 32px 75px auto 65px;
    grid-template-columns:repeat(2, 1fr);
    position: relative;
    padding: var(--space-4);
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
    width: 100%
}

.product-card > .media {
    grid-area: media;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-card > .media img {
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.product-card > .meta {
    grid-area: meta;
    display: flex;
    flex-flow: column;
    gap: var(--space-2);
    align-items: end
}

.product-card > .meta > .brand-slot .brand {
    max-width: 100px;
    -o-object-fit: contain;
    object-fit: contain
}

.product-card > .meta > .delivery-info {
    font-size: var(--font-size-text2);
    display: flex;
    align-items: center;
    gap: 8px
}

.product-card > .meta > .delivery-info > .icon {
    width: 24px
}

.product-card > .meta > .delivery-info > .text {
    width: 100px;
    font-size: 12px
}

.product-card > .meta > .extra-services {
    display: flex;
    gap: 8px;
    align-items: flex-start
}

.product-card > .meta > .extra-services > .text {
    width: 100px;
    font-size: 12px
}

.product-card > .meta > .stars {
    display: flex;
    align-items: center
}

.product-card > .meta > .stars > .star {
    width: var(--icon-size);
    height: var(--icon-size);
    aspect-ratio: 1
}

.product-card .text {
    color: var(--color-text) !important;
    font-size: var(--font-size-text2);
    font-weight: 700
}

.product-card > .pdb {
    grid-area: pdb;
    display: flex;
    justify-content: space-between
}

.product-card > .pdb > a, .product-card > .pdb a:visited, .product-card > .pdb a:active {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    font-style: normal;
    font-weight: 500
}

.product-card > .pdb > a .text, .product-card > .pdb a:visited .text, .product-card > .pdb a:active .text {
    color: inherit !important;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit
}

.product-card > .badges {
    grid-area: badges;
    display: flex;
    gap: var(--space-1)
}

.product-card > .badges .badge {
    border-radius: 8px;
    border: 2px solid var(--color-highlight);
    background: var(--color-base);
    height: 32px;
    margin: auto 0;
    text-align: center;
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-size: var(--font-size-text3);
    font-weight: 500;
    line-height: 16px;
    padding: 0 8px
}

.product-card > .title {
    grid-area: title
}

.product-card > .title > .title-link {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    font-weight: 700;
    text-decoration: none
}

.product-card > .title > .title-link::after {
    content: "";
    position: absolute;
    inset: var(--space-4) var(--space-4) calc(var(--space-4) + 65px) var(--space-4);
    z-index: 1
}

.product-card > .title > .title-link:visited, .product-card > .title > .title-link:hover, .product-card > .title > .title-link:active {
    text-decoration: none
}

.product-card > .details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4)
}

.product-card > .details > .codes {
    font-size: var(--font-size-text3);
    line-height: 150%
}

.product-card > .details > .price-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px
}

.product-card > .details > .price-row > .eek-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    margin-right: auto;
    position: relative;
    z-index: 2
}

.product-card > .details > .price-row > .eek-col > .label {
    display: inline-flex;
    text-decoration: none;
    line-height: 0
}

.product-card > .details > .price-row > .eek-col > .doc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    font-weight: 500;
    text-decoration: underline
}

.product-card > .details > .price-row > .eek-col > .doc > .text {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit
}

.product-card > .details > .price-row > .price {
    text-align: right;
    color: var(--color-highlight);
    font-size: 24px;
    font-weight: 700
}

.product-card > .details > .price-row > .price > .note {
    font-size: var(--font-size-text3);
    color: var(--color-text-secondary);
    font-weight: 400;
    margin: 0
}

.product-card > .actions {
    grid-area: actions;
    position: relative;
    z-index: 2
}

.cart-product-card.-hidden {
    display: none
}

.cart-product-card {
    display: grid;
    gap: var(--space-2);
    grid-template-areas:"media meta" "title title" "details details" "view view";
    grid-template-rows:125px 60px 36px min-content;
    padding: var(--space-4);
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
    width: 100%
}

.cart-product-card > .media {
    grid-area: media
}

.cart-product-card > .media img {
    max-height: 125px
}

.cart-product-card > .meta {
    grid-area: meta;
    display: flex;
    flex-flow: column;
    gap: var(--space-2);
    align-items: end
}

.cart-product-card > .meta .put_in_basket > .action {
    border: none;
    height: 56px;
    padding: 16px;
    border-radius: 16px;
    background: var(--color-highlight)
}

.cart-product-card > .meta .put_in_basket > .action:hover {
    filter: brightness(0.95);
    cursor: pointer
}

.cart-product-card > .meta .put_in_basket > .action:active {
    filter: brightness(0.85)
}

.cart-product-card > .meta > .delivery-info {
    font-size: var(--font-size-text2);
    display: flex;
    align-items: center;
    gap: 15px
}

.cart-product-card > .meta > .delivery-info > .icon {
    width: 24px
}

.cart-product-card > .meta > .delivery-info > .text {
    color: var(--color-text) !important;
    font-size: var(--font-size-text2);
    font-weight: 700
}

.cart-product-card > .meta > .price {
    grid-area: price;
    justify-self: end;
    color: var(--color-highlight);
    font-size: 24px;
    font-weight: 700
}

.cart-product-card > .title {
    grid-area: title;
    line-height: 100%
}

.cart-product-card > .title > .title-link {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    font-weight: 700;
    text-decoration: none
}

.cart-product-card > .title > .title-link:visited, .cart-product-card > .title > .title-link:hover, .cart-product-card > .title > .title-link:active {
    text-decoration: none
}

.cart-product-card > .details {
    box-sizing: border-box;
    grid-area: details
}

.cart-product-card > .details > .info > .codes {
    font-size: var(--font-size-text3);
    line-height: 150%
}

.cart-product-card > .view {
    box-sizing: border-box;
    grid-area: view;
    display: flex;
    padding-top: var(--space-1)
}

.cart-product-card > .view > .button-view {
    display: flex;
    height: 42px;
    min-height: 42px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    color: var(--color-text);
    text-decoration: none
}

.cart-product-card > .view > .button-view:visited, .cart-product-card > .view > .button-view:hover, .cart-product-card > .view > .button-view:active {
    text-decoration: none
}

.cart-product-card > .view > .button-view:hover {
    filter: brightness(0.95)
}

.cart-product-card > .view > .button-view:active {
    filter: brightness(0.85)
}

.cart-product-card > .view > .button-view {
    border-radius: 16px;
    border: 2px solid #000;
    font-size: var(--font-size-text1);
    font-weight: 700;
    background-color: var(--color-base)
}

.cart-product-card > .media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%
}

.cart-product-card > .media > .photo, .cart-product-card > .media > .hero > .photo {
    width: 200px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    -o-object-fit: cover;
    object-fit: cover
}

.product-box {
    --product-media-size: 500px;
    --thumb-size: 64px;
    --thumb-image-size: 53px;
    --dots-size: 12px;
    --dots-gap: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-text);
    width: 100%
}

@media (min-width: 1024px) {
    .product-box {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-5)
    }
}

.product-box > .media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-4);
    margin: 0;
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: hidden
}

@media (min-width: 1024px) {
    .product-box > .media {
        flex: 1 1 0;
        min-width: 0;
        align-self: flex-start;
        align-items: center;
        justify-content: flex-start
    }
}

.product-box > .media > .badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    margin-bottom: var(--space-5)
}

.product-box > .media > .badges > .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-6);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-1);
    border: 2px solid var(--color-text);
    background-color: var(--color-base)
}

.product-box > .media > .badges > .badge > .text, .product-box > .media > .badges > .badge > .text-bold {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text2);
    white-space: nowrap
}

.product-box > .media > .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 280px;
    text-decoration: none
}

@media (min-width: 1024px) {
    .product-box > .media > .hero {
        min-height: var(--product-media-size)
    }
}

.product-box > .media > .hero > .photo {
    width: 200px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    -o-object-fit: contain;
    object-fit: contain
}

@media (min-width: 1024px) {
    .product-box > .media > .hero > .photo {
        width: min(100%, var(--product-media-size));
        height: min(100%, var(--product-media-size))
    }
}

.product-box > .media > .thumbs {
    display: none
}

@media (min-width: 1024px) {
    .product-box > .media > .thumbs {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-4);
        width: 100%;
        max-width: calc(var(--thumb-size) * 5 + var(--space-4) * 4);
        margin-inline: auto
    }
}

.product-box > .media > .thumbs .thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--thumb-size);
    height: var(--thumb-size);
    aspect-ratio: 1;
    padding: 5px;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-selection, #d9d9d9);
    background-color: var(--color-base);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease
}

@media (hover: hover)and (pointer: fine) {
    .product-box > .media > .thumbs .thumb:hover {
        border-color: var(--color-text)
    }
}

.product-box > .media > .thumbs .thumb[aria-current=true] {
    border-color: var(--color-text);
    border-width: 2px;
    padding: 4px
}

.product-box > .media > .thumbs .thumb > img {
    display: block;
    width: var(--thumb-image-size);
    height: var(--thumb-image-size);
    border-radius: 3px;
    -o-object-fit: cover;
    object-fit: cover
}

.product-box > .media > .thumbs .thumb.thumb-hidden {
    display: none
}

.product-box > .media > .scroller-wrapper {
    overflow: hidden;
    width: 100%
}

.product-box > .media > .scroller-wrapper > .dots-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: calc(50% - var(--dots-size) / 2);
    box-sizing: border-box;
    scrollbar-width: none
}

.product-box > .media > .scroller-wrapper > .dots-wrapper::-webkit-scrollbar {
    display: none
}

.product-box > .media > .scroller-wrapper > .dots-wrapper > .dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dots-gap);
    max-width: 100%;
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0
}

.product-box > .media > .scroller-wrapper > .dots-wrapper > .dots > .dot {
    width: var(--dots-size);
    height: var(--dots-size);
    border-radius: 50%;
    border: 0;
    background-color: var(--color-selection, #d9d9d9);
    flex: 0 0 var(--dots-size)
}

.product-box > .media > .scroller-wrapper > .dots-wrapper > .dots > .dot[aria-current=true] {
    background-color: var(--color-text)
}

.product-box > .media > .scroller-wrapper > .dots-wrapper.-overflowing {
    justify-content: flex-start;
    width: min(100%, 196px);
    padding-inline: calc(50% - var(--dots-size) / 2)
}

.product-box > .media > .scroller-wrapper > .dots-wrapper.-overflowing > .dots {
    justify-content: flex-start;
    width: -moz-max-content;
    width: max-content;
    max-width: none
}

@media (min-width: 1024px) {
    .product-box > .media > .scroller-wrapper {
        display: none
    }
}

@media (min-width: 1024px) {
    .product-box > .media.has-thumbs, .product-box > .media:has(>.thumbs) {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        align-items: center
    }
}

.product-box > .details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    flex: 1 1 auto;
    width: 100%
}

@media (min-width: 1024px) {
    .product-box > .details {
        justify-content: space-between;
        min-height: 100%
    }
}

.product-box > .head, .product-box > .details > .head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .product-box > .head, .product-box > .details > .head {
        gap: var(--space-5)
    }
}

.product-box > .head > .bar, .product-box > .details > .head > .bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .product-box > .head > .bar, .product-box > .details > .head > .bar {
        display: grid;
        grid-template-columns:1fr auto auto;
        align-items: center;
        gap: var(--space-5)
    }
}

.product-box > .head > .bar > .badges, .product-box > .details > .head > .bar > .badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3)
}

@media (min-width: 1024px) {
    .product-box > .head > .bar > .badges, .product-box > .details > .head > .bar > .badges {
        gap: var(--space-5)
    }
}

.product-box > .head > .bar > .badges > .badge, .product-box > .details > .head > .bar > .badges > .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    height: var(--space-6);
    border-radius: var(--radius-1);
    border: 2px solid var(--color-highlight);
    background-color: var(--color-base)
}

.product-box > .head > .bar > .badges > .badge > .text, .product-box > .head > .bar > .badges > .badge > .text-bold, .product-box > .details > .head > .bar > .badges > .badge > .text, .product-box > .details > .head > .bar > .badges > .badge > .text-bold {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text);
    white-space: nowrap
}

.product-box > .head > .bar > .label, .product-box > .details > .head > .bar > .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    line-height: 0
}

.product-box > .head > .bar > .doc, .product-box > .details > .head > .bar > .doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-5);
    align-self: stretch;
    text-decoration: none;
    color: inherit
}

@media (min-width: 1024px) {
    .product-box > .head > .bar > .doc, .product-box > .details > .head > .bar > .doc {
        display: inline-flex;
        justify-content: flex-start;
        align-self: auto;
        width: auto
    }
}

.product-box > .head > .bar > .doc > .text, .product-box > .details > .head > .bar > .doc > .text {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    text-decoration: underline;
    white-space: nowrap
}

.product-box > .head > .title, .product-box > .details > .head > .title {
    margin: 0
}

.product-box > .head > .title.title-link, .product-box > .head > .title > .title-link, .product-box > .details > .head > .title.title-link, .product-box > .details > .head > .title > .title-link {
    color: inherit;
    text-decoration: none;
    line-height: 130%;
    overflow-wrap: break-word;
    text-wrap: auto
}

.product-box > .head > .title.title-link:visited, .product-box > .head > .title.title-link:hover, .product-box > .head > .title.title-link:active, .product-box > .head > .title > .title-link:visited, .product-box > .head > .title > .title-link:hover, .product-box > .head > .title > .title-link:active, .product-box > .details > .head > .title.title-link:visited, .product-box > .details > .head > .title.title-link:hover, .product-box > .details > .head > .title.title-link:active, .product-box > .details > .head > .title > .title-link:visited, .product-box > .details > .head > .title > .title-link:hover, .product-box > .details > .head > .title > .title-link:active {
    color: inherit;
    text-decoration: none
}

.product-box > .info, .product-box > .details > .info {
    display: grid;
    grid-template-columns:auto 1fr;
    -moz-column-gap: var(--space-4);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    width: 100%
}

.product-box > .info > .price, .product-box > .details > .info > .price {
    grid-column: 1/-1
}

.product-box > .info > .eek-col, .product-box > .details > .info > .eek-col {
    grid-column: 1/-1
}

@media (min-width: 1024px) {
    .product-box > .info, .product-box > .details > .info {
        grid-template-columns:minmax(auto, max-content) minmax(auto, max-content) minmax(auto, max-content) 1fr;
        align-items: start;
        gap: var(--space-5)
    }

    .product-box > .info > .price, .product-box > .details > .info > .price {
        grid-column: auto;
        justify-self: end
    }

    .product-box > .info > .eek-col, .product-box > .details > .info > .eek-col {
        grid-column: auto
    }
}

.product-box > .info > .eek-col, .product-box > .details > .info > .eek-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0
}

.product-box > .info > .eek-col > .label, .product-box > .details > .info > .eek-col > .label {
    display: inline-flex;
    text-decoration: none;
    line-height: 0
}

.product-box > .info > .eek-col > .doc, .product-box > .info > .eek-col > .gpsr, .product-box > .details > .info > .eek-col > .doc, .product-box > .details > .info > .eek-col > .gpsr {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    font-weight: 500;
    text-decoration: underline
}

.product-box > .info > .eek-col > .doc:visited, .product-box > .info > .eek-col > .doc:hover, .product-box > .info > .eek-col > .doc:active, .product-box > .info > .eek-col > .gpsr:visited, .product-box > .info > .eek-col > .gpsr:hover, .product-box > .info > .eek-col > .gpsr:active, .product-box > .details > .info > .eek-col > .doc:visited, .product-box > .details > .info > .eek-col > .doc:hover, .product-box > .details > .info > .eek-col > .doc:active, .product-box > .details > .info > .eek-col > .gpsr:visited, .product-box > .details > .info > .eek-col > .gpsr:hover, .product-box > .details > .info > .eek-col > .gpsr:active {
    color: var(--color-text-secondary)
}

.product-box > .info > .eek-col > .doc > .text, .product-box > .info > .eek-col > .gpsr > .text, .product-box > .details > .info > .eek-col > .doc > .text, .product-box > .details > .info > .eek-col > .gpsr > .text {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit
}

.product-box > .info > .brand-slot, .product-box > .details > .info > .brand-slot {
    min-height: 24px;
    display: flex;
    align-items: flex-start
}

.product-box > .info > .brand-slot > .brand, .product-box > .details > .info > .brand-slot > .brand {
    width: auto;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain
}

.product-box > .info > .meta, .product-box > .details > .info > .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
    text-align: right
}

@media (min-width: 1024px) {
    .product-box > .info > .meta, .product-box > .details > .info > .meta {
        align-items: flex-start;
        text-align: left
    }

    .product-box > .info > .meta > .stars, .product-box > .details > .info > .meta > .stars {
        margin-right: 0
    }
}

.product-box > .info > .meta > .stars, .product-box > .details > .info > .meta > .stars {
    display: flex;
    align-items: center
}

.product-box > .info > .meta > .stars > .star, .product-box > .details > .info > .meta > .stars > .star {
    width: var(--icon-size);
    height: var(--icon-size);
    aspect-ratio: 1
}

.product-box > .info > .meta > .codes, .product-box > .details > .info > .meta > .codes {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.product-box > .info > .extra-services, .product-box > .details > .info > .extra-services {
    font-weight: 700;
    grid-column: 1/3;
    display: flex;
    white-space: nowrap
}

@media (min-width: 1024px) {
    .product-box > .info > .extra-services, .product-box > .details > .info > .extra-services {
        grid-column: 1/3
    }
}

@media (max-width: calc(1024px - 1px)) {
    .product-box > .info > .extra-services, .product-box > .details > .info > .extra-services {
        order: 2
    }
}

.product-box > .info > .lieferzeit, .product-box > .details > .info > .lieferzeit {
    font-weight: 700;
    display: flex;
    flex-flow: column
}

@media (min-width: 1024px) {
    .product-box > .info > .lieferzeit, .product-box > .details > .info > .lieferzeit {
        grid-column: 3/5;
        text-align: right;
        justify-self: end
    }
}

@media (max-width: calc(1024px - 1px)) {
    .product-box > .info > .lieferzeit, .product-box > .details > .info > .lieferzeit {
        grid-column: 1/3;
        order: 1
    }
}

.product-box > .info .lieferzeit img, .product-box > .info .extra-services img, .product-box > .details > .info .lieferzeit img, .product-box > .details > .info .extra-services img {
    display: inline;
    vertical-align: middle;
    margin-right: 8px
}

.product-box > .info > .price, .product-box > .details > .info > .price {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
    width: 100%
}

@media (min-width: 1024px) {
    .product-box > .info > .price, .product-box > .details > .info > .price {
        width: auto;
        align-items: flex-end
    }
}

.product-box > .info > .price > .amount, .product-box > .details > .info > .price > .amount {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-highlight);
    letter-spacing: -0.02em;
    white-space: nowrap
}

@media (min-width: 1024px) {
    .product-box > .info > .price > .amount, .product-box > .details > .info > .price > .amount {
        font-size: var(--product-price-size, 32px)
    }
}

.product-box > .info > .price > .note, .product-box > .details > .info > .price > .note {
    margin: 0;
    font-size: var(--font-size-text2);
    line-height: 0;
    color: var(--color-text-secondary);
    text-align: right
}

.product-box > .info > .price > .note a, .product-box > .details > .info > .price > .note a {
    color: var(--color-text-secondary)
}

.product-box > .info > .price > .note a:hover, .product-box > .details > .info > .price > .note a:hover {
    text-decoration: none
}

.product-box > .info > .price > .avail, .product-box > .details > .info > .price > .avail {
    display: flex;
    align-items: center;
    gap: var(--space-3)
}

.product-box > .info > .price > .avail > .icon, .product-box > .details > .info > .price > .avail > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.product-box > .info > .price > .avail > .text, .product-box > .details > .info > .price > .avail > .text {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    white-space: nowrap
}

.product-box > .actions, .product-box > .details > .actions {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-5);
    margin-top: 0
}

@media (min-width: 1024px) {
    .product-box > .actions > .quantity-picker, .product-box > .details > .actions > .quantity-picker {
        align-self: auto
    }
}

.product-box > .actions > .action, .product-box > .details > .actions > .action {
    --btn-anim-fade: 500ms;
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.product-box > .actions > .action:focus-visible, .product-box > .details > .actions > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .product-box > .actions > .action:active, .product-box > .details > .actions > .action:active {
        transform: translateY(1px)
    }
}

.product-box > .actions > .action, .product-box > .details > .actions > .action {
    background-color: var(--color-highlight);
    color: var(--color-base);
    gap: var(--button-gap);
    padding-inline: var(--space-4);
    width: 100%
}

@media (min-width: 1024px) {
    .product-box > .actions > .action, .product-box > .details > .actions > .action {
        flex: 1 1 auto;
        max-width: none
    }
}

.product-box > .actions > .action > .icon, .product-box > .details > .actions > .action > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.product-box > .actions > .action > .text, .product-box > .details > .actions > .action > .text {
    color: var(--color-base)
}

.product-box > .actions > .action, .product-box > .details > .actions > .action {
    position: relative;
    overflow: hidden;
    transition: none
}

.product-box > .actions > .action::after, .product-box > .details > .actions > .action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-size);
    height: var(--icon-size);
    opacity: 0;
    pointer-events: none;
    transition: none;
    -webkit-mask: url("/assets/icons/toast-checkmark.svg") no-repeat center/contain;
    mask: url("/assets/icons/toast-checkmark.svg") no-repeat center/contain;
    background: #fff
}

.product-box > .actions > .action > .text, .product-box > .actions > .action > .logo, .product-box > .actions > .action > .icon, .product-box > .details > .actions > .action > .text, .product-box > .details > .actions > .action > .logo, .product-box > .details > .actions > .action > .icon {
    opacity: 1;
    transition: none
}

.product-box > .actions > .action.is-adding, .product-box > .details > .actions > .action.is-adding {
    transition: background-color var(--btn-anim-fade) ease;
    background-color: var(--color-confirm);
    pointer-events: none
}

.product-box > .actions > .action.is-adding::after, .product-box > .details > .actions > .action.is-adding::after {
    opacity: 1;
    transition: opacity var(--btn-anim-fade) ease
}

.product-box > .actions > .action.is-adding > .text, .product-box > .actions > .action.is-adding > .logo, .product-box > .actions > .action.is-adding > .icon, .product-box > .details > .actions > .action.is-adding > .text, .product-box > .details > .actions > .action.is-adding > .logo, .product-box > .details > .actions > .action.is-adding > .icon {
    opacity: 0;
    transition: opacity var(--btn-anim-fade) ease
}

@media (prefers-reduced-motion: reduce) {
    .product-box > .actions > .action, .product-box > .actions > .action::after, .product-box > .actions > .action > .text, .product-box > .actions > .action > .logo, .product-box > .actions > .action > .icon, .product-box > .details > .actions > .action, .product-box > .details > .actions > .action::after, .product-box > .details > .actions > .action > .text, .product-box > .details > .actions > .action > .logo, .product-box > .details > .actions > .action > .icon {
        transition: none !important
    }
}

.product-box .product-grid {
    display: grid;
    gap: 24px;
    margin: 25px 0;
    grid-template-columns:repeat(4, 1fr)
}

@media (max-width: calc(1024px - 1px)) {
    .product-box .product-grid {
        grid-template-columns:1fr
    }
}

.product-box > .details {
    padding: var(--space-4);
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    justify-content: flex-start
}

@media (min-width: 1024px) {
    .product-box > .details {
        flex: 1 1 0;
        min-width: 0;
        align-self: flex-start;
        justify-content: flex-start
    }
}

.product-box > .details > .head, .product-box > .details > .manufacturer-row, .product-box > .details > .purchase-row, .product-box > .details > .service-row, .product-box > .details > .delivery-row {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-selection, #d9d9d9)
}

.product-box > .details > .head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5)
}

.product-box > .details > .head > .title {
    flex: 1 1 auto;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: 0
}

.product-box > .details > .head > .share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--space-6);
    height: var(--space-6);
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0);
    color: var(--color-text);
    cursor: pointer
}

.product-box > .details > .head > .share > .icon {
    width: 18px;
    height: 20px
}

.product-box > .details > .manufacturer-row, .product-box > .details > .purchase-row, .product-box > .details > .delivery-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    width: 100%
}

.product-box > .details > .manufacturer-row > .brand-slot {
    min-height: 24px;
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto
}

.product-box > .details > .manufacturer-row > .brand-slot > .brand {
    width: auto;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain
}

.product-box > .details > .manufacturer-row > .product-data {
    flex: 0 0 auto;
    text-align: right
}

.product-box > .details > .manufacturer-row > .product-data > .codes {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.product-box > .details > .purchase-row > .eek-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto
}

.product-box > .details > .purchase-row > .eek-col > .label {
    display: inline-flex;
    text-decoration: none;
    line-height: 0
}

.product-box > .details > .purchase-row > .eek-col > .doc, .product-box > .details > .purchase-row > .eek-col > .gpsr {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    text-decoration: underline
}

.product-box > .details > .purchase-row > .eek-col > .doc:visited, .product-box > .details > .purchase-row > .eek-col > .doc:hover, .product-box > .details > .purchase-row > .eek-col > .doc:active, .product-box > .details > .purchase-row > .eek-col > .gpsr:visited, .product-box > .details > .purchase-row > .eek-col > .gpsr:hover, .product-box > .details > .purchase-row > .eek-col > .gpsr:active {
    color: var(--color-text-secondary)
}

.product-box > .details > .purchase-row > .eek-col > .doc > .text, .product-box > .details > .purchase-row > .eek-col > .gpsr > .text {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit
}

.product-box > .details > .purchase-row > .price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    text-align: right
}

.product-box > .details > .purchase-row > .price > .amount {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-highlight);
    white-space: nowrap
}

@media (max-width: calc(1024px - 1px)) {
    .product-box > .details > .purchase-row > .price > .amount {
        font-size: 36px
    }
}

.product-box > .details > .purchase-row > .price > .note {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    text-align: right
}

.product-box > .details > .purchase-row > .price > .note a, .product-box > .details > .purchase-row > .price .finanzierung-link {
    color: var(--color-text-secondary)
}

@media (max-width: calc(1024px - 1px)) {
    .product-box > .details > .purchase-row > .price > .note .shipping-link {
        display: block
    }
}

.product-box > .details > .service-row {
    width: 100%
}

.product-box > .details > .service-row > .extra-services {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    white-space: nowrap
}

.product-box > .details > .service-row > .extra-services img {
    display: inline;
    vertical-align: middle;
    margin-right: 8px
}

.product-box > .details > .delivery-row > .lieferzeit {
    display: flex;
    flex-flow: column;
    font-weight: var(--font-weight-bold)
}

.product-box > .details > .delivery-row > .lieferzeit img {
    display: inline;
    vertical-align: middle;
    margin-right: 8px
}

.product-box > .details > .delivery-row > .stars {
    display: flex;
    align-items: center;
    flex: 0 0 auto
}

.product-box > .details > .delivery-row > .stars > .star {
    width: var(--icon-size);
    height: var(--icon-size);
    aspect-ratio: 1
}

.product-box.-not-orderable > .media > .badges, .product-box.-not-orderable > .media > .hero, .product-box.-not-orderable > .media > .thumbs, .product-box.-not-orderable > .media > .scroller-wrapper {
    opacity: .48
}

.product-box.-not-orderable > .details > .head, .product-box.-not-orderable > .details > .manufacturer-row, .product-box.-not-orderable > .details > .purchase-row, .product-box.-not-orderable > .details > .service-row {
    color: var(--color-text-secondary)
}

.product-box.-not-orderable > .details > .manufacturer-row .brand, .product-box.-not-orderable > .details > .purchase-row > .eek-col, .product-box.-not-orderable > .details > .purchase-row > .price {
    color: var(--color-text)
}

.product-box.-not-orderable > .details > .head > .share {
    color: var(--color-text-secondary)
}

.product-box.-not-orderable > .details > .delivery-row .stars, .product-box.-not-orderable > .details > .service-row img {
    filter: grayscale(1);
    opacity: .6
}

@media (max-width: calc(1024px - 1px)) {
    .product-box > .head > .bar, .product-box > .details > .head > .bar {
        display: grid;
        grid-template-columns:auto 1fr;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4)
    }

    .product-box > .head > .bar > .badges, .product-box > .details > .head > .bar > .badges {
        grid-column: 1/-1
    }

    .product-box > .head > .bar > .label, .product-box > .details > .head > .bar > .label {
        justify-self: start
    }

    .product-box > .head > .bar > .links, .product-box > .details > .head > .bar > .links {
        justify-self: end
    }
}

.product-box > .head > .bar > .links, .product-box > .details > .head > .bar > .links {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5)
}

.product-box > .head > .bar > .links .gpsr, .product-box > .head > .bar > .links .doc, .product-box > .details > .head > .bar > .links .gpsr, .product-box > .details > .head > .bar > .links .doc {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.product-box > .head > .bar > .links .gpsr > .text, .product-box > .head > .bar > .links .doc > .text, .product-box > .details > .head > .bar > .links .gpsr > .text, .product-box > .details > .head > .bar > .links .doc > .text {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    text-decoration: underline;
    white-space: nowrap
}

@media (min-width: 1024px) {
    .product-box > .info, .product-box > .details > .info {
        grid-template-columns:minmax(auto, max-content) minmax(auto, max-content) minmax(auto, max-content) minmax(230px, auto)
    }
}

.product-box > .info > .price > .finanzierung .finanzierung-link, .product-box > .details > .info > .price > .finanzierung .finanzierung-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    transition: -webkit-text-decoration .2s ease;
    transition: text-decoration .2s ease;
    transition: text-decoration .2s ease, -webkit-text-decoration .2s ease
}

.product-box > .info > .price > .finanzierung .finanzierung-link:hover, .product-box > .details > .info > .price > .finanzierung .finanzierung-link:hover {
    text-decoration: none
}

.product-box > .info > .price > .finanzierung .finanzierung-link > span, .product-box > .details > .info > .price > .finanzierung .finanzierung-link > span {
    color: inherit
}

.product-box > .actions > .action > .icon, .product-box > .actions > .action > .logo {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

@media (max-width: calc(1024px - 1px)) {
    .product-box {
        display: flex;
        flex-direction: column;
        gap: var(--space-5)
    }

    .product-box > .details {
        display: flex
    }

    .product-box > .actions > .action > .text, .product-box > .details > .actions > .action > .text {
        display: none
    }

    .product-box > .actions, .product-box > .details > .actions {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }

    .product-box > .actions > .quantity-picker, .product-box > .details > .actions > .quantity-picker {
        flex: 0 0 auto
    }

    .product-box > .actions > .action, .product-box > .details > .actions > .action {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none
    }
}

@media (min-width: 1024px) {
    .product-box {
        display: flex
    }

    .product-box > .details {
        display: flex
    }
}

@media (min-width: 1024px) {
    .product-box > .actions, .product-box > .details > .actions {
        flex-wrap: wrap;
        align-items: flex-start
    }
}

@media (min-width: 1024px) {
    .product-box > .actions > .quantity-picker, .product-box > .details > .actions > .quantity-picker {
        flex: 0 0 auto
    }
}

@media (min-width: 1024px) {
    .product-box > .actions > .action, .product-box > .details > .actions > .action {
        flex: 1 1 auto;
        max-width: calc(100% - 177px)
    }
}

.product-box > .actions.-disabled .quantity-picker, .product-box > .actions.-disabled > .action, .product-box > .details > .actions.-disabled .quantity-picker, .product-box > .details > .actions.-disabled > .action {
    filter: grayscale(1)
}

.product-box > .actions.-disabled .quantity-picker, .product-box > .details > .actions.-disabled .quantity-picker {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary)
}

.product-box > .actions.-disabled .quantity-picker__button, .product-box > .actions.-disabled .quantity-picker__input, .product-box > .actions.-disabled > .action, .product-box > .details > .actions.-disabled .quantity-picker__button, .product-box > .details > .actions.-disabled .quantity-picker__input, .product-box > .details > .actions.-disabled > .action {
    cursor: not-allowed
}

.product-box > .actions.-disabled > .action, .product-box > .details > .actions.-disabled > .action {
    background-color: var(--color-selection, #d9d9d9);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-1)
}

.product-box > .actions.-disabled > .action > .text, .product-box > .details > .actions.-disabled > .action > .text {
    color: var(--color-text-secondary)
}

.product-box > .actions.-disabled > .action > .logo, .product-box > .details > .actions.-disabled > .action > .logo {
    filter: grayscale(1);
    opacity: .8
}

.product-box > .actions .paypal-row, .product-box > .details > .actions .paypal-row {
    width: 100%
}

@media (min-width: 1024px) {
    .product-box > .actions .paypal-row .later, .product-box > .details > .actions .paypal-row .later {
        padding-left: 50%
    }

    .product-box > .actions .paypal-row .direct, .product-box > .details > .actions .paypal-row .direct {
        height: 55px !important
    }
}

.product-box > .actions .paypal-row .direct, .product-box > .details > .actions .paypal-row .direct {
    height: 140px;
    overflow: hidden
}

.product-box > .actions .paypal-row .later, .product-box > .details > .actions .paypal-row .later {
    height: 50px;
    width: 100%;
    margin: 5px;
    overflow: hidden
}

.product-box > .actions .payment-methods, .product-box > .details > .actions .payment-methods {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    width: 100%
}

@media (min-width: 1024px) {
    .product-box > .actions .payment-methods, .product-box > .details > .actions .payment-methods {
        grid-template-columns:repeat(6, minmax(0, 1fr))
    }
}

.product-box > .actions .payment-methods img, .product-box > .details > .actions .payment-methods img {
    width: 100%;
    min-width: 0;
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 10px;
    padding: 8px;
    display: block;
    background-color: var(--color-bg)
}

.product-box > .actions .payment-methods img.americanexpress, .product-box > .details > .actions .payment-methods img.americanexpress {
    background-color: #0077a6
}

.sticky-cta {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    box-shadow: var(--shadow-elevated);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    position: fixed;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    left: var(--page-padding-x);
    right: var(--page-padding-x)
}

@media (min-width: 1024px) {
    .sticky-cta {
        display: none !important
    }
}

.sticky-cta > .actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    width: 100%
}

.sticky-cta > .actions > .action {
    --btn-anim-fade: 500ms;
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.sticky-cta > .actions > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .sticky-cta > .actions > .action:active {
        transform: translateY(1px)
    }
}

.sticky-cta > .actions > .action {
    background-color: var(--color-highlight);
    color: var(--color-base);
    gap: var(--button-gap);
    padding-inline: var(--space-4);
    flex: 1 1 auto
}

.sticky-cta > .actions > .action > .logo {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.sticky-cta > .actions > .action > .text {
    color: var(--color-base)
}

.sticky-cta > .actions > .action {
    position: relative;
    overflow: hidden;
    transition: none
}

.sticky-cta > .actions > .action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-size);
    height: var(--icon-size);
    opacity: 0;
    pointer-events: none;
    transition: none;
    -webkit-mask: url("/assets/icons/toast-checkmark.svg") no-repeat center/contain;
    mask: url("/assets/icons/toast-checkmark.svg") no-repeat center/contain;
    background: #fff
}

.sticky-cta > .actions > .action > .text, .sticky-cta > .actions > .action > .logo, .sticky-cta > .actions > .action > .icon {
    opacity: 1;
    transition: none
}

.sticky-cta > .actions > .action.is-adding {
    transition: background-color var(--btn-anim-fade) ease;
    background-color: var(--color-confirm);
    pointer-events: none
}

.sticky-cta > .actions > .action.is-adding::after {
    opacity: 1;
    transition: opacity var(--btn-anim-fade) ease
}

.sticky-cta > .actions > .action.is-adding > .text, .sticky-cta > .actions > .action.is-adding > .logo, .sticky-cta > .actions > .action.is-adding > .icon {
    opacity: 0;
    transition: opacity var(--btn-anim-fade) ease
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta > .actions > .action, .sticky-cta > .actions > .action::after, .sticky-cta > .actions > .action > .text, .sticky-cta > .actions > .action > .logo, .sticky-cta > .actions > .action > .icon {
        transition: none !important
    }
}

.product-sticky-cta {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    box-shadow: var(--shadow-elevated);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    position: fixed;
    bottom: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    left: var(--page-padding-x);
    right: var(--page-padding-x);
    transform: scale(0.95);
    transition: transform .2s ease
}

@media (min-width: 1024px) {
    .product-sticky-cta {
        display: none !important
    }
}

.product-sticky-cta.show {
    display: flex;
    transform: scale(1)
}

.product-sticky-cta > .price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%
}

.product-sticky-cta > .price > .amount {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-highlight);
    letter-spacing: -0.02em;
    white-space: nowrap
}

.product-sticky-cta > .actions > .quantity-picker {
    flex-shrink: 0
}

.top-products {
    display: grid;
    gap: 24px
}

.top-products.-expandable > .product-wrapper.-hidden {
    display: none
}

.top-products.-expandable.is-expanded > .product-wrapper.-hidden {
    display: block
}

.top-products > .action.show-all-products {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.top-products > .action.show-all-products:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .top-products > .action.show-all-products:active {
        transform: translateY(1px)
    }
}

.top-products > .action.show-all-products {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

@media (hover: hover)and (pointer: fine) {
    .top-products > .action.show-all-products:hover > .text {
        text-decoration: underline
    }
}

.top-products > .action.show-all-products > .text {
    pointer-events: none
}

@media (min-width: 1024px) {
    .top-products > .action.show-all-products {
        display: flex;
        width: var(--module-size);
        max-width: var(--module-size)
    }
}

.top-products > .product-wrapper + .action.show-all-products, .top-products > .product-card + .action.show-all-products {
    margin-top: var(--space-4)
}

@media (min-width: 1024px) {
    .top-products {
        grid-template-columns:repeat(3, 1fr)
    }

    .top-products.-full-row {
        grid-template-columns:repeat(4, 1fr)
    }

    .top-products > .product-wrapper + .action.show-all-products, .top-products > .product-card + .action.show-all-products {
        margin-top: var(--space-5)
    }
}

@media (max-width: calc(1024px - 1px)) {
    .top-products {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: calc(768px - 1px)) {
    .top-products {
        grid-template-columns:1fr
    }
}

.listing-filter {
    display: block
}

@media (max-width: calc(1024px - 1px)) {
    .listing-filter {
        display: none
    }
}

.listing-filter > .sort-dropdown {
    margin-bottom: var(--space-5)
}

.listing-filter > .sort-dropdown > .sort-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.listing-filter > .sort-dropdown > .sort-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .listing-filter > .sort-dropdown > .sort-button:active {
        transform: translateY(1px)
    }
}

.listing-filter > .sort-dropdown > .sort-button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%;
    justify-content: space-between;
    box-shadow: var(--shadow-1);
    background: var(--color-bg);
    padding: var(--space-4);
    border-radius: var(--radius-2)
}

@media (hover: hover)and (pointer: fine) {
    .listing-filter > .sort-dropdown > .sort-button:hover > .text {
        text-decoration: underline
    }
}

.listing-filter > .sort-dropdown > .sort-button > .text {
    color: var(--color-text);
    pointer-events: none;
    text-align: left;
    flex: 1
}

.listing-filter > .sort-dropdown > .sort-button > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    transform: rotate(-90deg)
}

.listing-filter > .sort-dropdown > .sort-options {
    display: none;
    background: var(--color-bg);
    padding: var(--space-4);
    padding-bottom: var(--space-4);
    flex-direction: column;
    gap: var(--space-5)
}

.listing-filter > .sort-dropdown > .sort-options > .sort-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text)
}

.listing-filter > .sort-dropdown > .sort-options > .sort-option > .label {
    flex: 1
}

.listing-filter > .sort-dropdown > .sort-options > .sort-option > .checkmark {
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    visibility: hidden
}

@media (hover: hover)and (pointer: fine) {
    .listing-filter > .sort-dropdown > .sort-options > .sort-option:hover > .label {
        text-decoration: underline
    }
}

.listing-filter > .sort-dropdown > .sort-options > .sort-option.-selected > .checkmark {
    visibility: visible;
    color: var(--color-text)
}

.listing-filter > .sort-dropdown.-open > .sort-button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    box-shadow: none
}

.listing-filter > .sort-dropdown.-open > .sort-options {
    display: flex;
    border: 2px solid var(--color-border-strong);
    border-top: none;
    border-bottom-left-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);
    box-shadow: var(--shadow-1)
}

.listing-filter > .sort-dropdown.-open > .sort-button > .chevron {
    transform: rotate(0deg)
}

.listing-filter > .filter-toggle, .listing-filter > [data-listing-filter-mount] > .filter-toggle, .listing-filter > #filters-container-new > .filter-toggle {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.listing-filter > .filter-toggle:focus-visible, .listing-filter > [data-listing-filter-mount] > .filter-toggle:focus-visible, .listing-filter > #filters-container-new > .filter-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .listing-filter > .filter-toggle:active, .listing-filter > [data-listing-filter-mount] > .filter-toggle:active, .listing-filter > #filters-container-new > .filter-toggle:active {
        transform: translateY(1px)
    }
}

.listing-filter > .filter-toggle, .listing-filter > [data-listing-filter-mount] > .filter-toggle, .listing-filter > #filters-container-new > .filter-toggle {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-4);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--space-5);
    background-color: var(--color-bg);
    border: 2px solid var(--color-text);
    color: var(--color-text)
}

@media (hover: hover)and (pointer: fine) {
    .listing-filter > .filter-toggle:hover > .button-content > .text, .listing-filter > [data-listing-filter-mount] > .filter-toggle:hover > .button-content > .text, .listing-filter > #filters-container-new > .filter-toggle:hover > .button-content > .text {
        text-decoration: underline
    }
}

.listing-filter > .filter-toggle:focus-visible, .listing-filter > [data-listing-filter-mount] > .filter-toggle:focus-visible, .listing-filter > #filters-container-new > .filter-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.listing-filter > .filter-toggle > .button-content, .listing-filter > [data-listing-filter-mount] > .filter-toggle > .button-content, .listing-filter > #filters-container-new > .filter-toggle > .button-content {
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.listing-filter > .filter-toggle > .button-content > .icon, .listing-filter > [data-listing-filter-mount] > .filter-toggle > .button-content > .icon, .listing-filter > #filters-container-new > .filter-toggle > .button-content > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    filter: brightness(0)
}

.listing-filter > .filter-toggle > .button-content > .text, .listing-filter > [data-listing-filter-mount] > .filter-toggle > .button-content > .text, .listing-filter > #filters-container-new > .filter-toggle > .button-content > .text {
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    pointer-events: none
}

.listing-filter > .filter-toggle > .badge, .listing-filter > [data-listing-filter-mount] > .filter-toggle > .badge, .listing-filter > #filters-container-new > .filter-toggle > .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-size);
    height: var(--icon-size);
    padding: 0 var(--space-2);
    background-color: var(--color-selection);
    color: var(--color-text);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center;
    padding: var(--space-1);
    background-color: var(--color-highlight);
    color: var(--color-base)
}

.listing-filter > .filter-toggle.-active, .listing-filter > [data-listing-filter-mount] > .filter-toggle.-active, .listing-filter > #filters-container-new > .filter-toggle.-active {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-base)
}

.listing-filter > .filter-toggle.-active > .button-content > .icon, .listing-filter > [data-listing-filter-mount] > .filter-toggle.-active > .button-content > .icon, .listing-filter > #filters-container-new > .filter-toggle.-active > .button-content > .icon {
    filter: brightness(0) invert(1)
}

.listing-filter > .filters-container, .listing-filter > [data-listing-filter-mount] > .filters-container, .listing-filter > #filters-container-new > .filters-container {
    display: none;
    flex-direction: column;
    gap: var(--space-4)
}

.listing-filter > .filters-container.-visible, .listing-filter > [data-listing-filter-mount] > .filters-container.-visible, .listing-filter > #filters-container-new > .filters-container.-visible {
    display: flex
}

.listing-filter > .filters-container > .filter-section, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section, .listing-filter > #filters-container-new > .filters-container > .filter-section {
    --card-padding: var(--space-4);
    --card-gap: var(--space-4);
    overflow: visible
}

.listing-filter > .filters-container > .filter-section > .filter-header, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-header, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer
}

@media (hover: hover)and (pointer: fine) {
    .listing-filter > .filters-container > .filter-section > .filter-header:hover > .title, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-header:hover > .title, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-header:hover > .title {
        text-decoration: underline
    }
}

.listing-filter > .filters-container > .filter-section > .filter-header > .title, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-header > .title, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-header > .title {
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: 1.45;
    color: var(--color-text)
}

.listing-filter > .filters-container > .filter-section > .filter-header > .header-actions, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-header > .header-actions, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-header > .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4)
}

.listing-filter > .filters-container > .filter-section > .filter-header > .header-actions > .badge, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-header > .header-actions > .badge, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-header > .header-actions > .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-size);
    height: var(--icon-size);
    padding: 0 var(--space-2);
    background-color: var(--color-selection);
    color: var(--color-text);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center;
    padding: var(--space-1);
    background-color: var(--color-highlight);
    color: var(--color-base)
}

.listing-filter > .filters-container > .filter-section > .filter-header > .header-actions > .chevron, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-header > .header-actions > .chevron, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-header > .header-actions > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.listing-filter > .filters-container > .filter-section > .filter-items, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow: visible
}

.listing-filter > .filters-container > .filter-section > .filter-items > .legacy-list, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .legacy-list, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .legacy-list {
    display: none
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    overflow: visible
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option {
    justify-content: flex-start;
    cursor: default
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
    cursor: pointer;
    position: relative
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkmark, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkmark, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkmark {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid var(--color-selection);
    border-radius: 5px;
    background: var(--color-base)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:focus-visible + .checkmark, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:focus-visible + .checkmark, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:focus-visible + .checkmark {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkmark::after, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkmark::after, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 10px;
    height: 6px;
    border: solid var(--color-base);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    display: none
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:checked + .checkmark, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:checked + .checkmark, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:checked + .checkmark {
    background-color: var(--color-text);
    border-color: var(--color-text)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:checked + .checkmark::after, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:checked + .checkmark::after, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .checkbox-input:checked + .checkmark::after {
    display: block
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .label, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .label, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .label {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    text-align: left
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .quantity, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .quantity, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option > .option-control > .quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-size);
    height: var(--icon-size);
    padding: 0 var(--space-2);
    background-color: var(--color-selection);
    color: var(--color-text);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center;
    margin-left: auto;
    flex-shrink: 0
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item > .count, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item > .count, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item > .count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-size);
    height: var(--icon-size);
    padding: 0 var(--space-2);
    background-color: var(--color-selection);
    color: var(--color-text);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center
}

@media (hover: hover)and (pointer: fine) {
    .listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option:hover > .option-control > .checkmark, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option:hover > .option-control > .checkmark, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.checkbox-option:hover > .option-control > .checkmark {
        border-color: var(--color-text)
    }

    .listing-filter > .filters-container > .filter-section > .filter-items > .filter-item:hover > .option-control > .label, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item:hover > .option-control > .label, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item:hover > .option-control > .label {
        text-decoration: underline
    }
}

.listing-filter > .filters-container > .filter-section > .filter-items .listing-filter__info-tooltip, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items .listing-filter__info-tooltip, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items .listing-filter__info-tooltip {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 auto;
    vertical-align: top;
    transform: translateY(-0.32rem)
}

.listing-filter > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    color: var(--color-text);
    cursor: help
}

.listing-filter > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger > .icon, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger > .icon, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger > .icon {
    display: block;
    width: .9rem;
    height: .9rem;
    filter: brightness(0)
}

.listing-filter > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger.-fallback-text, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger.-fallback-text, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger.-fallback-text {
    font-family: var(--font-sans);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-bold);
    line-height: 1
}

.listing-filter > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger:focus-visible, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger:focus-visible, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items .listing-filter__info-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter {
    cursor: default;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider {
    position: relative;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-border-weak);
    overflow: visible
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider_handle.-dragging, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider_handle.-dragging, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider_handle.-dragging {
    cursor: grabbing
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider-range, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider-range, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background-color: var(--color-highlight);
    border-radius: inherit;
    width: 0;
    left: 0;
    z-index: 1;
    pointer-events: none
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider_handle, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider_handle, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter > .slider .slider_handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--color-text);
    border: 2px solid var(--color-text);
    box-shadow: 0 4px 8px rgba(17, 24, 39, .25);
    cursor: grab;
    touch-action: none;
    z-index: 2
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter-range-summary, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter-range-summary, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter-range-summary {
    text-align: center;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-top: var(--space-1)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range {
    display: none
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:focus-visible, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:focus-visible, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:active, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:active, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:active {
        transform: translateY(1px)
    }
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text)
}

.listing-filter > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:hover, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:hover, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > .filter-item.range-filter .filter_range_form .filter_range_button:hover {
    background-color: var(--color-text);
    color: var(--color-base)
}

.listing-filter > .filters-container > .filter-section > .filter-items > ul, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > ul, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.listing-filter > .filters-container > .filter-section > .filter-items > ul > li > a.feature, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > ul > li > a.feature, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > ul > li > a.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium)
}

.listing-filter > .filters-container > .filter-section > .filter-items > ul > li > a.feature.selected, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > ul > li > a.feature.selected, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > ul > li > a.feature.selected {
    color: var(--color-text)
}

.listing-filter > .filters-container > .filter-section > .filter-items > ul > li > a.feature > span, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section > .filter-items > ul > li > a.feature > span, .listing-filter > #filters-container-new > .filters-container > .filter-section > .filter-items > ul > li > a.feature > span {
    color: var(--color-text-secondary)
}

.listing-filter > .filters-container > .filter-section.-collapsed > .filter-items, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-collapsed > .filter-items, .listing-filter > #filters-container-new > .filters-container > .filter-section.-collapsed > .filter-items {
    display: none
}

.listing-filter > .filters-container > .filter-section.-collapsed > .filter-header > .header-actions > .chevron, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-collapsed > .filter-header > .header-actions > .chevron, .listing-filter > #filters-container-new > .filters-container > .filter-section.-collapsed > .filter-header > .header-actions > .chevron {
    transform: rotate(-90deg)
}

.listing-filter > .filters-container > .filter-section.-empty, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty {
    opacity: .5;
    pointer-events: none
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-header > .title, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-header > .title, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-header > .title {
    color: var(--color-text-secondary)
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-header > .header-actions > .chevron, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-header > .header-actions > .chevron, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-header > .header-actions > .chevron {
    opacity: .5
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .label, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .label, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .label {
    color: var(--color-text-secondary)
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .checkmark, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .checkmark, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .checkmark {
    border-color: var(--color-border-weak);
    background: var(--color-bg)
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .count, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .count, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .count {
    background-color: var(--color-border-weak);
    color: var(--color-text-secondary)
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .quantity, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .quantity, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-items > .filter-item > .option-control > .quantity {
    background-color: var(--color-border-weak);
    color: var(--color-text-secondary)
}

.listing-filter > .filters-container > .filter-section.-empty > .filter-items > .filter-item:hover > .option-control > .checkmark, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-section.-empty > .filter-items > .filter-item:hover > .option-control > .checkmark, .listing-filter > #filters-container-new > .filters-container > .filter-section.-empty > .filter-items > .filter-item:hover > .option-control > .checkmark {
    border-color: var(--color-border-weak)
}

.listing-filter > .filters-container > .filter-reset, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-reset, .listing-filter > #filters-container-new > .filters-container > .filter-reset {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.listing-filter > .filters-container > .filter-reset:focus-visible, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-reset:focus-visible, .listing-filter > #filters-container-new > .filters-container > .filter-reset:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .listing-filter > .filters-container > .filter-reset:active, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-reset:active, .listing-filter > #filters-container-new > .filters-container > .filter-reset:active {
        transform: translateY(1px)
    }
}

.listing-filter > .filters-container > .filter-reset, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-reset, .listing-filter > #filters-container-new > .filters-container > .filter-reset {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-4);
    box-shadow: var(--shadow-1);
    margin-top: var(--space-5);
    background-color: var(--color-bg);
    border: 2px solid var(--color-text);
    color: var(--color-text)
}

.listing-filter > .filters-container > .filter-reset > .text, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-reset > .text, .listing-filter > #filters-container-new > .filters-container > .filter-reset > .text {
    font-weight: var(--font-weight-bold)
}

.listing-filter > .filters-container > .filter-reset > .badge, .listing-filter > [data-listing-filter-mount] > .filters-container > .filter-reset > .badge, .listing-filter > #filters-container-new > .filters-container > .filter-reset > .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-size);
    height: var(--icon-size);
    padding: 0 var(--space-2);
    background-color: var(--color-selection);
    color: var(--color-text);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center;
    padding: var(--space-1);
    background-color: var(--color-highlight);
    color: var(--color-base)
}

.search-category-filter {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.search-category-filter > .back {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--color-text);
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer
}

.search-category-filter > .back:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-1)
}

.search-category-filter > .back > .chevron-left {
    width: var(--icon-size);
    height: var(--icon-size)
}

.search-category-filter > .divider {
    height: 1px;
    background: var(--color-selection)
}

.search-category-filter > .title {
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin: 0
}

.search-category-filter > .search-term-bubble {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: #c3f4c1;
    border-radius: var(--radius-2);
    border: none;
    width: 100%;
    text-align: left
}

.search-category-filter > .search-term-bubble:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.search-category-filter > .search-term-bubble > .term {
    flex: 1;
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    pointer-events: none
}

.search-category-filter > .search-term-bubble > .close-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    pointer-events: none
}

.search-category-filter > .category-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0
}

.search-category-filter > .category-list > .category-item {
    display: flex;
    align-items: center;
    gap: var(--space-3)
}

.search-category-filter > .category-list > .category-item.-current .name {
    flex: 1;
    color: var(--color-highlight, #DE5A13);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1)
}

.search-category-filter > .category-list > .category-item > .category-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text)
}

@media (hover: hover)and (pointer: fine) {
    .search-category-filter > .category-list > .category-item > .category-link:hover > .name {
        text-decoration: underline
    }
}

.search-category-filter > .category-list > .category-item > .category-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-1)
}

.search-category-filter > .category-list > .category-item > .category-link .name {
    flex: 1;
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.search-category-filter > .category-list > .category-item > .category-link .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.goodie-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: var(--space-4);
    background-color: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: var(--color-text)
}

.goodie-card > .exp {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.goodie-card > .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.goodie-card > .bar > .brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0
}

.goodie-card > .bar > .brand > .logo {
    display: flex;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: 6px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-shrink: 0
}

.goodie-card > .bar > .brand > .logo > .icon {
    display: block;
    width: 50px;
    height: 48px;
    max-width: none
}

.goodie-card > .bar > .brand > .title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1
}

.goodie-card > .bar > .brand > .title-wrap > .title {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word
}

.goodie-card > .bar > .brand > .title-wrap > .category {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    text-overflow: ellipsis;
    white-space: nowrap
}

.goodie-card > .bar > .nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    cursor: pointer
}

.goodie-card > .bar > .nav > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    transition: transform .2s ease
}

.goodie-card > .bar > .nav:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-1)
}

.goodie-card > .body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease
}

.goodie-card > .body > .media {
    position: relative;
    width: 100%;
    margin: 0;
    aspect-ratio: 16/9;
    border-radius: var(--radius-2);
    overflow: hidden;
    background: var(--color-surface-muted)
}

.goodie-card > .body > .media > .iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.goodie-card > .body > .media > .iframe.-desktop {
    display: none
}

.goodie-card > .body > .media > .iframe.-mobile {
    display: block
}

@media (min-width: 1024px) {
    .goodie-card > .body > .media > .iframe.-desktop {
        display: block
    }

    .goodie-card > .body > .media > .iframe.-mobile {
        display: none
    }
}

.goodie-card > .body > .media > .goodie-visual {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    position: relative;
    isolation: isolate
}

.goodie-card > .body > .media > .goodie-visual::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: #de5a13;
    opacity: .2;
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat 68.75% 40%/520px;
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat 68.75% 40%/520px;
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: 0;
    pointer-events: none
}

@media (min-width: 1024px) {
    .goodie-card > .body > .media > .goodie-visual::before {
        -webkit-mask-size: 420px;
        mask-size: 420px
    }
}

.goodie-card > .body > .media > .goodie-visual > .goodie-visual-brand {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 175px
}

.goodie-card > .body > .media > .goodie-visual > .goodie-visual-brand.-xlong > .title {
    font-size: 24px;
    line-height: 1.05
}

.goodie-card > .body > .media > .goodie-visual > .goodie-visual-brand > .logo {
    display: block;
    width: 87px;
    height: auto;
    filter: brightness(0)
}

.goodie-card > .body > .media > .goodie-visual > .goodie-visual-brand > .title {
    color: var(--color-text);
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    hyphens: auto
}

.goodie-card > .body > .media > .goodie-visual > .goodie-visual-brand > .subtitle {
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    word-break: break-word
}

.goodie-card > .body > .media > .goodie-visual > .avatar {
    position: absolute;
    right: -10px;
    bottom: 0;
    z-index: 1;
    width: min(50%, 240px);
    height: 100%;
    pointer-events: none
}

.goodie-card > .body > .media > .goodie-visual > .avatar > .avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom right;
    object-position: bottom right
}

.goodie-card > .body > .desc {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%
}

.goodie-card > .body > .desc > .text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-h3);
    letter-spacing: -0.02em;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

.goodie-card > .body > .desc > .goodie-more-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.goodie-card > .body > .desc > .goodie-more-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .goodie-card > .body > .desc > .goodie-more-btn:active {
        transform: translateY(1px)
    }
}

.goodie-card > .body > .desc > .goodie-more-btn {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%;
    min-height: var(--button-height);
    height: auto;
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    background: var(--color-base);
    text-align: center;
    text-decoration: none
}

@media (hover: hover)and (pointer: fine) {
    .goodie-card > .body > .desc > .goodie-more-btn:hover {
        text-decoration: underline
    }
}

.goodie-card > .exp:checked ~ .body {
    max-height: 1000px;
    margin-top: var(--space-4);
    opacity: 1;
    pointer-events: auto
}

.goodie-card > .exp:checked ~ .bar > .nav > .icon {
    transform: rotate(90deg)
}

.goodie-card > .bar, .goodie-card > .bar *, .goodie-card > .body, .goodie-card > .body * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.goodie-card > .body > .desc > .text, .goodie-card > .body > .desc > .text * {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

.goodies-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center
}

.goodies-list.-no-mb {
    margin-bottom: 0 !important
}

@media (min-width: 1024px) {
    .goodies-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--space-5)
    }

    .goodies-list > .goodie-card {
        width: var(--module-size);
        max-width: var(--module-size);
        flex: 0 0 var(--module-size)
    }
}

@media (min-width: 1024px) {
    .goodies-list.-leaf-grid > .goodie-card {
        width: calc((100% - var(--space-5) * 2) / 3);
        max-width: none;
        flex: 0 0 calc((100% - var(--space-5) * 2) / 3)
    }
}

.goodies-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns:repeat(1, minmax(0, 1fr))
}

@media (min-width: 768px) {
    .goodies-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .goodies-grid {
        gap: var(--space-5);
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

.goodies-grid {
    align-items: stretch;
    width: 100%
}

.goodies-grid > .goodie-card {
    align-self: start
}

.goodie-list-search {
    width: 100%;
    margin: 0 auto var(--space-5)
}

.goodie-list-search > .device-search-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.goodie-list-search .input-wrapper {
    display: flex;
    height: var(--button-height);
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-1);
    background: var(--color-base);
    flex: 1;
    overflow: hidden
}

.goodie-list-search .search-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: var(--button-padding);
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text);
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    flex: 1
}

.goodie-list-search .search-input::-moz-placeholder {
    color: var(--color-text-subtle)
}

.goodie-list-search .search-input::placeholder {
    color: var(--color-text-subtle)
}

.goodie-list-search .goodie-list-search-empty {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.goodie-search-highlight {
    background: rgba(255, 230, 140, .65);
    color: inherit;
    padding: 0
}

.more-goodies-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--button-gap);
    width: 100%;
    height: var(--button-height);
    padding: var(--button-padding);
    border: 0;
    border-radius: var(--button-radius);
    background: var(--color-base);
    box-shadow: var(--shadow-button);
    color: var(--color-text);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    text-align: center;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6);
    cursor: pointer
}

@media (min-width: 1024px) {
    .more-goodies-btn {
        width: var(--module-size);
        max-width: var(--module-size);
        margin-bottom: var(--space-8)
    }
}

.more-goodies-btn > .text {
    display: block
}

@media (hover: hover)and (pointer: fine) {
    .more-goodies-btn:hover > .text {
        text-decoration: underline
    }
}

.more-goodies-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.page-device-search .section + .section {
    margin-top: var(--space-4)
}

.page-device-search ._card {
    --card-padding: var(--space-4);
    position: relative;
    overflow: hidden
}

.page-device-search .pagination {
    margin-top: 0
}

.page-device-search .device-search-empty {
    padding: var(--space-4)
}

.page-device-search .device-search-empty .empty-message {
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text)
}

.page-device-search .device-search-empty .tips {
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.page-device-search .device-search-empty .tips-title {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-device-search .device-search-empty .tips-list {
    margin: 0;
    padding-left: var(--space-5);
    list-style: disc
}

.page-device-search .device-search-empty .tips-list li {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin-bottom: var(--space-2)
}

.page-device-search .device-search-empty .tips-list li:last-child {
    margin-bottom: 0
}

.page-device-search .table-scroll-wrapper {
    max-height: 500px;
    overflow: auto;
    scrollbar-gutter: stable;
    padding-left: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-black) var(--color-bg)
}

.page-device-search .table-scroll-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

.page-device-search .table-scroll-wrapper::-webkit-scrollbar-track {
    background: var(--color-bg);
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-round)
}

.page-device-search .table-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-black);
    border-radius: var(--radius-round);
    border: 0;
    box-shadow: none
}

.page-device-search .table-scroll-wrapper::-webkit-scrollbar-corner {
    background: var(--color-bg)
}

@media (min-width: 1024px) {
    .page-device-search .table-scroll-wrapper {
        max-height: 750px
    }
}

.device-search-widget {
    padding: var(--space-4);
    overflow: visible
}

.device-search-widget .title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3);
    line-height: var(--font-lineheight-h3);
    margin-bottom: var(--space-3)
}

.device-search-widget .description {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1)
}

.device-search-widget form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.device-search-widget .label-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.device-search-widget .label-text {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1)
}

.device-search-widget .inline-details {
    display: inline
}

.device-search-widget .inline-details summary {
    display: inline;
    text-decoration: underline;
    cursor: pointer;
    list-style: none
}

.device-search-widget .inline-details summary::-webkit-details-marker {
    display: none
}

.device-search-widget .inline-details .details-content {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-2)
}

.device-search-widget .device-search-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .device-search-widget .device-search-controls {
        flex-direction: row
    }
}

.device-search-widget .device-search-autocomplete-anchor {
    position: relative;
    flex: 1;
    min-width: 0
}

.device-search-widget .input-wrapper {
    display: flex;
    height: var(--button-height);
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-1);
    background: var(--color-base);
    flex: 1;
    overflow: hidden
}

.device-search-widget .search-input {
    height: 100%;
    padding: var(--button-padding);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-size: var(--font-size-h3);
    line-height: var(--font-lineheight-h3);
    border: 0;
    outline: 0;
    background: rgba(0, 0, 0, 0);
    flex: 1;
    width: 100%;
    min-width: 0
}

.device-search-widget .search-input::-moz-placeholder {
    color: var(--color-text-subtle)
}

.device-search-widget .search-input::placeholder {
    color: var(--color-text-subtle)
}

.device-search-widget .device-search-autocomplete-list {
    margin-top: 0;
    max-height: min(22rem, 50vh);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: var(--shadow-1)
}

.device-search-widget .device-search-autocomplete-anchor:has(.search-input[aria-expanded=true]) .input-wrapper {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none
}

.device-search-widget .device-search-autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

.device-search-widget .device-search-autocomplete-item .primary {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.device-search-widget .device-search-autocomplete-item .primary-action {
    text-decoration: underline
}

.device-search-widget .device-search-autocomplete-item .meta {
    font-size: var(--font-size-text3);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-subtle)
}

.device-search-widget .device-search-submit {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.device-search-widget .device-search-submit:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .device-search-widget .device-search-submit:active {
        transform: translateY(1px)
    }
}

.device-search-widget .device-search-submit {
    background-color: var(--color-highlight);
    color: var(--color-base);
    gap: var(--button-gap);
    width: 100%
}

@media (min-width: 1024px) {
    .device-search-widget .device-search-submit {
        width: var(--module-size);
        flex: 0 0 var(--module-size)
    }
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1)
}

.pagination .pagination-count {
    width: 100%;
    order: 999;
    text-align: center;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary)
}

.pagination > a, .pagination > span:not(.pagination-count) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--color-base);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
    text-decoration: none;
    transition: all .2s ease
}

@media (hover: hover)and (pointer: fine) {
    .pagination > a:hover, .pagination > span:not(.pagination-count):hover {
        text-decoration: underline
    }
}

.pagination > a:focus-visible, .pagination > span:not(.pagination-count):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.pagination > span:not(.pagination-count) {
    background: var(--color-highlight);
    color: var(--color-base);
    font-weight: var(--font-weight-bold);
    pointer-events: none
}

.pagination > a:first-of-type, .pagination > a:last-of-type {
    font-size: 0;
    position: relative;
    width: 40px;
    padding: 0
}

.pagination > a:first-of-type::before, .pagination > a:last-of-type::before {
    content: "";
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.pagination > span:not(.pagination__count) + a:last-of-type {
    display: none
}

.pagination > a:first-of-type::before {
    background-image: url("/assets/icons/chevron-left.svg")
}

.pagination > a:last-of-type::before {
    background-image: url("/assets/icons/chevron-right.svg")
}

.pagination > a:first-of-type[href*="offset=0"], .pagination > a:first-of-type:not([href*=offset]) {
    display: none
}

.promo-container:has(>.promo) > .toast-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden
}

.promo-container:not(:has(>.promo)) > .toast-container {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden
}

.toast-container {
    pointer-events: none !important
}

.toast-container:has(.toast-notification) {
    pointer-events: auto !important
}

.promo-container:has(>.promo) > .toast-container:not(:has(.toast-notification)) {
    z-index: -1
}

.toast-notification {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    height: 56px;
    padding: var(--space-4);
    border-radius: 0;
    box-shadow: none;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1)
}

.toast-notification > .icon, .toast-notification > svg.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.toast-notification > .message {
    flex: 1;
    min-width: 0;
    word-wrap: break-word
}

.toast-notification.-success {
    background-color: var(--color-confirm-box);
    color: var(--color-confirm)
}

.toast-notification.-warning {
    background-color: var(--color-warning-box);
    color: var(--color-warning)
}

.toast-notification.-error {
    background-color: var(--color-error-box);
    color: var(--color-error)
}

.customer-information {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    padding: var(--space-4);
    margin-bottom: var(--space-6)
}

.customer-information__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px
}

.customer-information__text {
    flex: 1;
    color: var(--color-highlight);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5
}

#product-list {
    display: grid;
    grid-gap: 20px
}

.basket-modal-window {
    border-radius: 10px;
    height: unset !important;
    max-width: 708px;
    width: calc(100% - 30px) !important;
    margin: 15px
}

.basket-modal-window .window_content {
    padding-top: 45px !important;
    display: grid;
    gap: 16px;
    overflow-wrap: anywhere;
    word-break: break-word
}

.basket-modal-window .modalWindowInner_scroller {
    margin: 0
}

.basket-modal-window .banner {
    grid-template-columns:24px minmax(0, 1fr);
    border-radius: 16px;
    font-weight: 700;
    display: grid;
    padding: 16px;
    gap: 10px;
    align-self: stretch;
    line-height: var(--font-lineheight-text1);
    overflow-wrap: anywhere
}

.basket-modal-window .banner.success {
    background: var(--color-confirm-box);
    color: var(--color-confirm)
}

.basket-modal-window .banner.success:before {
    content: " ";
    background: url(/assets/check_circle.svg) no-repeat;
    display: inline;
    width: 24px;
    height: 24px;
    background-size: 24px 24px
}

.basket-modal-window .banner.warning {
    background: var(--color-warning-box);
    color: var(--color-warning)
}

.basket-modal-window .banner.warning:before {
    content: " ";
    display: inline;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg class=%27icon%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM8.25 21L3 15.75V8.25L8.25 3H15.75L21 8.25V15.75L15.75 21H8.25ZM9.1 19H14.9L19 14.9V9.1L14.9 5H9.1L5 9.1V14.9L9.1 19Z%27 fill=%27%23EE3616%27/%3E%3C/svg%3E")
}

.basket-modal-window .products .product {
    display: grid;
    gap: 16px;
    grid-template-areas:"image title title" "image details amount" "image lieferzeit amount" "image lieferzeit price";
    grid-template-rows:max-content max-content max-content 1fr
}

.basket-modal-window .products .product > .image {
    grid-area: image;
    max-height: 200px;
    -o-object-fit: contain;
    object-fit: contain
}

.basket-modal-window .products .product > .title {
    grid-area: title;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center
}

.basket-modal-window .products .product > .details {
    grid-area: details;
    font-size: 12px;
    font-weight: 500;
    line-height: var(--font-lineheight-text1)
}

.basket-modal-window .products .product > .lieferzeit {
    grid-area: lieferzeit;
    display: flex;
    place-items: flex-start;
    gap: 5px
}

.basket-modal-window .products .product > .lieferzeit > .text {
    color: var(--color-text) !important;
    font-weight: 700
}

.basket-modal-window .products .product > .amount {
    grid-area: amount;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.basket-modal-window .products .product > .amount form.actions {
    display: flex;
    width: 100%;
    justify-content: flex-end
}

.basket-modal-window .products .product > .amount .quantity-picker {
    align-self: flex-end !important
}

.basket-modal-window .products .product > .price {
    grid-area: price;
    grid-template-rows:max-content max-content 1fr;
    display: grid;
    justify-content: end;
    text-align: right;
    gap: 10px;
    line-height: 100%
}

@media (max-width: calc(1024px - 1px)) {
    .basket-modal-window .products .product {
        grid-template-areas:"title title" "lieferzeit details" "image amount" "image price"
    }

    .basket-modal-window .products .product .details {
        text-align: right
    }

    .basket-modal-window .products .product .price {
        gap: 8px
    }
}

.basket-modal-window .foot {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: var(--space-4)
}

.basket-modal-window .foot .button {
    border-radius: 16px;
    border: 2px solid var(--color-text);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .02), 0 6px 12px 0 rgba(0, 0, 0, .03);
    color: var(--color-text);
    text-decoration: none
}

.basket-modal-window .foot .button:hover {
    text-decoration: none;
    cursor: pointer
}

.basket-modal-window .foot .button {
    display: flex;
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    font-size: var(--font-size-text1);
    font-weight: 700
}

.basket-modal-window .foot .button:not(.proceed):before {
    content: " ";
    -webkit-mask-image: url(/assets/arrow_forward_ios.svg);
    mask-image: url(/assets/arrow_forward_ios.svg);
    background-color: var(--color-text);
    transform: rotate(180deg);
    width: 24px;
    height: 24px
}

.basket-modal-window .foot .button.proceed {
    color: var(--color-base);
    border: 0 solid var(--color-confirm);
    background: var(--color-confirm)
}

.basket-modal-window .foot .button.proceed:after {
    content: " ";
    background: url(/assets/arrow_forward_ios.svg);
    width: 24px;
    height: 24px
}

@media (max-width: calc(1024px - 1px)) {
    .basket-modal-window .foot .button.proceed {
        grid-row: 1
    }
}

@media (max-width: calc(1024px - 1px)) {
    .basket-modal-window .products .product {
        row-gap: 16px;
        -moz-column-gap: 0;
        column-gap: 0
    }

    .basket-modal-window .products .product > .image {
        max-height: 150px
    }

    .basket-modal-window .foot {
        grid-template-columns:1fr
    }
}

.benefits-bar {
    display: grid;
    grid-template-columns:1fr;
    gap: var(--space-4);
    width: 100%
}

.benefits-bar > .item {
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    padding: var(--space-4);
    display: grid;
    grid-template-rows:repeat(3, min-content);
    gap: var(--space-4);
    text-align: left
}

.benefits-bar > .item > .item > .icon {
    width: 64px;
    height: 64px
}

.benefits-bar > .item > .label {
    font-size: 24px;
    font-weight: 700;
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

@media (min-width: 1024px) {
    .benefits-bar {
        grid-template-columns:repeat(5, 1fr);
        gap: var(--gap)
    }
}

.page-category > .sidebar-layout > .primary {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.page-category > .sidebar-layout > .primary > .category-short-description {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4)
}

.page-category > .sidebar-layout > .primary > .category-short-description > .title {
    margin: 0;
    color: var(--color-highlight)
}

.page-category > .sidebar-layout > .primary > .category-short-description > .text {
    margin: 0;
    color: var(--color-text)
}

.page-category > .sidebar-layout > .primary > .category-short-description > .text > * {
    margin: 0
}

.page-category > .sidebar-layout > .primary > .category-short-description > .text > * + * {
    margin-top: var(--space-3)
}

.page-category > .sidebar-layout > .primary > .category-cards-grid {
    display: block
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

@media (min-width: 1024px) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid {
        gap: var(--space-5);
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card {
    box-sizing: border-box;
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    text-decoration: none
}

@media (hover: hover)and (pointer: fine) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card:hover > .name {
        text-decoration: underline
    }
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card > .image {
    display: block;
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    aspect-ratio: 1;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card > .image {
        width: var(--icon-size-xxl);
        height: var(--icon-size-xxl)
    }
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card > .name {
    display: block;
    color: var(--color-text);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto
}

@media (max-width: calc(1024px - 1px)) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > a.card:last-of-type:nth-of-type(odd) {
        grid-column: 1/-1
    }
}

@media (min-width: 1024px) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .card.-extra {
        display: none
    }
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action:active {
        transform: translateY(1px)
    }
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: none;
    width: 100%
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action:hover > .text {
    text-decoration: underline
}

.page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action > .text {
    pointer-events: none
}

@media (min-width: 1024px) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid > .grid > .action {
        display: inline-flex;
        grid-column: 2/span 1;
        justify-self: stretch
    }
}

@media (min-width: 1024px) {
    .page-category > .sidebar-layout > .primary > .category-cards-grid.is-expanded > .grid > .card.-extra {
        display: flex
    }

    .page-category > .sidebar-layout > .primary > .category-cards-grid.is-expanded > .grid > a.card:last-of-type:nth-of-type(odd) {
        grid-column: auto
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-category > .sidebar-layout {
        align-items: stretch
    }

    .page-category > .sidebar-layout > * {
        width: 100%
    }

    .page-category > .sidebar-layout > .sidebar, .page-category > .sidebar-layout > .primary {
        display: contents
    }

    .page-category > .sidebar-layout .category-short-description {
        order: 10
    }

    .page-category > .sidebar-layout .category-cards-grid {
        order: 20
    }

    .page-category > .sidebar-layout .listing-filter {
        order: 40
    }

    .page-category > .sidebar-layout #product-list {
        order: 50
    }

    .page-category > .sidebar-layout .section-title {
        order: 60
    }

    .page-category > .sidebar-layout .goodies-list {
        order: 65
    }

    .page-category > .sidebar-layout .more-goodies-btn {
        order: 66
    }

    .page-category > .sidebar-layout .category-long-description {
        order: 70
    }
}

.page-category #top-products {
    scroll-margin-top: 250px
}

.page-category .device-search-widget {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4)
}

@media (min-width: 1024px) {
    .page-category .device-search-widget {
        margin-top: var(--space-5);
        margin-bottom: 0
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-category .listing-filter {
        display: block
    }
}

.page-category > .goodies-list, .page-category > .sidebar-layout > .primary > .goodies-list {
    margin-bottom: var(--space-6)
}

@media (min-width: 1024px) {
    .page-category > .goodies-list, .page-category > .sidebar-layout > .primary > .goodies-list {
        margin-bottom: var(--space-8)
    }
}

.page-category > .category-long-description, .page-category > .sidebar-layout > .primary > .category-long-description {
    display: block;
    margin-top: var(--space-6)
}

.page-category > .category-long-description > .text, .page-category > .sidebar-layout > .primary > .category-long-description > .text {
    color: var(--color-text)
}

.page-category > .category-long-description > .text > *, .page-category > .sidebar-layout > .primary > .category-long-description > .text > * {
    margin: 0
}

.page-category > .category-long-description > .text > * + *, .page-category > .sidebar-layout > .primary > .category-long-description > .text > * + * {
    margin-top: var(--space-3)
}

@media (min-width: 1024px) {
    .page-category > .category-long-description, .page-category > .sidebar-layout > .primary > .category-long-description {
        margin-top: var(--space-8)
    }
}

.page-category > .section-title, .page-category > .sidebar-layout > .primary > .section-title {
    margin-top: var(--space-6);
    margin-bottom: var(--space-4)
}

@media (min-width: 1024px) {
    .page-category > .section-title, .page-category > .sidebar-layout > .primary > .section-title {
        margin-top: var(--space-8);
        margin-bottom: var(--space-5)
    }
}

.page-category > .listing-filter, .page-category > .sidebar-layout > .primary > .listing-filter, .page-category > .sidebar-layout > .sidebar > .listing-filter {
    margin-block: var(--space-6)
}

@media (min-width: 1024px) {
    .page-category > .listing-filter, .page-category > .sidebar-layout > .primary > .listing-filter, .page-category > .sidebar-layout > .sidebar > .listing-filter {
        margin-block: var(--space-5)
    }
}

@media (max-width: calc(768px - 1px)) {
    .page-home .goodies-list > .goodie-card:nth-child(n+6) {
        display: none
    }
}

.page-home .sidebar-layout > .primary {
    order: -1
}

@media (min-width: 1024px) {
    .page-home .sidebar-layout > .primary {
        order: 0
    }
}

.page-home .sidebar-layout > .sidebar--left, .page-home .sidebar-layout > .sidebar--right {
    display: none
}

.page-home .sidebar-layout > .sidebar--mobile {
    display: block
}

@media (min-width: 1024px) {
    .page-home .sidebar-layout {
        gap: 24px;
        align-items: stretch
    }

    .page-home .sidebar-layout > .sidebar--mobile {
        display: none !important
    }

    .page-home .sidebar-layout > .sidebar--left, .page-home .sidebar-layout > .sidebar--right {
        display: block
    }

    .page-home .sidebar-layout > .sidebar {
        width: 464px;
        min-width: 464px;
        flex: 0 0 464px;
        min-height: 433px;
        display: flex
    }

    .page-home .sidebar-layout > .sidebar > .home-categories {
        flex: 1 1 auto;
        height: 100%
    }

    .page-home .sidebar-layout > .primary {
        align-self: stretch;
        min-height: 433px
    }

    .page-home .sidebar-layout > .primary > .image-banner {
        height: 100%;
        min-height: 433px
    }
}

.page-home .sidebar-layout > .primary > .image-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow)
}

@media (max-width: calc(1024px - 1px)) {
    .page-home .sidebar-layout > .primary > .image-banner {
        height: 342px
    }
}

.page-home .sidebar-layout > .primary > .image-banner .banner {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    animation: 10s slide infinite;
    overflow: hidden
}

.page-home .sidebar-layout > .primary > .image-banner .banner > .viewport {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0)
}

.page-home .sidebar-layout > .primary > .image-banner .banner > .viewport > picture {
    display: block;
    width: 100%;
    height: 100%
}

.page-home .sidebar-layout > .primary > .image-banner .banner > .viewport > .image, .page-home .sidebar-layout > .primary > .image-banner .banner > .viewport > picture > .image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.page-home .sidebar-layout > .primary > .image-banner .banner.banner1 {
    animation-delay: 0s
}

.page-home .sidebar-layout > .primary > .image-banner .banner.banner2 {
    animation-delay: 5s
}

@keyframes slide {
    0% {
        left: 100%;
        opacity: 0
    }
    5%, 45% {
        left: 0;
        opacity: 1
    }
    50% {
        left: -100%;
        opacity: 0
    }
    100% {
        left: -100%;
        opacity: 0
    }
}

@keyframes slide-reviews {
    0% {
        left: 100%;
        opacity: 0
    }
    1.5% {
        left: 0;
        opacity: 1
    }
    31.5% {
        left: 0;
        opacity: 1
    }
    33% {
        left: -100%;
        opacity: 0
    }
    100% {
        left: -100%;
        opacity: 0
    }
}

.page-home > .logo-bar {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent)
}

.page-home > .logo-bar > .scroller {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    gap: var(--logo-scroll-gap);
    animation: home-logo-scroll 30s linear infinite
}

.page-home > .logo-bar > .scroller > .logo {
    height: 40px;
    width: auto;
    max-width: var(--logo-width-max);
    -o-object-fit: contain;
    object-fit: contain
}

@media (hover: hover)and (pointer: fine) {
    .page-home > .logo-bar:hover > .scroller {
        animation-play-state: paused
    }
}

@media (min-width: 1024px) {
    .page-home > .logo-bar {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none
    }

    .page-home > .logo-bar > .scroller {
        animation: none;
        transform: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center
    }
}

.page-home .info-section {
    width: 100%;
    display: block
}

.page-home .info-section h2 {
    margin-bottom: var(--space-5)
}

.page-home .info-section h3 {
    margin-top: var(--space-5)
}

.page-home .info-section p {
    color: var(--color-text);
    margin-bottom: var(--space-5)
}

.page-home .info-section ul {
    margin-bottom: var(--space-5)
}

.page-home .sidebar-layout > .sidebar > .home-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    box-shadow: none
}

.page-home .sidebar-layout > .sidebar > .home-categories > .title {
    font-family: var(--font-sans);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-highlight)
}

.page-home .sidebar-layout > .sidebar > .home-categories > .item {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: var(--color-text)
}

@media (hover: hover)and (pointer: fine) {
    .page-home .sidebar-layout > .sidebar > .home-categories > .item:hover > .name {
        text-decoration: underline
    }
}

.page-home .sidebar-layout > .sidebar > .home-categories > .item > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.page-home .sidebar-layout > .sidebar > .home-categories > .item > .name {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text);
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere
}

.page-home .sidebar-layout > .sidebar > .home-categories > .item > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-left: auto
}

@media (min-width: 1024px) {
    .page-home .sidebar-layout > .sidebar > .home-categories {
        padding: var(--space-4);
        gap: var(--space-5);
        background-color: var(--color-base);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-1)
    }

    .page-home .sidebar-layout > .sidebar > .home-categories > .item {
        padding: 0;
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
        border-radius: 0
    }
}

@media (min-width: 1024px) {
    .page-home .sidebar-layout > .sidebar--right .home-categories > .item > .icon {
        filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(2100%) hue-rotate(191deg) brightness(97%) contrast(105%)
    }

    .page-home .sidebar-layout > .sidebar--right .home-categories > .title {
        color: var(--color-highlight-blue)
    }
}

.page-home > .reviews {
    width: 100%
}

.page-home > .reviews > .panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: stretch
}

.page-home > .reviews > .panel > .review-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px
}

.page-home > .reviews > .panel > .review-box > .logo {
    height: 92px;
    width: auto;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

@media (min-width: 1024px) {
    .page-home > .reviews > .panel {
        flex-direction: row;
        align-items: stretch
    }

    .page-home > .reviews > .panel > .review-box {
        width: var(--module-size);
        min-width: var(--module-size);
        height: var(--module-size);
        flex: 0 0 var(--module-size)
    }

    .page-home > .reviews > .panel > .banner {
        flex: 1 1 auto;
        min-width: 0
    }
}

.page-home > .reviews > .panel > .reviews-slider {
    position: relative;
    width: 100%;
    height: var(--module-size);
    overflow: hidden;
    border-radius: var(--card-radius)
}

.page-home > .reviews > .panel > .reviews-slider > .reviews-banner {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    animation: slide-reviews 24s infinite;
    border-radius: var(--card-radius);
    overflow: hidden
}

.page-home > .reviews > .panel > .reviews-slider > .reviews-banner.slide1 {
    animation-delay: 0s
}

.page-home > .reviews > .panel > .reviews-slider > .reviews-banner.slide2 {
    animation-delay: 8s
}

.page-home > .reviews > .panel > .reviews-slider > .reviews-banner.slide3 {
    animation-delay: 16s
}

.page-home > .reviews > .panel > .reviews-slider > .reviews-banner > picture {
    width: 100%;
    height: 100%;
    display: block
}

.page-home > .reviews > .panel > .reviews-slider > .reviews-banner > picture > .reviews-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    display: block;
    border-radius: var(--card-radius)
}

@media (prefers-reduced-motion: reduce) {
    .page-home > .logo-bar > .scroller {
        animation: none
    }
}

@keyframes home-logo-scroll {
    to {
        transform: translateX(-50%)
    }
}

.page-404 > .image-banner > .viewport {
    position: relative;
    --smiley-size: 700px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(135deg, #e9e9e9 0%, #f1f1f1 100%);
    --smiley-opacity: 1
}

.page-404 > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-404 > .image-banner > .viewport {
        --smiley-size: 700px;
        --smiley-rotation: 45deg;
        --smiley-pos-x: 45%;
        --smiley-pos-y: 100%
    }
}

.page-404 > .image-banner > .viewport {
    height: var(--module-size)
}

@media (max-width: calc(768px - 1px)) {
    .page-404 > .image-banner > .viewport {
        height: unset
    }
}

.page-404 > .image-banner > .viewport {
    background: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1)
}

.page-404 > .image-banner > .viewport > .grid {
    z-index: 1;
    display: grid;
    grid-template-columns:1fr 50%;
    height: 100%
}

@media (max-width: calc(768px - 1px)) {
    .page-404 > .image-banner > .viewport > .grid {
        grid-template-columns:1fr;
        margin-bottom: 20px
    }
}

.page-404 > .image-banner > .viewport > .grid > .image {
    background: url(/assets/404.png) no-repeat center center;
    background-size: contain;
    margin: 25px
}

@media (max-width: calc(768px - 1px)) {
    .page-404 > .image-banner > .viewport > .grid > .image {
        height: 250px;
        margin: 0
    }
}

.page-404 > .image-banner > .viewport > .grid > .content {
    display: grid;
    align-content: center;
    justify-items: center;
    width: 55%;
    justify-self: end;
    padding-inline: var(--space-4);
    color: var(--color-black);
    gap: var(--space-4)
}

@media (max-width: calc(768px - 1px)) {
    .page-404 > .image-banner > .viewport > .grid > .content {
        width: 100%
    }
}

.page-404 > .image-banner > .viewport > .grid > .content > .title {
    margin: 0
}

.page-404 > .image-banner > .viewport > .grid > .content > .title > .label {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.01em
}

.page-404 > .image-banner > .viewport > .grid > .content > .heading-2 {
    margin: 0
}

.page-404 > .image-banner > .viewport > .grid > .content > span:not(.heading-2) {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-404 > .image-banner > .viewport > .grid > .content > .action.primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-404 > .image-banner > .viewport > .grid > .content > .action.primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-404 > .image-banner > .viewport > .grid > .content > .action.primary:active {
        transform: translateY(1px)
    }
}

.page-404 > .image-banner > .viewport > .grid > .content > .action.primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%;
    max-width: var(--button-width)
}

.page-goodies > .goodies-finder, .page-goodies > .goodies-overview {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    width: 100%
}

@media (min-width: 1024px) {
    .page-goodies > .goodies-finder, .page-goodies > .goodies-overview {
        margin-bottom: var(--space-8)
    }
}

.page-goodies > .goodies-finder > .goodies-finder-hero {
    background: var(--color-bg);
    border-radius: var(--radius-2);
    height: 342px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.page-goodies > .goodies-finder .goodies-finder-copy {
    color: var(--color-highlight);
    left: 7.4%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.page-goodies > .goodies-finder .goodies-finder-copy > h1 {
    color: var(--color-highlight);
    font-size: 38px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0 0 var(--space-3)
}

@media (min-width: 1024px) {
    .page-goodies > .goodies-finder .goodies-finder-copy > h1 {
        font-size: 64px
    }
}

.page-goodies > .goodies-finder .goodies-finder-copy > p {
    color: var(--color-highlight);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    margin: 0
}

.page-goodies > .goodies-finder .goodies-finder-union {
    height: 250%;
    opacity: .75;
    position: absolute;
    right: -22%;
    top: 87%;
    transform: translateY(-50%) rotate(-325deg) scaleX(-1);
    width: 75%
}

.page-goodies > .goodies-finder .goodies-finder-tiles {
    height: 304px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 42%;
    object-position: 50% 42%;
    position: absolute;
    right: 7.4%;
    top: 19px;
    width: 528px;
    z-index: 1
}

.page-goodies > .goodies-finder .goodies-finder-search {
    align-items: center;
    border: 2px solid var(--color-highlight);
    border-radius: var(--radius-2);
    display: flex;
    gap: var(--space-4);
    height: 56px;
    padding: 0 var(--space-4);
    width: 100%
}

.page-goodies > .goodies-finder .goodies-finder-search > input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    color: var(--color-text);
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    outline: 0
}

.page-goodies > .goodies-finder .goodies-finder-search > input::-webkit-search-cancel-button, .page-goodies > .goodies-finder .goodies-finder-search > input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none
}

.page-goodies > .goodies-finder .goodies-finder-search > input::-moz-placeholder {
    color: var(--color-highlight);
    font-weight: var(--font-weight-medium);
    opacity: 1
}

.page-goodies > .goodies-finder .goodies-finder-search > input::placeholder {
    color: var(--color-highlight);
    font-weight: var(--font-weight-medium);
    opacity: 1
}

.page-goodies > .goodies-finder .goodies-finder-search > input:focus::-moz-placeholder {
    color: var(--color-text-secondary)
}

.page-goodies > .goodies-finder .goodies-finder-search > input:focus::placeholder {
    color: var(--color-text-secondary)
}

.page-goodies > .goodies-finder .goodies-finder-search > button {
    align-items: center;
    background: rgba(0, 0, 0, 0);
    border: 0;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    padding: 0;
    width: 24px
}

.page-goodies > .goodies-finder .goodies-finder-search > button > img {
    display: block;
    height: 24px;
    width: 24px
}

.page-goodies > .goodies-finder > h2 {
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0
}

.page-goodies > .goodies-finder .goodies-finder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5)
}

.page-goodies > .goodies-finder .goodies-finder-tags > a {
    align-items: center;
    background: var(--color-base);
    border: 2px solid var(--color-selection);
    border-radius: var(--radius-1);
    color: var(--color-text);
    display: inline-flex;
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    height: 32px;
    justify-content: center;
    line-height: 1.45;
    padding: 0 var(--space-4);
    text-decoration: none
}

.page-goodies > .goodies-finder .goodies-finder-tags > a:hover, .page-goodies > .goodies-finder .goodies-finder-tags > a:focus-visible {
    border-color: var(--color-highlight);
    color: var(--color-highlight)
}

@media (max-width: calc(768px - 1px)) {
    .page-goodies > .goodies-finder {
        gap: var(--space-4)
    }

    .page-goodies > .goodies-finder > .goodies-finder-hero {
        height: 342px
    }

    .page-goodies > .goodies-finder .goodies-finder-copy {
        align-items: center;
        display: flex;
        flex-direction: column;
        left: 50%;
        text-align: center;
        top: 34px;
        transform: translateX(-50%);
        white-space: nowrap;
        width: -moz-max-content;
        width: max-content
    }

    .page-goodies > .goodies-finder .goodies-finder-copy > h1 {
        line-height: 1;
        margin-bottom: var(--space-2)
    }

    .page-goodies > .goodies-finder .goodies-finder-copy > p {
        font-size: var(--font-size-text1)
    }

    .page-goodies > .goodies-finder .goodies-finder-union {
        height: 280%;
        left: calc(50% + 73px);
        right: auto;
        top: calc(50% - 53px);
        transform: translate(-50%, -50%) rotate(-135deg);
        width: 260%
    }

    .page-goodies > .goodies-finder .goodies-finder-tiles {
        height: 156px;
        left: 50%;
        max-width: 82%;
        right: auto;
        top: 188px;
        transform: translateX(-50%);
        width: 272px
    }

    .page-goodies > .goodies-finder .goodies-finder-tags {
        gap: var(--space-3)
    }
}

.page-goodies > .goodies-overview > h2 {
    color: var(--color-text);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0
}

.page-goodies > .goodies-overview > .goodies-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns:1fr;
    width: 100%
}

@media (min-width: 768px) {
    .page-goodies > .goodies-overview > .goodies-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .page-goodies > .goodies-overview > .goodies-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.page-goodies > .goodies-overview > .goodies-grid > .goodie-card {
    align-self: start;
    border: 2px solid var(--color-selection);
    box-shadow: none;
    min-width: 0
}

.page-goodies > .goodies-overview > ._space-5 {
    display: none
}

.page-goodies > .goodies-overview > .goodies-overview-empty {
    align-items: center;
    border: 2px dashed var(--color-selection);
    border-radius: var(--radius-2);
    display: flex;
    gap: var(--space-4);
    min-height: 120px;
    padding: var(--space-5);
    width: 100%
}

.page-goodies > .goodies-overview .goodies-overview-empty > img {
    background: rgba(222, 90, 19, .08);
    border-radius: var(--radius-2);
    flex: 0 0 56px;
    height: 56px;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 11px;
    width: 56px
}

.page-goodies > .goodies-overview .goodies-overview-empty > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0
}

.page-goodies > .goodies-overview .goodies-overview-empty h3 {
    color: var(--color-text);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    margin: 0
}

.page-goodies > .goodies-overview .goodies-overview-empty p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    margin: 0;
    max-width: 620px
}

@media (max-width: calc(768px - 1px)) {
    .page-goodies > .goodies-overview > .goodies-overview-empty {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0
    }
}

.page-goodies > .more-goodies-btn {
    width: 100%;
    margin-top: var(--space-5);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6)
}

@media (min-width: 1024px) {
    .page-goodies > .more-goodies-btn {
        margin-top: var(--space-6);
        margin-bottom: var(--space-8)
    }
}

.page-goodies > .info-section {
    width: 100%;
    display: block;
    margin-top: var(--space-6)
}

@media (min-width: 1024px) {
    .page-goodies > .info-section {
        margin-top: var(--space-8)
    }
}

.page-goodies > .info-section h2 {
    margin-bottom: var(--space-5)
}

.page-goodies > .info-section h3 {
    margin-top: var(--space-5)
}

.page-goodies > .info-section p {
    color: var(--color-text);
    margin-bottom: var(--space-5)
}

.page-goodies > .info-section ul {
    margin-bottom: var(--space-5)
}

.page-goodie-detail {
    --goodie-start: var(--color-highlight);
    --goodie-end: var(--color-highlight-2)
}

.page-goodie-detail > .goodie-hero, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--space-6)
}

@media (min-width: 1024px) {
    .page-goodie-detail > .goodie-hero, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero {
        padding: var(--space-4);
        margin-bottom: var(--space-8)
    }
}

.page-goodie-detail > .goodie-hero > .headline, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .headline {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h1);
    background: linear-gradient(90deg, var(--goodie-start) 0%, var(--goodie-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0, 0, 0, 0);
    margin: 0 0 var(--space-5)
}

.page-goodie-detail > .goodie-hero > .media, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .media {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-1);
    overflow: hidden;
    margin: 0 0 var(--space-5)
}

.page-goodie-detail > .goodie-hero > .media > .iframe, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .media > .iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.page-goodie-detail > .goodie-hero > .description-wrapper, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper {
    position: relative
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description {
    position: relative
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text h1, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text h1 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    margin-bottom: var(--space-5);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text h2, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text h2 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text h3, .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text h4, .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text h5, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text h3, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text h4, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text h5 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text p, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text p {
    margin: var(--space-2) 0;
    line-height: var(--font-lineheight-text1)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text ul, .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text ol, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text ul, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text ol {
    padding: 0;
    margin: var(--space-2) 0 var(--space-2) var(--space-5)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text ul li, .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text ol li, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text ul li, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text ol li {
    margin-bottom: var(--space-2);
    line-height: var(--font-lineheight-text1)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text strong, .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text b, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text strong, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text b {
    font-weight: var(--font-weight-bold)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text em, .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text i, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text em, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text i {
    font-style: italic
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text a, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text a {
    color: var(--color-highlight);
    text-decoration: underline
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text a:hover, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text a:hover {
    color: var(--color-highlight-2)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .text, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .text {
    margin: 0
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual {
    position: relative;
    width: 100%;
    margin: var(--space-5) 0 0;
    aspect-ratio: 16/9;
    border-radius: var(--radius-2);
    overflow: hidden;
    background: var(--color-surface-muted)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    position: relative;
    isolation: isolate
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual::before, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: #de5a13;
    opacity: .2;
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat 63% 35%/1400px;
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat 63% 35%/1400px;
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: 0;
    pointer-events: none
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand {
    position: absolute;
    top: 48px;
    left: 48px;
    right: 48px;
    bottom: 48px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 600px
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand.-long > .title, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand.-long > .title {
    font-size: clamp(64px, 6vw, 92px)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand.-xlong > .title, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand.-xlong > .title {
    font-size: clamp(52px, 5vw, 76px);
    line-height: .95
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .logo, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .logo {
    display: block;
    width: 132px;
    height: auto;
    filter: brightness(0)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .title, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .title {
    color: var(--color-text);
    font-size: clamp(72px, 7.2vw, 108px);
    font-weight: var(--font-weight-bold);
    line-height: .88;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
    hyphens: auto
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .subtitle, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .subtitle {
    color: var(--color-text);
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    word-break: break-word
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .avatar, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .avatar {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(46%, 500px);
    height: 100%;
    pointer-events: none
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .avatar > .avatar-image, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .avatar > .avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom right;
    object-position: bottom right
}

@media (max-width: calc(768px - 1px)) {
    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual {
        aspect-ratio: 1.15/1
    }

    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual::before, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual::before {
        -webkit-mask-size: 360px;
        mask-size: 360px;
        -webkit-mask-position: 40% 36%;
        mask-position: 40% 36%
    }

    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand {
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        max-width: 58%
    }

    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .logo, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .logo {
        width: 76px
    }

    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .title, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .title {
        font-size: clamp(34px, 12vw, 56px)
    }

    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .subtitle, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .goodie-visual-brand > .subtitle {
        font-size: clamp(20px, 6vw, 32px)
    }

    .page-goodie-detail > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .avatar, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description > .media.-goodie-visual > .goodie-visual > .avatar {
        width: 52%
    }
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description.-faded, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description.-faded {
    max-height: 250px;
    overflow: hidden
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description.-faded::before, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description.-faded::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 60%, var(--color-base));
    pointer-events: none
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .description.-expanded, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .description.-expanded {
    max-height: none;
    overflow: visible
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn:focus-visible, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn:active, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn:active {
        transform: translateY(1px)
    }
}

.page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn {
    border: 2px solid var(--color-black);
    color: var(--color-text);
    width: 100%;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1)
}

@media (hover: hover)and (pointer: fine) {
    .page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn:hover > .text, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn:hover > .text {
        text-decoration: underline
    }
}

@media (min-width: 1024px) {
    .page-goodie-detail > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn, .page-goodie-detail > .sidebar-layout > .primary > .goodie-hero > .description-wrapper > .toggle-container > .toggle-btn {
        max-width: var(--module-size)
    }
}

.page-goodie-detail > .sidebar-layout > .sidebar > ._card {
    gap: var(--space-4)
}

.page-goodie-detail > .sidebar-layout > .primary > .section-title, .page-goodie-detail > .sidebar-layout > .primary > #product-list > .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    margin: 0 0 var(--space-4)
}

@media (min-width: 1024px) {
    .page-goodie-detail > .sidebar-layout > .primary > .section-title, .page-goodie-detail > .sidebar-layout > .primary > #product-list > .section-title {
        margin-bottom: var(--space-5)
    }
}

.page-goodie-detail > .sidebar-layout > .primary > .related-goodies-title {
    margin-top: var(--space-6)
}

@media (min-width: 1024px) {
    .page-goodie-detail > .sidebar-layout > .primary > .related-goodies-title {
        margin-top: var(--space-8)
    }
}

.page-goodie-detail > .sidebar-layout > .primary > .more-goodies-btn {
    margin-top: var(--space-5)
}

.page-goodie-detail > .sidebar-layout .filter-title {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin: 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-black)
}

.page-goodie-detail > .sidebar-layout .category-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.page-goodie-detail > .sidebar-layout .category-filters > .category-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.page-goodie-detail > .sidebar-layout .category-filters > .category-group > .category-main {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-goodie-detail > .sidebar-layout .category-filters .category-sub {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-3)
}

.page-goodie-detail > .sidebar-layout .category-filters .category-sub-name {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-goodie-detail > .sidebar-layout .category-filters .category-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-3)
}

.page-goodie-detail > .sidebar-layout .category-filters .checkbox-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.page-goodie-detail > .sidebar-layout .category-filters .checkbox-option > .label {
    flex: 1;
    font-weight: var(--font-weight-regular)
}

.page-goodie-detail > .goodie-faq, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6)
}

@media (min-width: 1024px) {
    .page-goodie-detail > .goodie-faq, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq {
        gap: var(--space-5);
        margin-top: var(--space-8);
        padding: var(--space-5)
    }
}

.page-goodie-detail > .goodie-faq > h2, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    margin: 0
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-trigger, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-trigger {
    text-align: left;
    border: 2px solid var(--color-selection);
    border-radius: var(--radius-2);
    background: var(--color-base);
    box-shadow: none
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h1, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h1 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    margin-bottom: var(--space-5);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h2, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h2 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h3, .page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h4, .page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h5, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h3, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h4, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner h5 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
    color: var(--color-text)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner p, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner p {
    margin: var(--space-2) 0;
    line-height: var(--font-lineheight-text1)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ul, .page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ol, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ul, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ol {
    padding: 0;
    margin: var(--space-2) 0 var(--space-2) var(--space-5)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ul li, .page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ol li, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ul li, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner ol li {
    margin-bottom: var(--space-2);
    line-height: var(--font-lineheight-text1)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner strong, .page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner b, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner strong, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner b {
    font-weight: var(--font-weight-bold)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner em, .page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner i, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner em, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner i {
    font-style: italic
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner a, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner a {
    color: var(--color-highlight);
    text-decoration: underline
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner a:hover, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner a:hover {
    color: var(--color-highlight-2)
}

.page-goodie-detail > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner, .page-goodie-detail > .sidebar-layout > .primary > .goodie-faq > .goodie-faq-accordions > .accordion-item > .accordion-content > .content-inner {
    border: 1px solid var(--color-selection);
    border-radius: var(--radius-2);
    background: var(--color-base);
    box-shadow: none
}

.page-goodie-detail .goodie-detail-filter-slot {
    width: 100%
}

.page-goodie-detail .goodie-detail-filter-slot.-desktop {
    display: none
}

@media (min-width: 1024px) {
    .page-goodie-detail .goodie-detail-filter-slot.-desktop {
        display: block
    }
}

.page-goodie-detail .goodie-detail-filter-slot.-mobile {
    display: block
}

@media (max-width: calc(1024px - 1px)) {
    .page-goodie-detail .goodie-detail-filter-slot.-mobile .listing-filter {
        display: block
    }
}

@media (min-width: 1024px) {
    .page-goodie-detail .goodie-detail-filter-slot.-mobile {
        display: none
    }
}

.page-goodie-detail .goodie-detail-filter-slot .listing-filter {
    margin-block: var(--space-6)
}

@media (min-width: 1024px) {
    .page-goodie-detail .goodie-detail-filter-slot .listing-filter {
        margin-block: var(--space-5)
    }
}

.page-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%
}

.page-reviews .reviews-reasons, .page-reviews .reviews-platforms, .page-reviews .reviews-testimonial {
    display: grid;
    gap: var(--space-5);
    width: 100%
}

.page-reviews .reviews-reasons, .page-reviews .reviews-platforms {
    grid-template-columns:1fr
}

@media (min-width: 768px) {
    .page-reviews .reviews-reasons, .page-reviews .reviews-platforms {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .page-reviews {
        gap: var(--space-8)
    }
}

.page-reviews .reviews-hero {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 0;
    background: var(--color-base);
    height: var(--module-size);
    isolation: isolate;
    overflow: hidden;
    position: relative;
    width: 100%
}

.page-reviews .reviews-hero::before {
    background: url("/assets/images/goodie-smiley-orange.svg") no-repeat center/contain;
    content: "";
    height: 560px;
    opacity: .16;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -100px;
    transform: rotate(-50deg);
    transform-origin: center;
    width: 660px;
    z-index: 0
}

.page-reviews .reviews-hero img {
    height: var(--module-size);
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 58%;
    z-index: 1
}

.page-reviews .reviews-hero-copy, .page-reviews .reviews-hero-copy h1, .page-reviews .reviews-hero-copy p {
    color: var(--color-highlight)
}

.page-reviews .reviews-hero-copy {
    left: var(--space-8);
    max-width: 520px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.page-reviews .reviews-hero-copy h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin: 0 0 var(--space-2)
}

@media (min-width: 1024px) {
    .page-reviews .reviews-hero-copy h1 {
        font-size: 64px
    }
}

.page-reviews .reviews-hero-copy p {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    margin: 0
}

.page-reviews .reviews-card, .page-reviews .reviews-platform-card {
    --card-padding: var(--space-4);
    color: var(--color-text)
}

.page-reviews .reviews-card p, .page-reviews .reviews-platform-card p {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    margin: 0
}

.page-reviews .reviews-card {
    --card-gap: var(--space-3)
}

.page-reviews .reviews-card img {
    height: 64px;
    width: 64px
}

.page-reviews .reviews-card h2 {
    color: inherit;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    margin: 0
}

.page-reviews .reviews-platform-card {
    --card-gap: var(--space-5);
    justify-content: space-between
}

.page-reviews .reviews-platform-logo {
    height: 75px;
    max-width: 246px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: left center;
    object-position: left center;
    width: 100%
}

.page-reviews .reviews-platform-logo.-google {
    max-width: 236px
}

.page-reviews .reviews-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-reviews .reviews-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-reviews .reviews-button:active {
        transform: translateY(1px)
    }
}

.page-reviews .reviews-button {
    border: 2px solid var(--color-text);
    color: var(--color-text);
    display: inline-flex;
    padding: 0 var(--space-4);
    text-transform: uppercase;
    width: 100%
}

.page-reviews .reviews-button:hover, .page-reviews .reviews-button:focus-visible {
    border-color: var(--color-highlight);
    color: var(--color-highlight)
}

.page-reviews .reviews-testimonial {
    grid-template-columns:1fr
}

.page-reviews .reviews-testimonial-media {
    border-radius: var(--card-radius);
    height: var(--module-size);
    overflow: hidden;
    position: relative
}

.page-reviews .reviews-testimonial-media img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.page-reviews .reviews-quote {
    --card-padding: var(--space-4);
    --card-gap: var(--space-4);
    align-items: center;
    color: var(--color-text);
    justify-content: center;
    min-height: var(--module-size);
    text-align: center
}

.page-reviews .reviews-quote blockquote {
    color: inherit;
    font-size: var(--font-size-h2);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    line-height: var(--font-lineheight-text1);
    margin: 0;
    max-width: 640px
}

.page-reviews .reviews-quote figcaption {
    align-items: center;
    color: inherit;
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    line-height: var(--font-lineheight-text1);
    width: 100%
}

.page-reviews .reviews-stars {
    color: var(--color-highlight);
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    line-height: 1
}

.page-reviews .reviews-stars span {
    font-size: var(--space-8)
}

.page-reviews .reviews-quote figcaption strong, .page-reviews .reviews-quote figcaption span {
    font-size: var(--font-size-text1)
}

@media (min-width: 1024px) {
    .page-reviews .reviews-hero-copy p {
        font-size: var(--space-5);
        max-width: 420px
    }

    .page-reviews .reviews-testimonial {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: calc(768px - 1px)) {
    .page-reviews .reviews-hero::before {
        height: 410px;
        left: 50%;
        right: auto;
        top: 58px;
        transform: translateX(-50%) rotate(-10deg);
        width: 492px
    }

    .page-reviews .reviews-hero-copy {
        left: 50%;
        max-width: none;
        right: auto;
        text-align: center;
        top: var(--space-6);
        transform: translateX(-50%);
        width: calc(100% - 2 * var(--space-4))
    }

    .page-reviews .reviews-hero-copy h1 {
        line-height: 1;
        margin-bottom: var(--space-3);
        white-space: nowrap
    }

    .page-reviews .reviews-hero-copy p {
        max-width: none
    }

    .page-reviews .reviews-hero img {
        height: 193px;
        left: 50%;
        max-width: none;
        right: auto;
        top: 148px;
        transform: translateX(-50%);
        width: 346px
    }

    .page-reviews .reviews-testimonial-media, .page-reviews .reviews-quote {
        min-height: 0
    }

    .page-reviews .reviews-quote blockquote {
        font-size: var(--font-size-text1)
    }
}

.page-product .sidebar-layout > .primary {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.page-product .sidebar-layout > .primary > .product-content {
    margin-bottom: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product .sidebar-layout > .primary > .product-content {
        margin-bottom: var(--space-5)
    }
}

.page-product .sidebar-layout > .primary > .goodies-list, .page-product .sidebar-layout > .primary > .sidebar-layout > .primary > .goodies-list {
    margin-bottom: var(--space-6)
}

@media (min-width: 1024px) {
    .page-product .sidebar-layout > .primary > .goodies-list, .page-product .sidebar-layout > .primary > .sidebar-layout > .primary > .goodies-list {
        margin-bottom: var(--space-8)
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-product .title-link {
        font-size: var(--font-size-h3)
    }
}

#product_description_loadbee {
    display: none;
    margin-bottom: var(--space-5)
}

#product_description_loadbee > .center {
    display: flex;
    justify-content: center
}

#product_description_loadbee > .center > #product_description_button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

#product_description_loadbee > .center > #product_description_button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    #product_description_loadbee > .center > #product_description_button:active {
        transform: translateY(1px)
    }
}

#product_description_loadbee > .center > #product_description_button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-4)
}

@media (min-width: 1024px) {
    #product_description_loadbee > .center > #product_description_button {
        display: flex;
        width: var(--module-size);
        max-width: var(--module-size)
    }
}

#product_description {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

#product_description h1 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    margin-bottom: var(--space-5);
    color: var(--color-text)
}

#product_description h2 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
    color: var(--color-text)
}

#product_description h3, #product_description h4, #product_description h5 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
    color: var(--color-text)
}

#product_description p {
    margin: var(--space-2) 0;
    line-height: var(--font-lineheight-text1)
}

#product_description ul, #product_description ol {
    padding: 0;
    margin: var(--space-2) 0 var(--space-2) var(--space-5)
}

#product_description ul li, #product_description ol li {
    margin-bottom: var(--space-2);
    line-height: var(--font-lineheight-text1)
}

#product_description strong, #product_description b {
    font-weight: var(--font-weight-bold)
}

#product_description em, #product_description i {
    font-style: italic
}

#product_description a {
    color: var(--color-highlight);
    text-decoration: underline
}

#product_description a:hover {
    color: var(--color-highlight-2)
}

.page-product .product-description__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product .product-description__layout {
        gap: var(--space-5)
    }
}

.page-product .product-description__content-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.page-product .product-description__content-block > .heading-2 {
    margin: 0
}

.page-product .product-feature-highlights.-inline {
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product .product-feature-highlights.-inline {
        gap: var(--space-5)
    }
}

.page-product #product_description .info-tooltip, .page-product #product_description .product-description__auto-link {
    display: inline-block;
    vertical-align: baseline;
    margin-inline: .04rem;
    padding: .05rem .12rem .08rem;
    border-radius: var(--radius-1);
    background-color: rgba(222, 90, 19, .08)
}

@media (hover: hover)and (pointer: fine) {
    .page-product #product_description .info-tooltip:hover, .page-product #product_description .product-description__auto-link:hover {
        background-color: rgba(222, 90, 19, .12)
    }
}

.page-product #product_description .info-tooltip:focus-within, .page-product #product_description .product-description__auto-link:focus-within {
    background-color: rgba(222, 90, 19, .12)
}

.page-product #product_description .info-tooltip__trigger, .page-product #product_description .product-description__auto-link-anchor {
    display: inline
}

.page-product .product-tabs {
    margin-block: 0
}

.page-product .product-tabs > .nav {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
    overflow-x: auto
}

.page-product .product-tabs > .nav > .tab {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2-5);
    height: var(--button-height);
    min-height: var(--button-height);
    flex: 1 0 0;
    border: none;
    color: var(--color-text);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    text-decoration: none
}

@media (hover: hover)and (pointer: fine) {
    .page-product .product-tabs > .nav > .tab:hover > .label {
        text-decoration: underline
    }
}

.page-product .product-tabs > .nav > .tab.-active > .label {
    text-decoration: underline
}

.page-product .product-tabs > .nav > .tab > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.page-product .product-tabs > .nav > .tab > .label {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: inherit
}

.page-product .product-tabs > .content {
    margin-top: var(--space-5)
}

.page-product .product-tabs > .content > .panel {
    display: none;
    padding: 0
}

.page-product .product-tabs > .content > .panel > .heading-2 {
    margin-bottom: var(--space-4);
    color: var(--color-text)
}

.page-product .product-tabs > .content > .panel > .product-tabs__products {
    display: grid;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product .product-tabs > .content > .panel > .product-tabs__products {
        grid-template-columns:repeat(3, 1fr);
        gap: var(--space-5)
    }
}

.page-product .product-tabs > .content > .panel.-active {
    display: block;
    padding: var(--space-5)
}

.page-product .product-tabs > .content > .panel.-blank.-active {
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
    border-radius: 0;
    padding: 0
}

.page-product .product-tabs > .content > .panel.-blank > .heading-2 {
    margin-bottom: var(--space-4)
}

.page-product .product-tabs > .content > #product-tab-devices > ._card > #device_list_container > .device_list {
    margin-top: var(--space-4);
    max-height: calc(var(--module-size) * 1.5);
    overflow: auto
}

@media (max-width: calc(1024px - 1px)) {
    .page-product .product-tabs > .nav {
        flex-direction: column;
        gap: var(--space-4);
        overflow-x: visible
    }

    .page-product .product-tabs > .nav > .tab {
        width: 100%;
        flex: 0 0 auto
    }
}

.page-product .product-tab-technical__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.page-product .product-technical, .page-product .product-feature-highlights, .page-product .product-technical-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.page-product .product-technical > .heading-2, .page-product .product-feature-highlights > .heading-2, .page-product .product-technical-sheet > .heading-2 {
    margin: 0
}

.page-product .product-technical__table {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--color-selection);
    border-radius: var(--radius-2);
    background: var(--color-base);
    overflow: hidden
}

.page-product .product-feature-highlights__table {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--color-selection);
    border-radius: var(--radius-2);
    background: var(--color-base);
    overflow: hidden
}

.page-product .product-technical__row {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-4)
}

@media (min-width: 768px) {
    .page-product .product-technical__row {
        grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr);
        gap: var(--space-5);
        align-items: center
    }
}

.page-product .product-technical__row + .product-technical__row {
    border-top: 1px solid var(--color-selection)
}

.page-product .product-feature-highlights__table-row {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    padding: var(--space-4)
}

.page-product .product-feature-highlights__table-row + .product-feature-highlights__table-row {
    border-top: 1px solid var(--color-selection)
}

.page-product .product-technical__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

.page-product .product-technical__cell.-value {
    justify-content: center
}

.page-product .product-feature-highlights__table-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    justify-content: center
}

.page-product .product-technical__divider {
    display: none;
    width: 1px;
    height: var(--icon-size-lg);
    background: var(--color-border-weak);
    justify-self: center
}

@media (min-width: 768px) {
    .page-product .product-technical__divider {
        display: block
    }
}

.page-product .product-technical__grid, .page-product .product-feature-highlights__grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    gap: var(--space-4)
}

@media (min-width: 768px) {
    .page-product .product-technical__grid, .page-product .product-feature-highlights__grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .page-product .product-technical__grid, .page-product .product-feature-highlights__grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap: var(--space-5)
    }
}

.page-product .product-feature-highlights__goodies {
    width: 100%
}

@media (min-width: 768px) {
    .page-product .product-feature-highlights__goodies {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .page-product .product-feature-highlights__goodies {
        grid-template-columns:repeat(3, minmax(0, 1fr));
        --module-size: calc((100% - (var(--space-5) * 2)) / 3)
    }
}

.page-product .product-feature-highlights__goodies > .goodie-card {
    border: 2px solid var(--color-selection);
    border-radius: var(--radius-2);
    background: var(--color-base);
    box-shadow: none
}

.page-product .product-feature-highlights__secondary-title {
    margin: 0
}

.page-product .product-technical__group-title {
    grid-column: 1/-1;
    margin: 0;
    color: var(--color-text)
}

.page-product .product-technical__grid.-grouped > .product-technical__group-title:not(:first-child) {
    margin-top: var(--space-2)
}

.page-product .product-technical__card, .page-product .product-feature-highlights__card {
    min-width: 0;
    min-height: 64px;
    padding: var(--space-4);
    border: 2px solid var(--color-selection);
    border-radius: var(--radius-2);
    background: var(--color-base)
}

.page-product .product-technical__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1)
}

.page-product .product-technical__card-title, .page-product .product-feature-highlights__label {
    color: var(--color-text);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text2);
    word-break: break-word;
    hyphens: auto
}

.page-product .product-technical__card-description {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3)
}

.page-product .product-technical__card-value {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    word-break: break-word;
    hyphens: auto
}

.page-product .product-feature-highlights__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--color-text);
    text-decoration: none
}

.page-product .product-feature-highlights__card-main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto
}

.page-product .product-feature-highlights__icon {
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);
    border: 2px solid var(--color-confirm);
    border-radius: 50%
}

.page-product .product-feature-highlights__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--color-confirm);
    border-bottom: 2px solid var(--color-confirm);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.page-product .product-feature-highlights__label {
    min-width: 0;
    text-decoration: none;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

.page-product .product-feature-highlights__card.-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.page-product .product-feature-highlights__card.-link > .product-feature-highlights__card-main > .product-feature-highlights__label {
    text-decoration: underline
}

.page-product .product-feature-highlights__arrow {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size)
}

.page-product .product-technical-sheet > .table_normal.-technical {
    border: 1px solid var(--color-border-weak)
}

.page-product .product-details-nav {
    gap: var(--space-4);
    margin-block: 0
}

@media (min-width: 1024px) {
    .page-product .product-details-nav {
        gap: var(--space-5)
    }
}

.page-product .product-details-nav > .detail-group {
    display: flex;
    flex-direction: column
}

.page-product .product-details-nav > .detail-group > .detail-nav-item {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    border: none;
    cursor: pointer;
    width: 100%
}

@media (hover: hover)and (pointer: fine) {
    .page-product .product-details-nav > .detail-group > .detail-nav-item:hover > .item-content > .item-left > .label {
        text-decoration: underline
    }
}

.page-product .product-details-nav > .detail-group > .detail-nav-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.page-product .product-details-nav > .detail-group > .detail-nav-item > .item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--icon-size)
}

.page-product .product-details-nav > .detail-group > .detail-nav-item > .item-content > .item-left {
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.page-product .product-details-nav > .detail-group > .detail-nav-item > .item-content > .item-left > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.page-product .product-details-nav > .detail-group > .detail-nav-item > .item-content > .item-left > .label {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-h3);
    text-wrap: balance;
    text-align: left
}

.page-product .product-details-nav > .detail-group > .detail-nav-item > .item-content > .arrow {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.page-product .product-details-nav > .detail-group > .detail-nav-item[aria-expanded=true] > .item-content > .arrow {
    transform: rotate(90deg)
}

.page-product .product-details-nav > .detail-group > .detail-section {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 0 var(--space-4);
    max-height: 0;
    overflow: hidden;
    margin: 0;
    opacity: 0
}

.page-product .product-details-nav > .detail-group > .detail-section.-active {
    max-height: 100%;
    padding: var(--space-4);
    margin-top: var(--space-5);
    opacity: 1;
    margin-bottom: 0
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content {
    font-size: var(--font-size-text1);
    color: var(--color-text)
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .h2, .page-product .product-details-nav > .detail-group > .detail-section > .section-content .h2.cs {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
    color: var(--color-text)
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .h2 > small, .page-product .product-details-nav > .detail-group > .detail-section > .section-content .h2.cs > small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-text3);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium)
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .text_content {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .text_content > p {
    margin: 0 0 var(--space-3)
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls {
    align-items: flex-end;
    --gap: var(--space-3)
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls > label {
    white-space: nowrap;
    color: var(--color-text)
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls > .form-field {
    flex: 0 0 300px;
    max-width: 320px
}

@media (min-width: 1024px) {
    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls > .form-field {
        flex-basis: 240px;
        max-width: 260px
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls .h2, .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls .h2.cs {
        font-size: var(--font-size-text2);
        line-height: var(--font-lineheight-text2);
        margin-bottom: var(--space-2)
    }

    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls .text_content {
        font-size: var(--font-size-text3);
        line-height: var(--font-lineheight-text3)
    }

    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls .text_content .tg th, .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls .text_content .tg td {
        padding: var(--space-2) var(--space-2);
        font-size: var(--font-size-text3);
        line-height: var(--font-lineheight-text3)
    }

    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls > ._space-4 {
        block-size: var(--space-3)
    }

    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls {
        flex-wrap: wrap;
        align-items: stretch
    }

    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls > .form-field {
        flex: 1 1 auto;
        max-width: 100%
    }

    .page-product .product-details-nav > .detail-group > .detail-section > .section-content .calc-controls > .btn {
        width: 100%
    }
}

.page-product .product-details-nav > .detail-group > .detail-section > .section-content .table-wrap {
    inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--space-3)
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section {
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
    border-radius: 0;
    padding: 0
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section.-active {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    margin-top: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product .product-details-nav > .detail-group > #section-related.detail-section.-active {
        grid-template-columns:repeat(3, 1fr);
        gap: var(--space-5)
    }
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section.-expandable > .product-wrapper.-hidden {
    display: none
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section.-expandable.is-expanded > .product-wrapper.-hidden {
    display: block
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products:active {
        transform: translateY(1px)
    }
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    grid-column: 1/-1;
    justify-self: center;
    width: 100%
}

@media (min-width: 1024px) {
    .page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products {
        width: 32%
    }
}

@media (hover: hover)and (pointer: fine) {
    .page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products:hover > .text {
        text-decoration: underline
    }
}

.page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products > .text {
    pointer-events: none
}

@media (min-width: 1024px) {
    .page-product .product-details-nav > .detail-group > #section-related.detail-section > .action.show-all-products {
        display: flex;
        width: var(--module-size);
        max-width: var(--module-size)
    }
}

.page-product .product-details-nav > .detail-group > #section-bewertung.detail-section {
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
    border-radius: 0;
    padding: 0
}

.page-product .product-details-nav > .detail-group > #section-bewertung.detail-section.-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    margin-top: var(--space-5)
}

@media (min-width: 1024px) {
    .page-product .product-details-nav > .detail-group > #section-bewertung.detail-section.-active {
        gap: var(--space-5)
    }
}

.page-product .product-details-nav > .detail-group > #section-shipping.detail-section > .h2 {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
    color: var(--color-text)
}

.page-product .product-details-nav > .detail-group > #section-shipping.detail-section > .versandkosten_table {
    display: block;
    width: 100%
}

.page-product .product-details-nav > .detail-group > #section-shipping.detail-section > .text_content {
    color: var(--color-text);
    font-size: var(--font-size-text2);
    line-height: var(--font-lineheight-text2)
}

.page-product .product-details-nav > .detail-group > #section-shipping.detail-section > .text_content > p {
    margin: 0 0 var(--space-3)
}

@media (max-width: calc(1024px - 1px)) {
    .page-product .product-details-nav > .detail-group > #section-shipping.detail-section > .text_content {
        font-size: var(--font-size-text3);
        line-height: var(--font-lineheight-text3)
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-product .product-details-nav > .detail-group > .detail-nav-item {
        padding: var(--space-4)
    }

    .page-product .product-details-nav > .detail-group > .detail-nav-item > .item-content > .item-left > .label {
        font-size: var(--font-size-h3)
    }

    .page-product .product-details-nav > .detail-group > .detail-section {
        display: none;
        padding: var(--space-3)
    }

    .page-product .product-details-nav > .detail-group > .detail-section.-active {
        display: block
    }

    .page-product .product-details-nav > .detail-group > #section-related.detail-section.-active {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: calc(768px - 1px)) {
    .page-product .product-details-nav > .detail-group > #section-related.detail-section.-active {
        grid-template-columns:1fr
    }
}

.page-product #section-services .services-box {
    width: 100%;
    max-width: none;
    background: rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-4) 0
}

.page-product #section-services .services-box > .foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product #section-services .services-box > .foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
}

.page-product #section-services .services-box > .foot > .cart-action {
    order: 2
}

@media (min-width: 1024px) {
    .page-product #section-services .services-box > .foot > .cart-action {
        order: 1
    }
}

.page-product #section-services .services-box > .foot > .cart-action > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%
}

@media (min-width: 1024px) {
    .page-product #section-services .services-box > .foot > .cart-action > .btn {
        width: auto
    }
}

.page-product #section-services .services-box > .foot > .cart-action > .btn > .logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.page-product #section-services .services-box > .foot > .pricing-info {
    order: 1;
    text-align: right;
    display: grid;
    grid-template-columns:max-content max-content;
    justify-content: end;
    -moz-column-gap: 10px;
    column-gap: 10px
}

.page-product #section-services .services-box > .foot > .pricing-info > .vat-note {
    grid-column: 2;
    justify-self: end
}

.page-product #section-services .services-box > .foot > .pricing-info > .vat-note > a {
    color: var(--color-text-secondary)
}

.page-product #section-services .services-box > .foot > .pricing-info > .vat-note > a:hover {
    text-decoration: none
}

@media (min-width: 1024px) {
    .page-product #section-services .services-box > .foot > .pricing-info {
        order: 2
    }
}

.page-product #section-services .services-box .toggle.disabled {
    opacity: .4;
    cursor: not-allowed
}

.page-product #section-services .services-box .service-row:has(.toggle.disabled) > .label > .name, .page-product #section-services .services-box .service-row:has(.toggle.disabled) > .price {
    color: var(--color-selection)
}

.page-product #extra-service-button {
    cursor: pointer
}

.page-product #extra-service-button > .text {
    text-decoration: underline
}

.page-product #extra-service-button {
    cursor: pointer
}

.page-product #section-bewertung .review-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .page-product #section-bewertung .review-banner {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-5)
    }
}

.page-product #section-bewertung .review-banner > .feedback-box {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 170px
}

@media (min-width: 1024px) {
    .page-product #section-bewertung .review-banner > .feedback-box {
        width: var(--module-size);
        flex-shrink: 0
    }
}

.page-product #section-bewertung .review-banner > .feedback-box > .text {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-product #section-bewertung .review-banner > .feedback-box > .btn.-black {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-product #section-bewertung .review-banner > .feedback-box > .btn.-black:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-product #section-bewertung .review-banner > .feedback-box > .btn.-black:active {
        transform: translateY(1px)
    }
}

.page-product #section-bewertung .review-banner > .feedback-box > .btn.-black {
    background-color: var(--color-black);
    color: var(--color-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--button-height);
    padding: var(--space-4);
    border: none;
    cursor: pointer
}

.page-product #section-bewertung .review-banner > .feedback-box > .btn.-black > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.page-product #section-bewertung .review-banner > .feedback-box > .btn.-black > .label {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

.page-product #section-bewertung .review-banner > .rating-breakdown {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product #section-bewertung .review-banner > .rating-breakdown {
        width: var(--module-size);
        flex-shrink: 0;
        gap: var(--space-5)
    }
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .average-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .average-rating > .rating-number {
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-highlight)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .average-rating > .stars-large {
    display: flex;
    align-items: center;
    gap: var(--space-1)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .average-rating > .stars-large > .star {
    width: 42px;
    height: 42px;
    flex-shrink: 0
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .average-rating > .total-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-1);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-text);
    background: var(--color-selection);
    border-radius: 6px;
    margin-left: auto
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars {
        gap: var(--space-5)
    }
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: transform .2s ease
}

@media (hover: hover)and (pointer: fine) {
    .page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item:hover {
        transform: scale(1.02)
    }
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item.-active {
    background: var(--color-surface-muted);
    border-radius: var(--card-radius);
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item.-active > .label-with-icon > .star {
    content: url("/assets/icons/star-full.svg")
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item.-active > .label-with-icon > .number {
    color: var(--color-highlight)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item.-active > .bar-container > .bar-fill {
    background: var(--color-highlight)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item.-active > .count {
    background: var(--color-highlight);
    color: #fff
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item > .label-with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-1)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item > .label-with-icon > .number {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-text)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item > .label-with-icon > .star {
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item > .bar-container {
    flex: 1;
    height: 8px;
    background: var(--color-surface-muted);
    border-radius: 4px;
    overflow: hidden
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item > .bar-container > .bar-fill {
    height: 100%;
    background: #000;
    transition: width .3s ease
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .rating-bars > .rating-bar-item > .count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-1);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-text);
    background: var(--color-selection);
    border-radius: 6px
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .btn.-black {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .btn.-black:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-product #section-bewertung .review-banner > .rating-breakdown > .btn.-black:active {
        transform: translateY(1px)
    }
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .btn.-black {
    background-color: var(--color-black);
    color: var(--color-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--button-height);
    padding: var(--space-4);
    border: none;
    cursor: pointer
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .btn.-black > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.page-product #section-bewertung .review-banner > .rating-breakdown > .btn.-black > .label {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

.page-product #section-bewertung .review-banner > .right-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1
}

.page-product #section-bewertung .review-banner > .right-column > .image-banner.-review {
    display: none
}

@media (min-width: 1024px) {
    .page-product #section-bewertung .review-banner > .right-column > .image-banner.-review {
        display: block
    }
}

.page-product #section-bewertung .review-banner > .right-column > .image-banner.-review > .viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden
}

.page-product #section-bewertung .review-banner > .right-column > .image-banner.-review > .viewport > .image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: none;
    object-fit: none
}

.page-product #section-bewertung .review-banner > .right-column > .image-banner.-review > .viewport > .stars {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2)
}

.page-product #section-bewertung .review-banner > .right-column > .image-banner.-review > .viewport > .stars > .star {
    width: 76px;
    height: 76px;
    flex-shrink: 0
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .no-reviews {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .stars {
    display: flex;
    align-items: center;
    gap: var(--space-1)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .stars > .star {
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .review-header > .headline {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .review-header > .date {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text);
    white-space: nowrap
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .comment {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-regular);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card > .author {
    margin: 0;
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text)
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card.-hidden {
    display: none
}

.page-product #section-bewertung .review-banner > .right-column > .product_ratings > .review-card.-filtered-out {
    display: none
}

.page-product #section-bewertung .review-banner > .right-column > #product_rating_show_more_button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-product #section-bewertung .review-banner > .right-column > #product_rating_show_more_button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-product #section-bewertung .review-banner > .right-column > #product_rating_show_more_button:active {
        transform: translateY(1px)
    }
}

.page-product #section-bewertung .review-banner > .right-column > #product_rating_show_more_button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%
}

.page-product #section-bewertung .review-form {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    margin-bottom: var(--space-4)
}

@media (min-width: 1024px) {
    .page-product #section-bewertung .review-form {
        gap: var(--space-5)
    }
}

.page-product #section-bewertung .review-form > .star-rating-input {
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.page-product #section-bewertung .review-form > .star-rating-input > .star-btn {
    all: unset;
    display: inline-flex;
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: transform .2s ease
}

.page-product #section-bewertung .review-form > .star-rating-input > .star-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: hover)and (pointer: fine) {
    .page-product #section-bewertung .review-form > .star-rating-input > .star-btn:hover {
        transform: scale(1.1)
    }
}

.page-product #section-bewertung .review-form > .star-rating-input > .star-btn > .star-icon {
    width: 100%;
    height: 100%;
    display: block
}

.page-product #section-bewertung .review-form > .btn.-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-product #section-bewertung .review-form > .btn.-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-product #section-bewertung .review-form > .btn.-primary:active {
        transform: translateY(1px)
    }
}

.page-product #section-bewertung .review-form > .btn.-primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.page-cart .cart-availability-banner {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-2);
    background-color: var(--color-warning-box);
    color: var(--color-warning);
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    display: grid;
    grid-template-columns:24px minmax(0, 1fr);
    gap: 10px;
    align-self: stretch;
    overflow-wrap: anywhere
}

.page-cart .cart-availability-banner > .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg class=%27icon%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM8.25 21L3 15.75V8.25L8.25 3H15.75L21 8.25V15.75L15.75 21H8.25ZM9.1 19H14.9L19 14.9V9.1L14.9 5H9.1L5 9.1V14.9L9.1 19Z%27 fill=%27%23EE3616%27/%3E%3C/svg%3E")
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header {
    margin-bottom: var(--space-5)
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport {
    position: relative;
    --smiley-size: 300px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(90deg, var(--goodie-orange-start) 20%, var(--goodie-orange-end) 80%);
    --smiley-opacity: 0.45
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport {
        --smiley-size: 1200px;
        --smiley-rotation: 25deg;
        --smiley-pos-x: 50%;
        --smiley-pos-y: 50%
    }
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport {
    background-color: var(--color-base);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-2);
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport > .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    position: relative;
    z-index: 1
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport > .content > .icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0
}

.page-cart > .container > .container_product > .product_main > .image-banner.-cart-header > .viewport > .content > .heading {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text);
    margin: 0
}

.page-cart .basket-empty {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .page-cart .basket-empty {
        gap: var(--space-5)
    }
}

.page-cart .basket-empty > .image-banner.-empty > .viewport {
    position: relative;
    --smiley-size: 300px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(90deg, var(--goodie-orange-start) 20%, var(--goodie-orange-end) 80%);
    --smiley-opacity: 0.45
}

.page-cart .basket-empty > .image-banner.-empty > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-cart .basket-empty > .image-banner.-empty > .viewport {
        --smiley-size: 1200px;
        --smiley-rotation: 25deg;
        --smiley-pos-x: 50%;
        --smiley-pos-y: 50%
    }
}

.page-cart .basket-empty > .image-banner.-empty > .viewport {
    background-color: var(--color-base);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-2)
}

.page-cart .basket-empty > .image-banner.-empty > .viewport > .content {
    color: var(--color-text)
}

.page-cart .basket-empty > .image-banner.-empty > .viewport > .content #basket-empty-heading {
    font-family: var(--font-sans);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h1);
    text-align: center;
    color: var(--color-text)
}

.page-cart .basket-empty > ._surface {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4)
}

@media (min-width: 1024px) {
    .page-cart .basket-empty > ._surface {
        gap: var(--space-5)
    }
}

.page-cart .basket-empty > ._surface > .text-bold {
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-cart .basket-empty > ._surface > .text-1 {
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-cart .basket-empty > ._surface > .actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .page-cart .basket-empty > ._surface > .actions {
        flex-direction: row
    }
}

.page-cart .basket-empty > ._surface > .actions > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.page-cart .basket-empty > ._surface > .actions {
    width: 100%
}

.page-cart .basket-empty > ._surface > .actions > .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    flex: 1 0 0;
    width: 100%;
    text-decoration: none;
    min-height: var(--button-height)
}

.page-cart .basket-empty > ._surface > .actions > .action > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.page-cart .basket-empty > ._surface > .actions > .action > .text {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

.page-cart .basket-empty > ._surface > .actions > .action.back {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-cart .basket-empty > ._surface > .actions > .action.back:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-cart .basket-empty > ._surface > .actions > .action.back:active {
        transform: translateY(1px)
    }
}

.page-cart .basket-empty > ._surface > .actions > .action.back {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    gap: var(--space-2)
}

.page-cart .basket-empty > ._surface > .actions > .action.primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-cart .basket-empty > ._surface > .actions > .action.primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-cart .basket-empty > ._surface > .actions > .action.primary:active {
        transform: translateY(1px)
    }
}

.page-cart .basket-empty > ._surface > .actions > .action.primary {
    background-color: var(--color-highlight);
    color: var(--color-base)
}

.page-cart .basket-empty > ._surface > .actions > .action.goodies {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-cart .basket-empty > ._surface > .actions > .action.goodies:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-cart .basket-empty > ._surface > .actions > .action.goodies:active {
        transform: translateY(1px)
    }
}

.page-cart .basket-empty > ._surface > .actions > .action.goodies {
    border: 2px solid var(--color-highlight);
    color: var(--color-highlight);
    gap: var(--space-2)
}

.page-cart .basket-empty > ._surface > .actions > .action, .page-cart .basket-empty > ._surface > .actions > .action.back, .page-cart .basket-empty > ._surface > .actions > .action.primary, .page-cart .basket-empty > ._surface > .actions > .action.goodies {
    flex: 1 1 0;
    width: 100%;
    min-height: var(--button-height)
}

.page-cart .basket-empty > ._surface > .actions > .action.goodies > .text.-gradient {
    color: inherit;
    -webkit-text-fill-color: initial;
    background: none
}

.page-cart > .container > .container_product > .product_main > .section-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    margin-bottom: var(--space-5)
}

.page-cart > .crossselling .show-all-products.-hidden {
    display: none
}

.page-cart > .crossselling .show-all-products {
    border-radius: 16px;
    border: 2px solid var(--color-text);
    width: 342px;
    height: 56px;
    padding: 16px;
    text-align: center;
    display: block;
    margin: 25px auto;
    color: var(--color-text);
    font-size: var(--font-size-text1);
    font-weight: 700;
    text-decoration: none
}

.page-cart > .crossselling .show-all-products:visited, .page-cart > .crossselling .show-all-products:hover, .page-cart > .crossselling .show-all-products:active {
    text-decoration: none
}

.page-cart > .crossselling .show-all-products:hover {
    cursor: pointer
}

.page-cart .pay-now {
    text-decoration: none
}

.page-cart .pay-now > .button.-primary {
    background-color: #349357 !important
}

.page-cart .payment-methods {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2)
}

@media (max-width: calc(768px - 1px)) {
    .page-cart .payment-methods {
        justify-content: start
    }
}

.page-cart .payment-methods img {
    width: 76px;
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 10px;
    padding: 8px;
    display: inline;
    background-color: var(--color-bg)
}

.page-cart .payment-methods img.americanexpress {
    background-color: #0077a6
}

.page-cart .cart-list > .cart-item-card + .cart-item-card {
    margin-top: var(--space-5)
}

@media (min-width: 1024px) {
    .page-cart .cart-list > .cart-item-card + .cart-item-card {
        margin-top: var(--space-5)
    }
}

.page-cart .cart-list {
    margin-bottom: var(--space-5)
}

.page-cart .cart-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-bg)
}

.page-cart .cart-summary > .container {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.page-cart .cart-summary > .container > ._card {
    --card-padding: var(--space-4);
    --card-gap: var(--space-4);
    width: 100%
}

.page-cart .cart-summary .breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.page-cart .cart-summary .line-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0
}

.page-cart .cart-summary .line-items > .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3)
}

.page-cart .cart-summary .line-items > .item > .label {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.page-cart .cart-summary .line-items > .item > .value {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    white-space: nowrap
}

.page-cart .cart-summary .line-items > .item.-total > .label, .page-cart .cart-summary .line-items > .item.-total > .value {
    font-weight: var(--font-weight-bold)
}

.page-cart .cart-summary .line-items > .item.-secondary > .label, .page-cart .cart-summary .line-items > .item.-secondary > .value {
    font-weight: var(--font-weight-medium)
}

.page-cart .cart-summary .info-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text)
}

.page-cart .cart-summary .info-button:hover {
    color: var(--color-highlight);
    transform: scale(1.1)
}

.page-cart .cart-summary .info-button:active {
    transform: scale(0.95)
}

.page-cart .cart-summary .info-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: 4px
}

.page-cart .cart-summary .info-button > .icon {
    width: 24px;
    height: 24px;
    display: block
}

@media (prefers-reduced-motion: reduce) {
    .page-cart .cart-summary .info-button {
        transition: none
    }

    .page-cart .cart-summary .info-button:hover {
        transform: none
    }
}

.page-cart .cart-summary .divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-selection);
    border: none
}

.page-cart .cart-summary .actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .page-cart .cart-summary .actions {
        flex-direction: row
    }
}

.page-cart .cart-summary .actions > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.page-cart .cart-summary .actions {
    width: 100%
}

@media (max-width: calc(1024px - 1px)) {
    .page-cart .cart-summary .actions {
        gap: var(--space-4)
    }
}

.page-cart .cart-summary .paypal-row {
    width: 100%
}

@media (min-width: 1024px) {
    .page-cart .cart-summary .paypal-row .later {
        padding-left: 50%
    }
}

.page-cart .cart-summary .paypal-row .later {
    width: 100%;
    margin: 5px
}

.page-cart .cart-summary .button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--button-radius);
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3);
    line-height: var(--font-lineheight-h3);
    min-height: var(--button-height);
    max-height: 55px
}

.page-cart .cart-summary .button > .text {
    display: inline-flex;
    align-items: center
}

.page-cart .cart-summary .button > .icon {
    width: 24px;
    height: 24px;
    display: block
}

.page-cart .cart-summary .button > .logo {
    width: 90px;
    height: 24px;
    display: block
}

.page-cart .cart-summary .button.-primary {
    background-color: var(--color-highlight);
    text-decoration: none;
    color: var(--color-base);
    box-shadow: var(--shadow-button)
}

.page-cart .cart-summary .button.-primary:active {
    transform: translateY(1px)
}

.page-cart .cart-summary .button.-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.page-cart .cart-summary .button.-paypal {
    background-color: #ffc43a;
    color: var(--color-text)
}

.page-cart .cart-summary .button.-paypal:active {
    transform: translateY(1px)
}

.page-cart .cart-summary .button.-paypal:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (prefers-reduced-motion: reduce) {
    .page-cart .cart-summary .button {
        transition: none
    }

    .page-cart .cart-summary .button:hover {
        transform: none
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-cart .cart-summary > .container > .card {
        padding: var(--space-3);
        gap: var(--space-4)
    }

    .page-cart .cart-summary .button {
        width: 100%
    }

    .page-cart .cart-summary .line-items {
        gap: var(--space-3)
    }

    .page-cart .cart-summary .breakdown {
        gap: var(--space-4)
    }
}

@media (prefers-contrast: high) {
    .page-cart .cart-summary .button.-primary, .page-cart .cart-summary .button.-paypal {
        border: 2px solid var(--color-text)
    }

    .page-cart .cart-summary .divider {
        background-color: var(--color-text)
    }
}

.page-cart .cart-summary *:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.layout-content.-order {
    padding-bottom: var(--space-5)
}

.layout-content.-order > header._logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--color-base);
    box-shadow: var(--shadow-1);
    border-radius: 0 0 var(--radius-2) var(--radius-2)
}

.layout-content.-order > header._logos-row > a {
    display: inline-flex;
    align-items: center;
    text-decoration: none
}

.layout-content.-order > header._logos-row > a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.layout-content.-order > header._logos-row > a > .logo {
    height: 28px;
    width: auto
}

.layout-content.-order .box.error {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-2);
    background: var(--color-error-box);
    color: var(--color-error);
    box-shadow: var(--shadow-1)
}

.layout-content.-order .box.error > h1 {
    margin: 0 0 var(--space-2);
    color: inherit;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

.checkout-start > .page-header, .checkout-address > .page-header, .checkout-overview > .page-header, .checkout-completion > .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center
}

.checkout-start > .page-header > .title, .checkout-start > .page-header > h1, .checkout-start > .page-header > h2, .checkout-start > .page-header > h3, .checkout-address > .page-header > .title, .checkout-address > .page-header > h1, .checkout-address > .page-header > h2, .checkout-address > .page-header > h3, .checkout-overview > .page-header > .title, .checkout-overview > .page-header > h1, .checkout-overview > .page-header > h2, .checkout-overview > .page-header > h3, .checkout-completion > .page-header > .title, .checkout-completion > .page-header > h1, .checkout-completion > .page-header > h2, .checkout-completion > .page-header > h3 {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center
}

._card > .head > .title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text)
}

.form-actions {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .form-actions {
        flex-direction: row
    }
}

.form-actions > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.form-actions {
    flex-direction: column
}

.primary-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.primary-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .primary-button:active {
        transform: translateY(1px)
    }
}

.primary-button {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%;
    height: var(--button-height);
    justify-content: center;
    text-decoration: none
}

.back-link {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.back-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .back-link:active {
        transform: translateY(1px)
    }
}

.back-link {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.back-link > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.back-link {
    height: var(--button-height);
    width: 100%
}

.back-link--small {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.back-link--small:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .back-link--small:active {
        transform: translateY(1px)
    }
}

.back-link--small {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.back-link--small > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.back-link--small {
    height: var(--button-height);
    width: 100%
}

@media (min-width: 1024px) {
    .back-link--small {
        width: var(--module-size)
    }
}

.checkout-start {
    --card-radius: var(--radius-2);
    --card-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column
}

.checkout-start > .checkout-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch
}

@media (min-width: 1024px) {
    .checkout-start > .checkout-options {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-5)
    }
}

.checkout-start > .checkout-options > .checkout-option {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1 1 0
}

.checkout-start > .checkout-options > .checkout-option > .head > .title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text)
}

.checkout-start > .checkout-options > .checkout-option > .content {
    width: 100%
}

.checkout-start > .checkout-options > .checkout-option > .action {
    width: 100%;
    display: flex;
    justify-content: center
}

.checkout-start .login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.checkout-start .login-form > .link {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text1);
    align-self: flex-start
}

.checkout-start .login-form > .link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.checkout-start .login-form .error {
    color: var(--color-error);
    background: var(--color-error-box);
    padding: var(--space-3);
    border-radius: var(--radius-1)
}

.checkout-start > .actions {
    display: flex;
    justify-content: center
}

.checkout-start .login-form > .primary-button {
    align-self: center
}

.checkout-address {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-address {
        gap: var(--space-5)
    }
}

.checkout-address > form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-address > form {
        gap: var(--space-6)
    }
}

.checkout-address .address-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-address .address-form {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-5)
    }
}

.checkout-address .column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1 1 0
}

.checkout-address .address-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-address .address-fields {
        flex-direction: row;
        gap: var(--space-5)
    }
}

.checkout-address .address-fields > .column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1 1 0
}

.checkout-address ._card ._card {
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding-left: 0;
    padding-right: 0
}

.checkout-address .form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-address .form-actions {
        flex-direction: row
    }
}

.checkout-address .form-actions > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.checkout-address .form-actions {
    flex-direction: column
}

.checkout-address .newsletter-card > .newsletter-content, .checkout-address ._card.-newsletter > .newsletter-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.checkout-address .newsletter-card > .newsletter-content > .hint, .checkout-address ._card.-newsletter > .newsletter-content > .hint {
    font-size: var(--font-size-text3);
    color: var(--color-text-secondary);
    margin-left: calc(24px + var(--space-2))
}

.checkout-address ._card .radio-group {
    gap: var(--space-6)
}

.checkout-address .radio-group.-payments > .option {
    display: grid;
    grid-template-columns:24px var(--space-2) auto 1fr;
    -moz-column-gap: var(--space-2);
    column-gap: var(--space-2);
    align-items: center
}

.checkout-address .radio-group.-payments > .option > .indicator {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 2px
}

.checkout-address .radio-group.-payments > .option > .logo {
    grid-column: 3;
    grid-row: 1
}

.checkout-address .radio-group.-payments > .option > .label {
    grid-column: 4;
    grid-row: 1;
    display: block
}

.checkout-address .radio-group.-payments > .option > .payment-description {
    grid-column: 1/-1;
    margin-top: var(--space-2)
}

.checkout-address .radio-group.-payments > .option.-disabled {
    opacity: .5;
    cursor: default
}

.checkout-address .shipping-info {
    margin-top: var(--space-2)
}

.checkout-address .payment-description {
    margin-top: var(--space-2);
    font-size: var(--font-size-text1);
    line-height: 1.5;
    color: var(--color-text)
}

.checkout-overview .address-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-overview .address-block {
        gap: var(--space-5)
    }
}

.checkout-overview .address-block p {
    margin: 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: var(--font-lineheight-text1)
}

.checkout-overview .addr-name {
    font-weight: var(--font-weight-medium)
}

.checkout-overview .payment-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4)
}

.checkout-overview .payment-summary .logo {
    height: 20px;
    width: auto
}

.checkout-overview .payment-summary .payment-name {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text)
}

.checkout-overview .ship-row {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: start;
    -moz-column-gap: var(--space-2);
    column-gap: var(--space-2);
    margin: 0
}

.checkout-overview .ship-row .ship-text {
    font-weight: var(--font-weight-medium)
}

.checkout-overview .ship-row .ship-price {
    font-weight: var(--font-weight-medium)
}

.checkout-overview .service-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4)
}

.checkout-overview .service-title {
    font-size: var(--font-size-h3);
    line-height: var(--font-lineheight-h3)
}

.checkout-overview .service-row {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    gap: var(--space-3)
}

.checkout-overview .service-row .meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text)
}

.checkout-overview .service-row .meta .name {
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

.checkout-overview .service-row .total {
    text-align: right;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.checkout-overview .product-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4)
}

.checkout-overview .product-summary .meta {
    text-align: right;
    flex-shrink: 0
}

.checkout-overview .product-summary .media {
    flex-shrink: 0
}

.checkout-overview .product-summary .meta .avail {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3)
}

.checkout-overview .product-summary .meta .avail > .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 auto
}

.checkout-overview .product-summary .meta .avail > .text {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    white-space: nowrap
}

.checkout-overview .order-totals .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.checkout-overview .order-totals .row {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    margin: 0
}

.checkout-overview .order-totals .row .label {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text)
}

.checkout-overview .order-totals .row .value {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: right
}

.checkout-overview .order-totals .row.-grand .label {
    font-weight: var(--font-weight-bold)
}

.checkout-overview .order-totals .row.-grand .value {
    color: var(--color-highlight);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h2);
    line-height: var(--font-lineheight-h2)
}

.checkout-overview .order-totals .row.-vat .label, .checkout-overview .order-totals .row.-vat .value {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1)
}

.checkout-overview ._card .head {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 24px
}

.checkout-overview ._card .head .title {
    text-wrap: pretty;
    padding-right: 40px
}

.checkout-overview ._card .head .edit-link {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-1);
    color: var(--color-text);
    text-decoration: none
}

.checkout-overview ._card .head .edit-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.checkout-overview .coupon-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.checkout-overview .coupon-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .checkout-overview .coupon-button:active {
        transform: translateY(1px)
    }
}

.checkout-overview .coupon-button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap);
    height: var(--button-height);
    background: var(--color-base);
    text-decoration: none;
    width: 100%;
    margin-top: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-overview .coupon-button {
        margin-top: var(--space-5)
    }
}

.checkout-overview .coupon-button .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.checkout-completion .image-banner.-checkout-header {
    margin-bottom: var(--space-4)
}

.checkout-completion .image-banner.-checkout-header > .viewport {
    position: relative;
    --smiley-size: 300px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-green-start) 20%, var(--goodie-green-end) 80%);
    --smiley-opacity: 0.45
}

.checkout-completion .image-banner.-checkout-header > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .checkout-completion .image-banner.-checkout-header > .viewport {
        --smiley-size: 1200px;
        --smiley-rotation: 25deg;
        --smiley-pos-x: 50%;
        --smiley-pos-y: 50%
    }
}

.checkout-completion .image-banner.-checkout-header > .viewport {
    background-color: var(--color-base);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-2);
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.checkout-completion .image-banner.-checkout-header > .viewport > .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    position: relative;
    z-index: 1
}

.checkout-completion .image-banner.-checkout-header > .viewport > .content > .icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0
}

.checkout-completion .image-banner.-checkout-header > .viewport > .content > .heading {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text);
    margin: 0;
    width: -moz-max-content;
    width: max-content
}

.checkout-completion .image-banner.-checkout-header > .viewport > .content > .heading > .mobile-break {
    display: block
}

@media (min-width: 768px) {
    .checkout-completion .image-banner.-checkout-header > .viewport > .content > .heading > .mobile-break {
        display: none
    }
}

.checkout-completion .address-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .checkout-completion .address-form {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-5)
    }
}

.checkout-completion .column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1 1 0
}

.checkout-completion .u-list-checks {
    margin-bottom: var(--space-6)
}

.checkout-completion .u-list-checks .benefit-item img {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0
}

.checkout-completion .register-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.checkout-completion .register-form .error-message {
    display: none;
    color: var(--color-error);
    background: var(--color-error-box);
    padding: var(--space-3);
    border-radius: var(--radius-1)
}

.checkout-completion .register-form .error-message:not(:empty) {
    display: block
}

.checkout-completion .register-form .success-message {
    color: var(--color-confirm);
    font-weight: var(--font-weight-medium)
}

.checkout-completion ._card .head {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 24px
}

.checkout-completion ._card .head .title {
    text-wrap: pretty;
    padding-right: 40px
}

.section .section-title {
    text-align: center
}

.section .goodies-grid .more-goodies-btn {
    grid-column: 1/-1;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0
}

.section .category-cards-grid {
    display: block
}

.section .category-cards-grid .grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

@media (min-width: 1024px) {
    .section .category-cards-grid .grid {
        gap: var(--space-5);
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

.section .category-cards-grid .grid .card {
    box-sizing: border-box;
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    text-decoration: none
}

@media (hover: hover)and (pointer: fine) {
    .section .category-cards-grid .grid .card:hover .name {
        text-decoration: underline
    }
}

.section .category-cards-grid .grid .card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.section .category-cards-grid .grid .card .image {
    display: block;
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    aspect-ratio: 1;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .section .category-cards-grid .grid .card .image {
        width: var(--icon-size-xxl);
        height: var(--icon-size-xxl)
    }
}

.section .category-cards-grid .grid .card .name {
    display: block;
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--font-size-text1);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto
}

.section .category-cards-grid .grid a.card:last-of-type:nth-of-type(odd) {
    grid-column: 1/-1
}

.section .category-cards-grid .grid .card.-extra, .section .category-cards-grid .grid .action {
    display: none
}

.customer-login {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap)
}

@media (min-width: 1024px) {
    .customer-login {
        gap: var(--section-gap-lg)
    }
}

.customer-login > ._container {
    display: flex;
    flex-direction: column;
    padding-inline: 0
}

.customer-login > ._container > .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center
}

.customer-login > ._container > .page-header > .title, .customer-login > ._container > .page-header > h1, .customer-login > ._container > .page-header > h2, .customer-login > ._container > .page-header > h3 {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center
}

.customer-login > ._container > .page-header {
    margin-bottom: var(--space-5)
}

.customer-login > ._container > .content-grid {
    display: grid;
    grid-template-columns:1fr;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .customer-login > ._container > .content-grid {
        grid-template-columns:1fr 1fr;
        align-items: start
    }
}

.customer-login .benefits {
    align-self: start
}

.customer-login .benefits > .title {
    font-size: var(--font-size-h3)
}

.customer-login .login > .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.customer-login .login > .form > .link {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text1);
    align-self: flex-start
}

.customer-login .login > .form > .link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.customer-login .login > .form > .primary-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.customer-login .login > .form > .primary-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .customer-login .login > .form > .primary-button:active {
        transform: translateY(1px)
    }
}

.customer-login .login > .form > .primary-button {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%;
    justify-content: center
}

.customer-login .login > .form > .error {
    color: var(--color-error);
    background: var(--color-error-box);
    padding: var(--space-3);
    border-radius: var(--radius-1)
}

.customer-dashboard .status {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border-inline-start: 3px solid var(--color-highlight)
}

.customer-dashboard .grid {
    display: grid;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .customer-dashboard .grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        align-items: start
    }
}

.customer-dashboard .column {
    display: grid;
    gap: var(--space-5);
    align-content: start
}

.customer-dashboard .column > .title {
    margin: 0;
    font-size: var(--font-size-h2);
    line-height: var(--font-lineheight-h2);
    font-weight: var(--font-weight-bold);
    text-align: center
}

.customer-dashboard .data-card, .customer-dashboard .orders-card {
    --card-gap: var(--space-4);
    --card-padding: var(--space-4)
}

.customer-dashboard .data-card > .subtitle, .customer-dashboard .orders-card > .subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-text2)
}

.customer-dashboard .data-card > .fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.customer-dashboard .data-card > .fieldset > .data-list {
    display: grid;
    gap: var(--space-4)
}

.customer-dashboard .data-card > .fieldset > .data-list > .row {
    display: grid;
    gap: var(--space-1)
}

.customer-dashboard .data-card > .fieldset > .data-list > .row > dt {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary)
}

.customer-dashboard .data-card > .fieldset > .data-list > .row > dd {
    margin: 0
}

.customer-dashboard .data-card > .fieldset > .data-list > .row > dd > strong {
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--color-text)
}

.customer-dashboard .actions {
    --card-padding: var(--space-4);
    display: grid;
    gap: var(--space-3)
}

.customer-dashboard .actions > .action {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.customer-dashboard .actions > .action:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .customer-dashboard .actions > .action:active {
        transform: translateY(1px)
    }
}

.customer-dashboard .actions > .action {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 100%;
    text-align: center;
    white-space: normal
}

.customer-dashboard .actions > .action.-logout {
    background-color: var(--color-black);
    color: var(--color-base)
}

.customer-dashboard .orders-card > .table-wrap {
    inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.customer-dashboard .orders-card > .table-wrap > .table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse
}

@media (min-width: 768px) {
    .customer-dashboard .orders-card > .table-wrap > .table {
        min-width: 640px
    }
}

.customer-dashboard .orders-card > .table-wrap > .table > thead > tr > th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    vertical-align: top
}

.customer-dashboard .orders-card > .table-wrap > .table > tbody > tr > td {
    padding: var(--space-3) var(--space-4);
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-weak)
}

.customer-dashboard .orders-card > .table-wrap > .table > tbody > tr:last-child > td {
    border-bottom: 0
}

@media (max-width: calc(768px - 1px)) {
    .customer-dashboard .orders-card > .table-wrap > .table > thead {
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap
    }

    .customer-dashboard .orders-card > .table-wrap > .table > tbody {
        display: grid;
        gap: var(--space-4)
    }

    .customer-dashboard .orders-card > .table-wrap > .table > tbody > tr {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-border-weak);
        border-radius: var(--radius-1);
        background: var(--color-base)
    }

    .customer-dashboard .orders-card > .table-wrap > .table > tbody > tr > td {
        padding: 0;
        border: 0;
        display: grid;
        gap: var(--space-1)
    }

    .customer-dashboard .orders-card > .table-wrap > .table > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary)
    }
}

.customer-dashboard .order-number {
    display: block;
    font-weight: var(--font-weight-medium)
}

.customer-dashboard .order-date {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-text2);
    color: var(--color-text-secondary)
}

.customer-dashboard .order-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3)
}

.customer-dashboard .order-items > .item {
    display: grid;
    gap: var(--space-1)
}

.customer-dashboard .order-items > .item > .header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2)
}

@media (max-width: calc(768px - 1px)) {
    .customer-dashboard .order-items > .item > .header {
        flex-direction: column;
        align-items: flex-start
    }
}

.customer-dashboard .order-items > .item > .header > .title {
    font-weight: var(--font-weight-medium)
}

.customer-dashboard .order-items > .item > .header > .title > a {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere
}

.customer-dashboard .order-items > .item > .header > .title > a:hover, .customer-dashboard .order-items > .item > .header > .title > a:focus {
    text-decoration: underline
}

.customer-dashboard .order-items > .item > .header > .price {
    font-weight: var(--font-weight-medium)
}

.customer-dashboard .order-items > .item > .status {
    font-size: var(--font-size-text2);
    color: var(--color-text-secondary)
}

.customer-dashboard .order-total {
    font-weight: var(--font-weight-medium)
}

.customer-dashboard .order-links {
    display: grid;
    gap: var(--space-2)
}

.customer-dashboard .order-links > .tracking {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-1)
}

.customer-dashboard .order-links > .tracking > li > a {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere
}

.customer-dashboard .order-links > .tracking > li > a:hover, .customer-dashboard .order-links > .tracking > li > a:focus {
    text-decoration: underline
}

.customer-password {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap)
}

@media (min-width: 1024px) {
    .customer-password {
        gap: var(--section-gap-lg)
    }
}

.customer-password > ._container {
    display: flex;
    flex-direction: column;
    padding-inline: 0
}

.customer-password > ._container > .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5)
}

.customer-password > ._container > .page-header > .title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center
}

.customer-password > ._container > .content-grid {
    display: grid;
    grid-template-columns:1fr;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .customer-password > ._container > .content-grid {
        grid-template-columns:1fr 1fr;
        align-items: start
    }
}

.customer-password .requirements {
    align-self: start
}

.customer-password .requirements > .title {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.customer-password .requirements > .list {
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.customer-password .form-card > .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.customer-password .form-card > .form > .error {
    color: var(--color-error);
    background: var(--color-error-box);
    padding: var(--space-3);
    border-radius: var(--radius-1)
}

.customer-password .form-card > .form > .actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

@media (min-width: 1024px) {
    .customer-password .form-card > .form > .actions {
        flex-direction: row
    }
}

.customer-password .form-card > .form > .actions > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.customer-password .form-card > .form > .actions > .submit-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.customer-password .form-card > .form > .actions > .submit-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .customer-password .form-card > .form > .actions > .submit-button:active {
        transform: translateY(1px)
    }
}

.customer-password .form-card > .form > .actions > .submit-button {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.customer-password .form-card > .form > .actions > .cancel-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.customer-password .form-card > .form > .actions > .cancel-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .customer-password .form-card > .form > .actions > .cancel-button:active {
        transform: translateY(1px)
    }
}

.customer-password .form-card > .form > .actions > .cancel-button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    background-color: var(--color-black);
    color: var(--color-base);
    width: 100%
}

.customer-lost-password {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap)
}

@media (min-width: 1024px) {
    .customer-lost-password {
        gap: var(--section-gap-lg)
    }
}

.customer-lost-password > ._container {
    display: flex;
    flex-direction: column;
    padding-inline: 0
}

.customer-lost-password > ._container > .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5)
}

.customer-lost-password > ._container > .page-header > .title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center
}

.customer-lost-password > ._container > .content-grid {
    display: grid;
    grid-template-columns:1fr;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .customer-lost-password > ._container > .content-grid {
        grid-template-columns:1fr 1fr;
        align-items: start
    }
}

.customer-lost-password .info {
    align-self: start
}

.customer-lost-password .info > .title {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.customer-lost-password .info > .text {
    display: flex;
    flex-direction: column
}

.customer-lost-password .info > .text > p {
    margin: 0;
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.customer-lost-password .form-card > .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

.customer-lost-password .form-card > .form > .error {
    color: var(--color-error);
    background: var(--color-error-box);
    padding: var(--space-3);
    border-radius: var(--radius-1)
}

.customer-lost-password .form-card > .form > .success {
    color: var(--color-confirm);
    background: var(--color-confirm-box);
    padding: var(--space-3);
    border-radius: var(--radius-1)
}

.customer-lost-password .form-card > .form > .submit-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.customer-lost-password .form-card > .form > .submit-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .customer-lost-password .form-card > .form > .submit-button:active {
        transform: translateY(1px)
    }
}

.customer-lost-password .form-card > .form > .submit-button {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.page-search > .image-banner.-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-6) 0
}

.page-search > .image-banner.-empty > .viewport {
    position: relative;
    --smiley-size: 320px;
    --smiley-rotation: 25deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(135deg, #e9e9e9 0%, #f1f1f1 100%);
    --smiley-opacity: 1
}

.page-search > .image-banner.-empty > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-search > .image-banner.-empty > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 25deg;
        --smiley-pos-x: 55%;
        --smiley-pos-y: 50%
    }
}

.page-search > .image-banner.-empty > .viewport {
    height: var(--module-size);
    background: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1)
}

.page-search > .image-banner.-empty > .viewport > .content {
    max-width: 520px;
    width: 100%;
    padding-inline: var(--space-4);
    color: var(--color-black);
    gap: var(--space-4);
    text-align: center
}

.page-search > .image-banner.-empty > .viewport > .content > .title {
    margin: 0
}

.page-search > .image-banner.-empty > .viewport > .content > .title > .label {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.01em
}

.page-search > .image-banner.-empty > .viewport > .content > .heading-2 {
    margin: 0
}

.page-search > .image-banner.-empty > .viewport > .content > span:not(.heading-2) {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text)
}

.page-search > .image-banner.-empty > .viewport > .content > .action.primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.page-search > .image-banner.-empty > .viewport > .content > .action.primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .page-search > .image-banner.-empty > .viewport > .content > .action.primary:active {
        transform: translateY(1px)
    }
}

.page-search > .image-banner.-empty > .viewport > .content > .action.primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%;
    max-width: var(--button-width)
}

.page-search > .content {
    padding: var(--space-4);
    text-align: center
}

.page-search > .sidebar-layout > .primary > .content > .search-heading {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    color: var(--color-text);
    margin: 0 0 var(--space-5) 0;
    text-align: center
}

.accordion-item .accordion-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.accordion-item .accordion-content .content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.accordion-item .accordion-content .content-inner .tracking-container {
    display: flex;
    gap: var(--space-4)
}

.accordion-item .accordion-content .content-inner .tracking-container .tracking-container-left, .accordion-item .accordion-content .content-inner .tracking-container .tracking-container-right {
    flex: 1
}

.accordion-item .accordion-content .content-inner .tracking-container a {
    color: var(--color-text);
    text-decoration: underline
}

.accordion-item .accordion-content .content-inner .tracking-container a:hover {
    text-decoration: underline
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-input {
    display: none
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-buttons {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4)
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-buttons .toggle-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-buttons .toggle-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .accordion-item .accordion-content .content-inner .toggle-container .toggle-buttons .toggle-button:active {
        transform: translateY(1px)
    }
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-buttons .toggle-button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    width: 25%;
    min-width: 80px;
    cursor: pointer;
    text-align: center;
    transition: all .2s ease;
    background-color: var(--color-background, #fff);
    color: var(--color-text);
    border: 1px solid var(--color-border, #ddd)
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-buttons .toggle-button:hover {
    background-color: var(--color-background-hover, #f5f5f5)
}

.accordion-item .accordion-content .content-inner .toggle-container .toggle-content-ja, .accordion-item .accordion-content .content-inner .toggle-container .toggle-content-nein {
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--border-radius, 4px);
    background-color: var(--color-background-light, #f9f9f9)
}

.accordion-item .accordion-content .content-inner .toggle-container #toggle-ja:checked ~ .toggle-buttons label[for=toggle-ja], .accordion-item .accordion-content .content-inner .toggle-container #lieferzeit-ja:checked ~ .toggle-buttons label[for=lieferzeit-ja] {
    background-color: var(--color-primary, #de5a13);
    color: #fff;
    border-color: var(--color-primary, #de5a13)
}

.accordion-item .accordion-content .content-inner .toggle-container #toggle-nein:checked ~ .toggle-buttons label[for=toggle-nein], .accordion-item .accordion-content .content-inner .toggle-container #lieferzeit-nein:checked ~ .toggle-buttons label[for=lieferzeit-nein] {
    background-color: var(--color-primary, #de5a13);
    color: #fff;
    border-color: var(--color-primary, #de5a13)
}

.accordion-item .accordion-content .content-inner .toggle-container #toggle-ja:checked ~ .toggle-content-ja, .accordion-item .accordion-content .content-inner .toggle-container #lieferzeit-ja:checked ~ .toggle-content-ja {
    display: flex
}

.accordion-item .accordion-content .content-inner .toggle-container #toggle-nein:checked ~ .toggle-content-nein, .accordion-item .accordion-content .content-inner .toggle-container #lieferzeit-nein:checked ~ .toggle-content-nein {
    display: flex
}

.accordion-item .accordion-content .content-inner h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    color: var(--color-text);
    margin: 0
}

.accordion-item .accordion-content .content-inner p {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin: 0
}

.accordion-item .accordion-content .content-inner ul {
    margin: 0;
    padding-left: var(--space-5)
}

.accordion-item .accordion-content .content-inner .form-hint {
    font-size: var(--font-size-text3);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    margin: 0
}

.accordion-item .accordion-content .content-inner .btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.accordion-item .accordion-content .content-inner .btn-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .accordion-item .accordion-content .content-inner .btn-primary:active {
        transform: translateY(1px)
    }
}

.accordion-item .accordion-content .content-inner .btn-primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.accordion-item .accordion-content .content-inner form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.accordion-item .accordion-content .content-inner form .btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.accordion-item .accordion-content .content-inner form .btn-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .accordion-item .accordion-content .content-inner form .btn-primary:active {
        transform: translateY(1px)
    }
}

.accordion-item .accordion-content .content-inner form .btn-primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.accordion-item .accordion-content .content-inner form .file-upload-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.accordion-item .accordion-content .content-inner form .file-upload-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .accordion-item .accordion-content .content-inner form .file-upload-btn:active {
        transform: translateY(1px)
    }
}

.accordion-item .accordion-content .content-inner form .file-upload-btn {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    cursor: pointer
}

.accordion-item .accordion-content .content-inner form .file-upload-btn svg {
    width: var(--icon-size);
    height: var(--icon-size)
}

@media (max-width: calc(1024px - 1px)) {
    .accordion-item > .accordion-content.-active {
        display: flex
    }
}

.service-anfrage-page {
    max-width: var(--container-max);
    margin-inline: auto
}

.service-anfrage-page > h1 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-5)
}

@media (min-width: 1024px) {
    .service-anfrage-page > h1 {
        margin-bottom: var(--space-6)
    }
}

.service-anfrage-page > .back-button {
    display: none;
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-anfrage-page > .back-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-anfrage-page > .back-button:active {
        transform: translateY(1px)
    }
}

.service-anfrage-page > .back-button {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.service-anfrage-page > .back-button > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.service-anfrage-page > .back-button {
    margin-bottom: var(--space-5);
    width: 100%;
    min-height: var(--button-height)
}

.service-anfrage-page > .back-button > .text {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3)
}

.service-anfrage-page > .back-button.-visible {
    display: inline-flex
}

@media (min-width: 1024px) {
    .service-anfrage-page > .back-button {
        display: none !important
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    box-shadow: none
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar.-hidden {
    display: none
}

@media (min-width: 1024px) {
    .service-anfrage-page > .sidebar-layout > .anfrage-sidebar.-hidden {
        display: flex
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text)
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item:hover > .label {
    text-decoration: underline
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item[aria-current=page] > .label {
    text-decoration: underline
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item > .label {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-h3);
    text-wrap: balance;
    text-align: left
}

.service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    margin-left: auto
}

@media (min-width: 1024px) {
    .service-anfrage-page > .sidebar-layout > .anfrage-sidebar {
        padding: var(--space-4);
        gap: var(--space-5);
        background-color: var(--color-base);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-1)
    }

    .service-anfrage-page > .sidebar-layout > .anfrage-sidebar > .nav-item {
        padding: 0;
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
        border-radius: 0
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome {
    display: none
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome.-active {
    display: block
}

@media (max-width: calc(1024px - 1px)) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome.-active {
        display: none
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport {
    position: relative;
    --smiley-size: 300px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(90deg, var(--goodie-orange-start) 20%, var(--goodie-orange-end) 80%);
    --smiley-opacity: 0.45
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport {
        --smiley-size: 1200px;
        --smiley-rotation: 25deg;
        --smiley-pos-x: 50%;
        --smiley-pos-y: 50%
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport {
    width: 100%;
    height: var(--banner-height, var(--module-size));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-base);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: hidden
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport > .content {
    position: relative;
    z-index: 1;
    text-align: center
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport > .content > .heading {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h1);
    color: var(--color-text);
    margin: 0
}

@media (min-width: 1024px) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .welcome > .image-banner > .viewport > .content > .heading {
        font-size: var(--font-size-h1)
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content {
    display: none
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

@media (min-width: 1024px) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble {
        padding: var(--space-5)
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > p {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > ul {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin: 0;
    padding-left: var(--space-5)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > ul > li {
    margin-bottom: var(--space-2)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > ul > li:last-child {
    margin-bottom: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-4) 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item > .delivery-icon {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    min-width: 200px
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item > .delivery-icon > img {
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item > .delivery-icon > .delivery-label {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-text2);
    color: var(--color-text);
    white-space: nowrap
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item > .delivery-icon > .delivery-label.delivery-label-green {
    color: #28a745
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item > .delivery-text {
    flex: 1
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .explainer-bubble > .delivery-times-list > .delivery-time-item > .delivery-text > p {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    margin: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form {
        padding: var(--space-5)
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .form-field > .field-error {
    margin-top: var(--space-2);
    font-size: var(--font-size-text3);
    line-height: var(--font-lineheight-text3);
    color: #721c24;
    font-weight: var(--font-weight-medium)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .form-field > .field-error:empty {
    display: none
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .btn-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .btn-primary:active {
        transform: translateY(1px)
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .btn-primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .btn-primary.-loading {
    opacity: .6;
    cursor: wait
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > form > .form-divider {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    text-align: center;
    margin: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .simple-form > .service-note {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .service-note {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    border: none;
    cursor: pointer;
    width: 100%;
    text-decoration: none
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger:hover > .trigger-content > .trigger-left > .label {
    text-decoration: underline
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger > .trigger-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger > .trigger-content > .trigger-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger > .trigger-content > .trigger-left > .label {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-text1)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger > .trigger-content > .chevron {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    margin-left: auto
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-trigger[aria-expanded=true] > .trigger-content > .chevron {
    transform: rotate(90deg)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    opacity: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content.-active {
    max-height: 100%;
    margin-top: var(--space-4);
    opacity: 1;
    margin-bottom: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > form > .btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > form > .btn-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > form > .btn-primary:active {
        transform: translateY(1px)
    }
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > form > .btn-primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > form > .form-divider {
    font-size: var(--font-size-text1);
    line-height: var(--font-lineheight-text1);
    color: var(--color-text);
    text-align: center;
    margin: 0
}

.service-anfrage-page > .sidebar-layout > .anfrage-content > .section-content.-active > .sub-accordions > .accordion-item > .accordion-content > .content-inner > .service-note {
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-text3);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0
}

.service-center-page {
    max-width: var(--container-max);
    margin-inline: auto
}

.service-center-page > h1 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-5)
}

@media (min-width: 1024px) {
    .service-center-page > h1 {
        margin-bottom: var(--space-6)
    }
}

.service-center-page > .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center
}

.service-center-page > .page-header > .title, .service-center-page > .page-header > h1, .service-center-page > .page-header > h2, .service-center-page > .page-header > h3 {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h2);
    color: var(--color-text);
    text-align: center
}

.service-center-page > .page-header {
    margin-bottom: var(--space-5)
}

@media (min-width: 1024px) {
    .service-center-page > .page-header {
        margin-bottom: var(--space-6)
    }
}

.service-center-page > .page-header > .btn-back {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-center-page > .page-header > .btn-back:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-center-page > .page-header > .btn-back:active {
        transform: translateY(1px)
    }
}

.service-center-page > .page-header > .btn-back {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.service-center-page > .page-header > .btn-back > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.service-center-page > .page-header > .btn-back {
    align-self: flex-start;
    width: 100%
}

.service-center-page > .page-header > .btn-back > svg {
    width: var(--icon-size);
    height: var(--icon-size)
}

.service-center-page > .order-info-header {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5)
}

@media (min-width: 1024px) {
    .service-center-page > .order-info-header {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: var(--space-6)
    }
}

.service-center-page > .order-info-header > .order-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

.service-center-page > .order-info-header > .order-info-item > .label {
    font-size: var(--font-size-text2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: var(--font-lineheight-text2)
}

.service-center-page > .order-info-header > .order-info-item > .label.highlight {
    color: var(--color-highlight)
}

.service-center-page > .order-info-header > .order-info-item > .label.confirm {
    color: var(--color-confirm)
}

.service-center-page > .order-info-header > .order-info-item > .value {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--font-lineheight-text1)
}

.service-center-page > .order-info-header > .order-info-item > .value.highlight {
    color: var(--color-highlight)
}

.service-center-page > .order-info-header > .order-info-item > .value.confirm {
    color: var(--color-confirm)
}

.service-center-page > .order-info-header > .order-info-item > .value.status-sent {
    color: var(--color-confirm)
}

.service-center-page > .order-info-header > .order-info-item > .value.status-not-sent {
    color: var(--color-text-secondary)
}

.service-center-page > .order-info-header > .order-info-item > a.value {
    text-decoration: underline
}

.service-center-page > .service-accordions {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (min-width: 1024px) {
    .service-center-page > .service-accordions {
        gap: var(--space-6)
    }
}

.service-center-page > .service-accordions > .accordions-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .service-center-page > .service-accordions > .accordions-row {
        flex-direction: row;
        gap: var(--space-5)
    }
}

.service-center-page > .service-accordions > .accordions-row > .accordions-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1
}

@media (min-width: 1024px) {
    .service-center-page > .service-accordions > .accordions-row > .accordions-col {
        gap: var(--space-5)
    }
}

.service-entry > .paths {
    display: grid;
    grid-template-columns:1fr;
    gap: var(--space-5);
    align-items: start
}

@media (min-width: 1024px) {
    .service-entry > .paths {
        grid-template-columns:repeat(2, 1fr);
        gap: var(--space-6)
    }
}

.service-entry > .paths > .path-card {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .service-entry > .paths > .path-card {
        padding: var(--space-6);
        gap: var(--space-5)
    }
}

.service-entry > .paths > .path-card > .heading {
    font-size: var(--font-size-text1);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    line-height: var(--font-lineheight-text1)
}

.service-entry > .paths > .path-card > .path-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1
}

.service-entry > .paths > .path-card > .actions, .service-entry > .paths > .path-card > .path-form > .actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

@media (min-width: 1024px) {
    .service-entry > .paths > .path-card > .actions, .service-entry > .paths > .path-card > .path-form > .actions {
        flex-direction: row
    }
}

.service-entry > .paths > .path-card > .actions > *, .service-entry > .paths > .path-card > .path-form > .actions > * {
    flex: 1 1 0%;
    min-height: var(--button-height)
}

.service-entry > .paths > .path-card > .actions, .service-entry > .paths > .path-card > .path-form > .actions {
    margin-top: auto;
    flex-direction: column
}

.service-entry > .paths > .path-card > .actions > .btn-primary, .service-entry > .paths > .path-card > .path-form > .actions > .btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-entry > .paths > .path-card > .actions > .btn-primary:focus-visible, .service-entry > .paths > .path-card > .path-form > .actions > .btn-primary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-entry > .paths > .path-card > .actions > .btn-primary:active, .service-entry > .paths > .path-card > .path-form > .actions > .btn-primary:active {
        transform: translateY(1px)
    }
}

.service-entry > .paths > .path-card > .actions > .btn-primary, .service-entry > .paths > .path-card > .path-form > .actions > .btn-primary {
    background-color: var(--color-highlight);
    color: var(--color-base);
    width: 100%;
    text-decoration: none
}

.service-entry > .paths > .path-card > .actions > .btn-back, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-entry > .paths > .path-card > .actions > .btn-back:focus-visible, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-entry > .paths > .path-card > .actions > .btn-back:active, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back:active {
        transform: translateY(1px)
    }
}

.service-entry > .paths > .path-card > .actions > .btn-back, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.service-entry > .paths > .path-card > .actions > .btn-back > .icon, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.service-entry > .paths > .path-card > .actions > .btn-back, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back {
    justify-content: center;
    text-decoration: none;
    width: 100%
}

.service-entry > .paths > .path-card > .actions > .btn-back > svg, .service-entry > .paths > .path-card > .path-form > .actions > .btn-back > svg {
    width: var(--icon-size);
    height: var(--icon-size)
}

.service-entry > .placeholder-content {
    background: var(--color-base);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center
}

@media (min-width: 1024px) {
    .service-entry > .placeholder-content {
        padding: var(--space-6)
    }
}

.service-entry > .placeholder-content > p {
    font-size: var(--font-size-text1);
    color: var(--color-text-secondary);
    margin: 0
}

.service-entry > .placeholder-content > .btn-back {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding-inline: var(--space-5);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow-button);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-lineheight-h3);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.service-entry > .placeholder-content > .btn-back:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

@media (hover: none) {
    .service-entry > .placeholder-content > .btn-back:active {
        transform: translateY(1px)
    }
}

.service-entry > .placeholder-content > .btn-back {
    border: 2px solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap)
}

.service-entry > .placeholder-content > .btn-back > .icon {
    width: var(--icon-size);
    height: var(--icon-size)
}

.service-entry > .placeholder-content > .btn-back {
    justify-content: center;
    text-decoration: none;
    align-self: center;
    width: 100%;
    max-width: var(--button-width)
}

.service-entry > .placeholder-content > .btn-back > svg {
    width: var(--icon-size);
    height: var(--icon-size)
}

.page-home > .top-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%
}

.page-home > .top-categories > .category-banner {
    width: 100%
}

.page-home > .top-categories > .category-banner > .image-banner > .viewport {
    height: var(--module-size);
    position: relative
}

@media (max-width: calc(1024px - 1px)) {
    .page-home > .top-categories > .category-banner > .image-banner > .viewport {
        position: relative
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-100% - var(--space-4)));
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        text-align: center;
        color: var(--color-text)
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .title {
        font-size: clamp(var(--font-size-h3), 2vw + 1rem, var(--font-size-h1));
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h1);
        margin: 0;
        text-align: center
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--button-height);
        padding-inline: var(--space-5);
        border-radius: var(--button-radius);
        box-shadow: var(--shadow-button);
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h3);
        cursor: pointer;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset)
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action {
        border: 2px solid var(--color-text);
        color: var(--color-text);
        text-decoration: none;
        font-size: var(--font-size-text1);
        font-weight: var(--font-weight-bold);
        padding: var(--space-2) var(--space-4);
        min-height: auto
    }
}

@media (max-width: calc(1024px - 1px))and (hover: none) {
    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action:active {
        transform: translateY(1px)
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, var(--space-4));
        width: auto;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        z-index: 1;
        display: block
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .image.-zaehlerschrank1 {
        margin-left: -50px
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .image.-zaehlerschrank2 {
        margin-left: 80px;
        margin-top: 40px
    }
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content {
        position: absolute;
        right: calc(50% + var(--space-5));
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-4);
        text-align: left;
        color: var(--color-text)
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .title {
        font-size: var(--font-size-h1);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h1);
        margin: 0;
        text-align: right
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--button-height);
        padding-inline: var(--space-5);
        border-radius: var(--button-radius);
        box-shadow: var(--shadow-button);
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h3);
        cursor: pointer;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset)
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action {
        border: 2px solid var(--color-text);
        color: var(--color-text);
        text-decoration: none;
        font-size: var(--font-size-text1);
        font-weight: var(--font-weight-bold);
        padding: var(--space-2) var(--space-4);
        min-height: auto
    }
}

@media (min-width: 1024px)and (hover: none) {
    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .content > .action:active {
        transform: translateY(1px)
    }
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .image {
        position: absolute;
        inset: auto;
        left: calc(50% + var(--space-5));
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        z-index: 2;
        display: block
    }

    .page-home > .top-categories > .category-banner > .image-banner > .viewport > .image.-zaehlerschrank2 {
        margin-left: 170px;
        margin-top: -50px
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-home > .top-categories > .category-banner.-haus-garten-camping > .image-banner > .viewport > .image {
        width: 300px;
        height: 136px
    }
}

.page-home > .top-categories > .category-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%
}

.page-home > .top-categories > .category-row > .category-banner {
    width: 100%
}

.page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport {
    height: var(--module-size);
    position: relative
}

@media (max-width: calc(1024px - 1px)) {
    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-100% - var(--space-4)));
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        text-align: center;
        color: var(--color-text)
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .title {
        font-size: clamp(var(--font-size-h3), 2vw + 1rem, var(--font-size-h1));
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h1);
        margin: 0;
        text-align: center
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--button-height);
        padding-inline: var(--space-5);
        border-radius: var(--button-radius);
        box-shadow: var(--shadow-button);
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h3);
        cursor: pointer;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset)
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action {
        border: 2px solid var(--color-text);
        color: var(--color-text);
        text-decoration: none;
        font-size: var(--font-size-text1);
        font-weight: var(--font-weight-bold);
        padding: var(--space-2) var(--space-4);
        min-height: auto
    }
}

@media (max-width: calc(1024px - 1px))and (hover: none) {
    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action:active {
        transform: translateY(1px)
    }
}

@media (max-width: calc(1024px - 1px)) {
    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, var(--space-4));
        width: auto;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        z-index: 1;
        display: block
    }
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content {
        position: absolute;
        right: calc(50% + var(--space-5));
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-4);
        text-align: left;
        color: var(--color-text)
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .title {
        font-size: var(--font-size-h1);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h1);
        margin: 0;
        text-align: right
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--button-height);
        padding-inline: var(--space-5);
        border-radius: var(--button-radius);
        box-shadow: var(--shadow-button);
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-lineheight-h3);
        cursor: pointer;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset)
    }

    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action {
        border: 2px solid var(--color-text);
        color: var(--color-text);
        text-decoration: none;
        font-size: var(--font-size-text1);
        font-weight: var(--font-weight-bold);
        padding: var(--space-2) var(--space-4);
        min-height: auto
    }
}

@media (min-width: 1024px)and (hover: none) {
    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .content > .action:active {
        transform: translateY(1px)
    }
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner > .image-banner > .viewport > .image {
        position: absolute;
        inset: auto;
        left: calc(50% + var(--space-5));
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        z-index: 2;
        display: block
    }
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-grillen > .image-banner > .viewport > .content {
        right: calc(50% + var(--space-8))
    }

    .page-home > .top-categories > .category-row > .category-banner.-grillen > .image-banner > .viewport > .image {
        left: calc(50% + var(--space-1))
    }
}

@media (min-width: 1024px) {
    .page-home > .top-categories {
        gap: var(--space-5)
    }

    .page-home > .top-categories > .category-row {
        flex-direction: row;
        gap: var(--space-5)
    }

    .page-home > .top-categories > .category-row > .category-banner.-half-width {
        width: calc(50% - var(--space-5) / 2);
        flex: 0 0 calc(50% - var(--space-5) / 2)
    }
}

.page-home > .top-categories > .category-banner.-zaehlerschraenke > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: -35deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 40%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-purple-start) 20%, var(--goodie-purple-end) 80%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-banner.-zaehlerschraenke > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-banner.-zaehlerschraenke > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: -35deg;
        --smiley-pos-x: 50%;
        --smiley-pos-y: 50%
    }
}

.page-home > .top-categories > .category-row > .category-banner.-steckdosen > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: 35deg;
    --smiley-pos-x: 50%;
    --smiley-pos-y: 66%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-green-start) 20%, var(--goodie-green-end) 80%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-row > .category-banner.-steckdosen > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-steckdosen > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 35deg;
        --smiley-pos-x: 60%;
        --smiley-pos-y: 50%
    }
}

.page-home > .top-categories > .category-row > .category-banner.-smarthome > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: -45deg;
    --smiley-pos-x: 17%;
    --smiley-pos-y: 38%;
    --smiley-gradient: linear-gradient(90deg, var(--goodie-orange-start) 20%, var(--goodie-orange-end) 80%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-row > .category-banner.-smarthome > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-smarthome > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 45deg;
        --smiley-pos-x: 47%;
        --smiley-pos-y: -59%
    }
}

.page-home > .top-categories > .category-banner.-waschmaschine > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: -35deg;
    --smiley-pos-x: 62%;
    --smiley-pos-y: 47%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-blue-start) 20%, var(--goodie-blue-end) 90%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-banner.-waschmaschine > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-banner.-waschmaschine > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: -50deg;
        --smiley-pos-x: 51%;
        --smiley-pos-y: 20%
    }
}

.page-home > .top-categories > .category-row > .category-banner.-kaffeegenuss > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 31%;
    --smiley-pos-y: 35%;
    --smiley-gradient: linear-gradient(305deg, #ffae00, #da4d4d);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-row > .category-banner.-kaffeegenuss > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-kaffeegenuss > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 45deg;
        --smiley-pos-x: 31%;
        --smiley-pos-y: 4%
    }
}

.page-home > .top-categories > .category-row > .category-banner.-kuehlen-gefrieren > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: 35deg;
    --smiley-pos-x: 75%;
    --smiley-pos-y: 40%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-blue-start) 20%, var(--goodie-blue-end) 90%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-row > .category-banner.-kuehlen-gefrieren > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-kuehlen-gefrieren > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 35deg;
        --smiley-pos-x: 60%;
        --smiley-pos-y: 50%
    }
}

.page-home > .top-categories > .category-banner.-haus-garten-camping > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: -50deg;
    --smiley-pos-x: 54%;
    --smiley-pos-y: 44%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-green-start) 20%, var(--goodie-green-end) 80%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-banner.-haus-garten-camping > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-banner.-haus-garten-camping > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: -50deg;
        --smiley-pos-x: 54%;
        --smiley-pos-y: 44%
    }
}

.page-home > .top-categories > .category-row > .category-banner.-braeter-toepfe-pfannen > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: 35deg;
    --smiley-pos-x: 87%;
    --smiley-pos-y: 50%;
    --smiley-gradient: linear-gradient(0deg, var(--goodie-blue-start) 20%, var(--goodie-blue-end) 90%);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-row > .category-banner.-braeter-toepfe-pfannen > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-braeter-toepfe-pfannen > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 35deg;
        --smiley-pos-x: 60%;
        --smiley-pos-y: 50%
    }
}

.page-home > .top-categories > .category-row > .category-banner.-grillen > .image-banner > .viewport {
    position: relative;
    --smiley-size: 500px;
    --smiley-rotation: 45deg;
    --smiley-pos-x: 59%;
    --smiley-pos-y: 14%;
    --smiley-gradient: linear-gradient(305deg, #ffae00, #da4d4d);
    --smiley-opacity: 0.3
}

.page-home > .top-categories > .category-row > .category-banner.-grillen > .image-banner > .viewport::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: var(--smiley-gradient);
    opacity: var(--smiley-opacity);
    -webkit-mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    mask: url("/assets/images/goodie-smiley-white.svg") no-repeat var(--smiley-pos-x) var(--smiley-pos-y)/var(--smiley-size);
    transform: rotate(var(--smiley-rotation))
}

@media (min-width: 1024px) {
    .page-home > .top-categories > .category-row > .category-banner.-grillen > .image-banner > .viewport {
        --smiley-size: 800px;
        --smiley-rotation: 45deg;
        --smiley-pos-x: 31%;
        --smiley-pos-y: 4%
    }
}

:root {
    --sticky-header-offset: 200px
}

@media (max-width: calc(1024px - 1px)) {
    :root {
        --sticky-header-offset: 116px
    }
}

.page-device #top-products {
    max-width: 100%;
    display: grid;
    gap: var(--space-5);
    scroll-margin-top: var(--sticky-header-offset)
}

@media (max-width: 1023.98px) {
    .page-device #top-products {
        gap: var(--space-4)
    }
}

@media (min-width: 1024px) {
    .page-device .device-sidebar .device-info {
        padding: var(--space-5)
    }
}

@media (max-width: 1023.98px) {
    .page-device .device-sidebar .device-info {
        margin-bottom: var(--space-4)
    }
}

.page-device .device-sidebar .facts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.page-device .device-sidebar .facts-table td {
    vertical-align: top
}

.page-device .device-sidebar .facts-table tr:not(:first-child) td {
    padding-top: var(--space-5)
}

@media (max-width: 1023.98px) {
    .page-device .device-sidebar .facts-table tr:not(:first-child) td {
        padding-top: var(--space-4)
    }
}

.page-device .device-sidebar .device-info {
    padding: var(--space-5);
    margin-bottom: var(--space-5)
}

@media (max-width: 1023.98px) {
    .page-device .device-sidebar .device-info {
        margin-bottom: var(--space-4)
    }
}

.page-device .device-sidebar .device-info .title {
    margin-bottom: var(--space-5)
}

@media (max-width: 1023.98px) {
    .page-device .device-sidebar .device-info .title {
        margin-bottom: var(--space-4)
    }
}

.page-device .device-sidebar .device-info .device-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-5)
}

@media (max-width: 1023.98px) {
    .page-device .device-sidebar .device-info .device-facts {
        gap: var(--space-4)
    }
}

.page-device .device-sidebar .device-info .fact-item {
    display: flex;
    flex-direction: column;
    gap: 0
}

.page-device .device-sidebar .device-info .fact-label {
    font-weight: var(--font-weight-regular)
}

.page-device .device-sidebar .device-info .fact-value {
    font-weight: var(--font-weight-bold)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .heading-3 {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-weak)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .option-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    position: relative
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .label {
    order: 1;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
    text-align: left
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkmark {
    order: 2;
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin-left: auto;
    margin-right: 0;
    border: 2px solid var(--color-selection);
    border-radius: 5px;
    background: var(--color-base)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 10px;
    height: 6px;
    border: solid var(--color-base);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    display: none
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkbox-input {
    order: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    opacity: 0
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkbox-input:focus-visible + .checkmark {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkbox-input:checked + .checkmark {
    background-color: var(--color-text);
    border-color: var(--color-text)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkbox-input:checked + .checkmark::after {
    display: block
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .checkbox-input:checked ~ .label {
    font-weight: var(--font-weight-bold)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .quantity {
    order: 3;
    margin-left: var(--space-2)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .listing-filter__info-tooltip {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 auto;
    vertical-align: top;
    transform: translateY(-0.32rem)
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .listing-filter__info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    cursor: help
}

.page-device .device-sidebar .category-filter[data-render-mode=compact] .filters-container .checkbox-option .listing-filter__info-trigger > .icon {
    display: block;
    width: .9rem;
    height: .9rem;
    filter: brightness(0)
}

.page-device .device-products-header {
    background-color: var(--color-confirm-box);
    border-radius: var(--radius-2);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    font-weight: bold;
    font-size: 1.5rem
}

.modalWindow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 100000
}

.modalWindowInner {
    position: fixed;
    top: 0;
    left: 0;
    width: 900px;
    height: 600px;
    background-color: var(--color-base, #fff);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    z-index: 100001
}

.modalWindowInner .window_content {
    padding: var(--space-5, 10px)
}

.modalWindowInner .window_close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer
}

.modalWindowInner_scroller {
    overflow: auto;
    margin: 20px
}

.modalWindowSmall {
    width: 500px;
    height: 350px
}

.autocomplete-parent {
    position: relative
}

.autocomplete-list {
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-base);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: auto;
    max-height: 50vh;
    box-sizing: border-box
}

.autocomplete-item {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-left: 4px solid rgba(0, 0, 0, 0);
    transition: background-color .15s ease, color .15s ease
}

.autocomplete-item + .autocomplete-item {
    border-top: 1px solid var(--color-border)
}

@media (hover: hover)and (pointer: fine) {
    .autocomplete-item:hover {
        background-color: var(--color-surface-muted);
        text-decoration: underline
    }
}

.autocomplete-item.is-active {
    background-color: var(--color-surface-muted);
    border-left-color: var(--color-highlight-2)
}

.autocomplete-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    background-color: var(--color-surface-muted);
    border-left-color: var(--color-highlight-2)
}

.info-tooltip, .product-description__auto-link {
    position: relative
}

@media (hover: hover)and (pointer: fine) {
    .info-tooltip:hover .info-tooltip__bubble, .info-tooltip:hover .product-description__auto-link-tooltip-bubble, .product-description__auto-link:hover .info-tooltip__bubble, .product-description__auto-link:hover .product-description__auto-link-tooltip-bubble {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0)
    }
}

.info-tooltip:focus-within .info-tooltip__bubble, .info-tooltip:focus-within .product-description__auto-link-tooltip-bubble, .product-description__auto-link:focus-within .info-tooltip__bubble, .product-description__auto-link:focus-within .product-description__auto-link-tooltip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

.info-tooltip__trigger, .product-description__auto-link-anchor {
    border-radius: var(--radius-1)
}

.info-tooltip__bubble, .product-description__auto-link-tooltip-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-2));
    z-index: 30;
    display: block;
    width: -moz-max-content;
    width: max-content;
    max-width: min(18rem, 100vw - 2 * var(--space-4));
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    background: var(--color-text);
    box-shadow: var(--shadow-1);
    color: var(--color-base);
    font-size: var(--font-size-text3);
    font-weight: var(--font-weight-regular);
    line-height: var(--font-lineheight-text1);
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, var(--space-1));
    transition: opacity var(--btn-anim-fade) ease, transform var(--btn-anim-fade) ease, visibility var(--btn-anim-fade) ease
}

.info-tooltip__bubble::after, .product-description__auto-link-tooltip-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: var(--space-2);
    height: var(--space-2);
    background: var(--color-text);
    transform: translate(-50%, -50%) rotate(45deg)
}

@media (prefers-reduced-motion: reduce) {
    .info-tooltip__bubble, .product-description__auto-link-tooltip-bubble {
        transition: none
    }
}

#product_description_loadbee_content {
    position: relative
}

.product_description_loadbee_content_hidden {
    max-height: 1600px;
    overflow: visible;
    clip-path: inset(-100vmax -100vmax 0 -100vmax)
}

.product_description_loadbee_content_hidden::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 60%, var(--color-base));
    pointer-events: none
}

.loadbeeTabContent {
    display: none
}

#product_description_loadbee.is-expanded + .loadbeeTabContent {
    display: block
}

.product-details-nav > .detail-group > #section-alternative.detail-section {
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: grid;
    gap: var(--space-4)
}

@media (min-width: 1024px) {
    .product-details-nav > .detail-group > #section-alternative.detail-section {
        gap: var(--space-5)
    }
}

.product-details-nav > .detail-group > #section-alternative.detail-section.-active {
    padding: 0
}

@media (max-width: calc(1024px - 1px)) {
    .product-details-nav > .detail-group > #section-alternative.detail-section {
        display: none
    }

    .product-details-nav > .detail-group > #section-alternative.detail-section.-active {
        display: grid
    }
}

@media (min-width: 1024px) {
    .product-details-nav > .detail-group > .detail-section.-active {
        margin-bottom: 0
    }
}