/* Start:/local/templates/seemo/assets/css/main.css?1782895251445473*/
@charset "UTF-8";@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;object-fit:contain;transition: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%;object-fit:fill}picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;object-fit:contain;transition:none;user-select:none}.f-panzoom__protected{position:absolute;inset:0;z-index:1;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;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;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);object-fit:var(--f-thumb-img-fit);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;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);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)}.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}
/**
 * Swiper 12.1.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 18, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}


/* Suisse Int'l — used for headings, prices and button labels across the site.
   Single-weight web kit; the range 100–900 maps every requested weight onto it
   so the browser never synthesises a faux-bold. Declared as 'Suisse Intl' (with
   a space) to match every existing reference in the codebase. */
@font-face {
  font-family: "Suisse Intl";
  src: url("/local/templates/seemo/assets/css/../suisseintl.woff2") format("woff2"), url("/local/templates/seemo/assets/css/../suisseintl.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-soft: #4b5866;
  --color-accent: #f4a900;
  --color-dark: #1a1a1a;
  --color-white: #ffffff;
  font-family: "Inter", sans-serif;
  color: var(--color-text);
}
* {
  box-sizing: border-box;
}
main {
  min-height: 90vh;
}
/* 1rem = 1px at 1920px viewport, scaled via vw */
html {
  font-size: 0.0520833333vw;
}
@media (min-width: 1920px) {
  html {
    font-size: 1px;
  }
}
@media (max-width: 1023px) {
  html {
    font-size: 0.1302083333vw;
  }
}
@media (max-width: 599px) {
  html {
    font-size: 0.2666666667vw;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Lock background scroll when the mobile menu is open. */
}
body.is-menu-open {
  overflow: hidden;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
/* ====================================================================== */
/* Header                                                                  */
/* ====================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 24rem;
  color: var(--color-white);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rem 24rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  gap: 32rem;
}
.site-header__left {
  display: flex;
  align-items: center;
  gap: 20rem;
  flex-shrink: 0;
}
.site-header__logo {
  display: inline-flex;
  width: 142rem;
  height: 52rem;
  color: var(--color-white);
  position: relative;
}
.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-header__logo-dark {
  display: none;
}
.site-header--light .site-header__logo-white {
  display: none;
}
.site-header--light .site-header__logo-dark {
  display: block;
}
.site-header__divider {
  width: 1px;
  height: 52rem;
  background: rgba(255, 255, 255, 0.24);
  flex-shrink: 0;
}
.site-header__contacts {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.site-header__contact {
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  text-decoration: underline;
  text-underline-offset: 3rem;
  color: var(--color-white);
  transition: opacity 0.25s ease;
}
.site-header__contact:hover {
  opacity: 0.72;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 40rem;
  flex-wrap: wrap;
  justify-content: center;
}
.site-header__nav-item--dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6rem;
}
.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  font-size: 16rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.site-header__nav-link:hover {
  opacity: 0.7;
}
.site-header__nav-chevron {
  display: inline-flex;
  transition: transform 0.3s ease;
}
.site-header__nav-chevron svg {
  width: 20rem;
  height: 20rem;
}
.site-header__nav-item--dropdown:hover .site-header__nav-chevron {
  transform: rotate(180deg);
}
.site-header__right {
  display: flex;
  align-items: center;
  gap: 24rem;
  flex-shrink: 0;
}
.site-header__socials {
  display: flex;
  gap: 12rem;
}
.site-header__social {
  width: 40rem;
  height: 40rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-white);
  border-radius: 12rem;
  color: var(--color-white);
  transition: background 0.25s ease, color 0.25s ease;
}
.site-header__social svg {
  width: 24rem;
  height: 24rem;
}
.site-header__social:hover {
  background: var(--color-white);
  color: var(--color-dark);
}
.site-header__icons {
  display: flex;
  align-items: center;
  gap: 20rem;
}
.site-header__icon {
  width: 24rem;
  height: 24rem;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}
.site-header__icon svg {
  width: 100%;
  height: 100%;
}
.site-header__icon:hover {
  opacity: 0.7;
}
.site-header__burger {
  display: none;
  width: 48rem;
  height: 48rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  color: var(--color-white);
}
.site-header__burger span {
  width: 24rem;
  height: 2rem;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.site-header__burger[aria-expanded=true] span:nth-child(1) {
  transform: translateY(8rem) rotate(45deg);
}
.site-header__burger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}
.site-header__burger[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-8rem) rotate(-45deg);
}
.site-header {
  /* Mobile-only action icons (search / favorites / cart), shown left of the
     burger on small screens. Hidden on desktop where the full icon row lives. */
}
.site-header__mobile-actions {
  display: none;
  align-items: center;
  gap: 4rem;
}
.site-header__micon {
  width: 44rem;
  height: 44rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: opacity 0.25s ease;
}
.site-header__micon svg {
  width: 24rem;
  height: 24rem;
}
.site-header__micon:hover {
  opacity: 0.7;
}
.site-header--light .site-header__micon {
  color: var(--color-dark);
}
.site-header {
  /* Phone / email / socials block placed inside the burger slide-out menu
     (mirrors the desktop header). Hidden on desktop. */
}
.site-header__menu-extra {
  display: none;
}
.site-header__menu-contacts {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.site-header__menu-contacts .site-header__contact {
  padding: 4rem 0;
}
.site-header__menu-socials {
  display: flex;
  gap: 12rem;
}
.site-header__menu-socials .site-header__social {
  width: 44rem;
  height: 44rem;
}
/* ====================================================================== */
/* Hero                                                                    */
/* ====================================================================== */
.home {
  display: block;
}
.hero {
  position: relative;
  width: 100%;
  height: 997rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(93.54deg, #504c49 0%, #908f8e 56.1%, #b5b5b5 100%);
}
.hero__circle {
  position: absolute;
  width: 729rem;
  height: 729rem;
  left: 50%;
  top: 172rem;
  transform: translateX(calc(-50% + 0.5rem));
  z-index: 1;
}
.hero__circle img {
  width: 100%;
  height: 100%;
}
.hero__line {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.hero__line--horizontal {
  left: 48rem;
  right: 48rem;
  top: 536rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.hero__line--diagonal {
  left: 50%;
  top: 50%;
  width: 869rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.hero__image {
  position: absolute;
  width: 753rem;
  height: 916rem;
  left: 624rem;
  top: 164rem;
  z-index: 2;
  pointer-events: none;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 183rem 48rem 0;
}
.hero__content {
  width: 680rem;
  max-width: 100%;
}
.hero__title {
  color: var(--color-white);
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 64rem;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -1rem;
  margin-bottom: 24rem;
}
.hero__title-line {
  display: block;
  overflow: hidden;
}
.hero__title-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero__subtitle {
  width: 487rem;
  max-width: 100%;
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin-bottom: 64rem;
}
.hero__subtitle-line {
  display: block;
  overflow: hidden;
}
.hero__subtitle-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  width: 487rem;
  max-width: 100%;
  padding: 16rem 20rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  border-radius: 12rem;
  transition: background 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateY(40rem);
  will-change: transform, opacity;
}
.hero__cta:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.hero__cta-icon {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.hero__cta-icon svg {
  width: 100%;
  height: 100%;
}
.hero__features {
  position: absolute;
  right: 48rem;
  top: 220rem;
  width: 447rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.hero__feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  height: 74rem;
  opacity: 0;
  transform: translateY(40rem);
  will-change: transform, opacity;
}
.hero__feature-content {
  display: flex;
  align-items: center;
  gap: 16rem;
}
.hero__feature-bar {
  width: 1px;
  height: 74rem;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.hero__feature-text {
  color: var(--color-white);
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero__feature-num {
  color: var(--color-white);
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.16;
  opacity: 0.4;
  text-transform: uppercase;
}
.hero__feature-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  margin: 56rem 0;
}
.hero__feature-gap {
  height: 112rem;
}
/* ====================================================================== */
/* Footer                                                                  */
/* ====================================================================== */
.site-footer {
  margin-top: -24rem;
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  border-top-left-radius: 24rem;
  border-top-right-radius: 24rem;
  z-index: 4;
}
.site-footer__inner {
  padding: 56rem 48rem 16rem;
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 64rem;
  align-items: flex-start;
}
.site-footer__logo {
  display: inline-flex;
  width: 142rem;
  height: 52rem;
  color: var(--color-white);
}
.site-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-footer__nav {
  display: flex;
  gap: 64rem;
  justify-content: center;
  padding-left: 64rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  align-self: stretch;
}
.site-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.site-footer__nav-col a {
  color: var(--color-white);
  font-size: 16rem;
  font-weight: 400;
  line-height: 1.4;
  transition: opacity 0.25s ease;
}
.site-footer__nav-col a:hover {
  opacity: 0.7;
}
.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  padding-left: 64rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer__contacts--right {
  border-left: none;
  padding-left: 0;
}
.site-footer__contact-group {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.site-footer__contact-label {
  font-size: 12rem;
  line-height: 1.4;
  opacity: 0.64;
}
.site-footer__contact-link {
  font-size: 24rem;
  font-weight: 400;
  line-height: 1.16;
  text-decoration: underline;
  text-underline-offset: 3rem;
  color: var(--color-white);
  transition: opacity 0.25s ease;
}
.site-footer__contact-link:hover {
  opacity: 0.72;
}
.site-footer__contact-text {
  font-size: 16rem;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3rem;
  color: var(--color-white);
  max-width: 294rem;
}
.site-footer__socials {
  display: flex;
  gap: 12rem;
}
.site-footer__social {
  width: 40rem;
  height: 40rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-white);
  border-radius: 12rem;
  color: var(--color-white);
  transition: background 0.25s ease, color 0.25s ease;
}
.site-footer__social svg {
  width: 24rem;
  height: 24rem;
}
.site-footer__social:hover {
  background: var(--color-white);
  color: var(--color-dark);
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 16rem;
  display: flex;
  justify-content: space-between;
  gap: 24rem;
}
.site-footer__bottom p {
  font-size: 14rem;
  line-height: 1.24;
  opacity: 0.64;
}
.site-footer__bottom p a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.site-footer__bottom p a:hover {
  opacity: 0.8;
}
/* ====================================================================== */
/* Animations                                                              */
/* ====================================================================== */
.js-reveal-lines.is-visible .hero__title-line > span,
.js-reveal-lines.is-visible .hero__subtitle-line > span {
  animation: reveal-line 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-reveal-lines.is-visible .hero__title-line:nth-child(1) > span {
  animation-delay: 0.05s;
}
.js-reveal-lines.is-visible .hero__title-line:nth-child(2) > span {
  animation-delay: 0.2s;
}
.js-reveal-lines.is-visible .hero__title-line:nth-child(3) > span {
  animation-delay: 0.35s;
}
.js-reveal-lines.is-visible .hero__subtitle-line:nth-child(1) > span {
  animation-delay: 0.55s;
}
.js-reveal-lines.is-visible .hero__subtitle-line:nth-child(2) > span {
  animation-delay: 0.65s;
}
.js-reveal-lines.is-visible .hero__subtitle-line:nth-child(3) > span {
  animation-delay: 0.75s;
}
.js-reveal.is-visible {
  animation: reveal-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.9s;
}
.js-reveal-list.is-visible .hero__feature {
  animation: reveal-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-reveal-list.is-visible .hero__feature:nth-of-type(1) {
  animation-delay: 0.4s;
}
.js-reveal-list.is-visible .hero__feature:nth-of-type(2) {
  animation-delay: 0.55s;
}
.js-reveal-list.is-visible .hero__feature:nth-of-type(3) {
  animation-delay: 0.7s;
}
.js-reveal-list.is-visible .hero__feature:nth-of-type(4) {
  animation-delay: 0.85s;
}
.hero__image {
  opacity: 0;
  transform: translateY(40%);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.4s ease-out;
}
.hero__image.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes reveal-line {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes reveal-fade-up {
  0% {
    transform: translateY(40rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ====================================================================== */
/* Responsive                                                              */
/* ====================================================================== */
@media (max-width: 1279px) {
  .hero {
    height: auto;
    min-height: 760rem;
    padding-bottom: 60rem;
  }
  .hero__features {
    position: static;
    width: auto;
    margin-top: 40rem;
  }
  .hero__inner {
    padding: 160rem 32rem 0;
  }
  .hero__image {
    width: 600rem;
    height: 730rem;
    left: auto;
    right: 0;
    top: 60rem;
  }
  .hero__image.is-visible {
    opacity: 0.55;
  }
}
@media (max-width: 1023px) {
  .site-header {
    padding-top: 20rem;
  }
  .site-header__inner {
    padding: 0 24rem 20rem;
    gap: 16rem;
  }
  .site-header__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24rem;
    padding: 24rem;
    background: var(--color-dark);
    backdrop-filter: blur(12px);
    transform: translateY(-12rem);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .site-header__nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 100;
  }
  .site-header__contacts, .site-header__divider, .site-header__icons {
    display: none;
  }
  .site-header__burger {
    display: inline-flex;
  }
  .site-header {
    /* Hide socials on tablet — they were floating awkwardly between the
       hidden contacts/icons and the burger. Show them again in the slide-out
       menu only. */
  }
  .site-header__socials {
    display: none;
  }
  .site-header__nav.is-open .site-header__socials {
    display: flex;
    gap: 8rem;
  }
  .site-header {
    /* Reveal the new mobile action icons + push them (and the burger) to the right */
  }
  .site-header__mobile-actions {
    display: flex;
    margin-left: auto;
  }
  .site-header {
    /* Phone / email / socials inside the open burger menu */
  }
  .site-header__menu-extra {
    display: flex;
    flex-direction: column;
    gap: 20rem;
    width: 100%;
    margin-top: 8rem;
    padding-top: 24rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .site-header--light .site-header__menu-extra {
    border-top-color: rgba(26, 26, 26, 0.12);
  }
  .hero {
    height: auto;
    min-height: 100vh;
    padding-bottom: 56rem;
  }
  .hero__inner {
    padding: 140rem 24rem 0;
    display: flex;
    flex-direction: column;
    gap: 40rem;
  }
  .hero__content {
    width: 100%;
    position: relative;
    z-index: 4;
  }
  .hero__title {
    font-size: 56rem;
    letter-spacing: -1rem;
  }
  .hero__subtitle {
    width: 100%;
    max-width: 480rem;
    font-size: 18rem;
    margin-bottom: 40rem;
  }
  .hero__cta {
    width: 100%;
    max-width: 480rem;
  }
  .hero__features {
    position: static;
    width: 100%;
    margin-top: 32rem;
  }
  .hero__feature-text {
    font-size: 24rem;
  }
  .hero__feature-num {
    font-size: 24rem;
  }
  .hero__feature-divider {
    margin: 32rem 0;
  }
  .hero__feature-gap {
    height: 64rem;
  }
  .hero__image {
    position: absolute;
    width: 90vw;
    height: auto;
    max-height: 75vh;
    left: auto;
    right: -20vw;
    top: 80rem;
    pointer-events: none;
  }
  .hero__image.is-visible {
    opacity: 0.32;
  }
  .hero__circle {
    width: 600rem;
    height: 600rem;
    top: 240rem;
  }
  .hero__line--horizontal {
    top: 60%;
  }
  .site-footer__inner {
    padding: 48rem 24rem 16rem;
  }
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32rem;
  }
  .site-footer__nav {
    padding-left: 0;
    border-left: none;
    gap: 40rem;
  }
  .site-footer__contacts {
    padding-left: 0;
    border-left: none;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 8rem;
  }
}
@media (max-width: 599px) {
  .site-header__inner {
    padding: 0 20rem 16rem;
    gap: 12rem;
  }
  .site-header__logo {
    width: 110rem;
    height: 40rem;
  }
  .site-header__socials {
    display: none;
  }
  .hero {
    min-height: 700rem;
  }
  .hero__inner {
    padding: 110rem 20rem 0;
    gap: 32rem;
  }
  .hero__title {
    font-size: 36rem;
    letter-spacing: -0.5rem;
    margin-bottom: 16rem;
  }
  .hero__subtitle {
    font-size: 16rem;
    margin-bottom: 32rem;
  }
  .hero__cta {
    padding: 14rem 18rem;
    font-size: 16rem;
  }
  .hero__features {
    margin-top: 24rem;
  }
  .hero__feature {
    height: 56rem;
  }
  .hero__feature-bar {
    height: 56rem;
  }
  .hero__feature-text {
    font-size: 18rem;
  }
  .hero__feature-num {
    font-size: 24rem;
  }
  .hero__feature-divider {
    margin: 24rem 0;
  }
  .hero__feature-gap {
    height: 36rem;
  }
  .hero__image {
    width: 110vw;
    right: -30vw;
    top: 60rem;
  }
  .hero__image.is-visible {
    opacity: 0.28;
  }
  .hero__circle {
    width: 460rem;
    height: 460rem;
    top: 180rem;
  }
  .site-footer__inner {
    padding: 40rem 20rem 16rem;
  }
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 28rem;
  }
  .site-footer__nav {
    gap: 24rem;
  }
  .site-footer__nav-col {
    gap: 12rem;
  }
  .site-footer__contact-link {
    font-size: 20rem;
  }
}
/* ====================================================================== */
/* Page partials                                                           */
/* ====================================================================== */
/* ====================================================================== */
/* Auth pages — shared layout                                              */
/* (login.scss owns the shared .auth-page / .auth-card / .auth-field rules */
/*  used by login, register, and password-recovery pages.)                  */
/* ====================================================================== */
.auth-page {
  display: block;
  background: var(--color-dark);
  color: var(--color-white);
}
.auth-page__stage {
  position: relative;
  width: 100%;
  min-height: 997rem;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: 80rem;
}
.auth-page__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(93.54deg, #504c49 0%, #908f8e 56.1%, #b5b5b5 100%);
}
.auth-page__circle {
  position: absolute;
  width: 729rem;
  height: 729rem;
  left: 50%;
  top: 172rem;
  transform: translateX(calc(-50% + 0.5rem));
  z-index: 1;
  pointer-events: none;
}
.auth-page__circle img {
  width: 100%;
  height: 100%;
}
.auth-page__line {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.auth-page__line--horizontal {
  left: 48rem;
  right: 48rem;
  top: 536rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.auth-page__line--diagonal {
  left: 50%;
  top: 50%;
  width: 869rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.auth-page__image {
  position: absolute;
  width: 753rem;
  height: 916rem;
  left: 624rem;
  top: 164rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}
.auth-page__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-page__dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(26, 26, 26, 0.56);
  pointer-events: none;
}
.auth-page__container {
  position: relative;
  z-index: 4;
  width: 492rem;
  max-width: calc(100% - 48rem);
  margin: 217rem auto 0;
}
.auth-page__container--wide {
  width: 636rem;
}
.auth-page__close {
  position: absolute;
  top: 0;
  right: -40rem;
  width: 28rem;
  height: 28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 4rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.auth-page__close svg {
  width: 16rem;
  height: 16rem;
}
.auth-page__close:hover {
  transform: scale(1.06);
}
/* ----- Card ------------------------------------------------------------- */
.auth-card {
  position: relative;
  background: var(--color-white);
  border-radius: 16rem;
  padding: 32rem;
  display: flex;
  flex-direction: column;
  gap: 32rem;
  color: var(--color-dark);
}
.auth-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  text-align: center;
  position: relative;
}
.auth-card__head--with-back {
  padding-top: 4rem;
}
.auth-card__back {
  position: absolute;
  left: 0;
  top: 16rem;
  width: 20rem;
  height: 20rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  transition: opacity 0.25s ease;
}
.auth-card__back svg {
  width: 100%;
  height: 100%;
}
.auth-card__back:hover {
  opacity: 0.7;
}
.auth-card__logo {
  display: inline-flex;
  width: 142rem;
  height: 52rem;
}
.auth-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-card__title {
  color: var(--color-dark);
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
}
.auth-card__title--two-lines {
  line-height: 1.16;
}
.auth-card__lead {
  margin-top: 4rem;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  text-align: center;
}
.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.auth-card__fields {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.auth-card__row {
  display: flex;
  gap: 16rem;
}
.auth-card__row > .auth-field {
  flex: 1 1 0;
  min-width: 0;
}
.auth-card__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  margin-top: 0;
}
.auth-card__link {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  text-decoration: underline;
  text-underline-offset: 3rem;
  transition: opacity 0.25s ease;
}
.auth-card__link:hover {
  opacity: 1;
}
.auth-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
input:checked ~ .checkbox__box, input:checked + .checkbox__box {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
/* ----- Form field ------------------------------------------------------- */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
}
.auth-field__label {
  font-size: 12rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
}
.auth-field__control {
  display: flex;
  align-items: center;
  gap: 16rem;
  padding: 16rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-field__control:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(244, 169, 0, 0.18);
}
.auth-field__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  padding: 0;
}
.auth-field__input::placeholder {
  color: var(--color-dark);
  opacity: 0.48;
}
.auth-field__toggle {
  width: 18rem;
  height: 18rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  transition: opacity 0.25s ease;
}
.auth-field__toggle svg {
  width: 100%;
  height: 100%;
  display: block;
}
.auth-field__toggle:hover {
  opacity: 0.7;
}
.auth-field__toggle {
  /* Two stacked eye states: closed by default (password hidden),       */
  /* open when revealed. JS adds `is-revealed` to swap them.            */
}
.auth-field__toggle .auth-field__eye--open {
  display: none;
}
.auth-field__toggle .auth-field__eye--closed {
  display: block;
}
.auth-field__toggle.is-revealed .auth-field__eye--open {
  display: block;
}
.auth-field__toggle.is-revealed .auth-field__eye--closed {
  display: none;
}
/* ----- Checkbox --------------------------------------------------------- */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
  cursor: pointer;
  user-select: none;
}
.auth-check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.auth-check__box {
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(26, 26, 26, 0.32);
  border-radius: 4rem;
  background: var(--color-white);
  flex-shrink: 0;
  margin-top: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  /* Checkmark — exact Figma path (M6.66927 2 L3.0026 5.66667 L1.33594 4), */
  /* white stroke 2 on an 8x8 viewBox, hidden until checked.               */
}
.auth-check__box::after {
  content: "";
  width: 10rem;
  height: 10rem;
  background-color: var(--color-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66927 2L3.0026 5.66667L1.33594 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66927 2L3.0026 5.66667L1.33594 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.auth-check__box--sm {
  width: 14rem;
  height: 14rem;
}
.auth-check__box--sm::after {
  width: 8rem;
  height: 8rem;
}
.auth-check__input:checked + .auth-check__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.auth-check__input:checked + .auth-check__box::after {
  opacity: 1;
}
.auth-check__input:focus-visible + .auth-check__box {
  box-shadow: 0 0 0 2px rgba(244, 169, 0, 0.32);
}
.auth-check__label {
  flex: 1 1 0;
  font-size: 16rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.auth-check__label--sm {
  font-size: 12rem;
  line-height: 1.4;
  opacity: 0.84;
}
.auth-check--policy {
  align-items: flex-start;
}
/* ----- Buttons ---------------------------------------------------------- */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  width: 100%;
  height: 61rem;
  padding: 20rem 24rem;
  border-radius: 12rem;
  font-family: "Inter", sans-serif;
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.auth-btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
}
.auth-btn--primary:hover {
  background: #d99700;
  border-color: #d99700;
}
.auth-btn--primary.is-disabled, .auth-btn--primary:disabled {
  background: rgba(26, 26, 26, 0.4);
  border-color: transparent;
  cursor: not-allowed;
}
.auth-btn--primary.is-disabled:hover, .auth-btn--primary:disabled:hover {
  background: rgba(26, 26, 26, 0.4);
}
.auth-btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.auth-btn--ghost:hover {
  background: rgba(244, 169, 0, 0.08);
}
/* ====================================================================== */
/* Header — auth (light variant)                                            */
/* ====================================================================== */
/* On auth pages the header sits over the dark hero like on index, so the   */
/* default white-on-dark header still works. We expose `--auth` mod that    */
/* enables a light/white variant — used when the auth screen needs to be    */
/* shown with a clean white background (e.g. mobile mode or future themes). */
.site-header--auth {
  /* Defaults inherit the dark/transparent header — text stays white       */
  /* because the auth page background is the dark hero.                     */
}
.site-header--light {
  color: var(--color-dark);
}
.site-header--light .site-header__inner {
  border-bottom-color: rgba(26, 26, 26, 0.12);
}
.site-header--light .site-header__logo,
.site-header--light .site-header__divider,
.site-header--light .site-header__contact,
.site-header--light .site-header__nav-link,
.site-header--light .site-header__icon,
.site-header--light .site-header__social,
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
.site-header--light .site-header__divider {
  background: rgba(26, 26, 26, 0.18);
}
.site-header--light .site-header__social {
  border-color: rgba(26, 26, 26, 0.32);
}
.site-header--light .site-header__social svg path {
  fill: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__social:hover svg path {
  fill: var(--color-white);
}
.site-header--light .site-header__icon svg [stroke=white] {
  stroke: var(--color-dark);
}
.site-header--light .site-header__icon svg [fill=white] {
  fill: var(--color-dark);
}
/* ====================================================================== */
/* Footer — auth variant                                                    */
/* ====================================================================== */
.site-footer--auth {
  margin-top: 0;
}
/* ====================================================================== */
/* Page-specific tweaks                                                    */
/* ====================================================================== */
.page-login .auth-page__container {
  width: 492rem;
}
.page-login .auth-card--login .auth-card__form {
  gap: 32rem;
}
/* ====================================================================== */
/* Responsive                                                              */
/* ====================================================================== */
@media (max-width: 1023px) {
  .auth-page__stage {
    min-height: 100vh;
    padding-bottom: 60rem;
  }
  .auth-page__container {
    margin: 160rem auto 0;
    width: 492rem;
    max-width: calc(100% - 32rem);
  }
  .auth-page__container--wide {
    width: 636rem;
  }
  .auth-page__close {
    right: 0;
    top: -40rem;
  }
  .auth-page__image {
    width: 600rem;
    height: 730rem;
    left: auto;
    right: -60rem;
    top: 80rem;
    opacity: 0.5;
  }
  .auth-page__circle {
    width: 560rem;
    height: 560rem;
    top: 220rem;
  }
  .auth-card {
    padding: 28rem;
    gap: 28rem;
  }
  .auth-card__title {
    font-size: 28rem;
  }
}
@media (max-width: 599px) {
  .auth-page__stage {
    min-height: 100vh;
    padding-bottom: 40rem;
  }
  .auth-page__container {
    margin: 120rem auto 0;
    width: 100%;
    max-width: calc(100% - 24rem);
  }
  .auth-page__container--wide {
    width: 100%;
    max-width: calc(100% - 24rem);
  }
  .auth-page__close {
    width: 32rem;
    height: 32rem;
    right: 0;
    top: -44rem;
  }
  .auth-page__close svg {
    width: 18rem;
    height: 18rem;
  }
  .auth-page__image {
    width: 110vw;
    right: -30vw;
    top: 60rem;
    opacity: 0.32;
  }
  .auth-page__circle {
    width: 420rem;
    height: 420rem;
    top: 170rem;
  }
  .auth-card {
    padding: 20rem;
    gap: 24rem;
    border-radius: 14rem;
  }
  .auth-card__head {
    gap: 6rem;
  }
  .auth-card__logo {
    width: 112rem;
    height: 40rem;
  }
  .auth-card__title {
    font-size: 24rem;
    letter-spacing: -0.5rem;
  }
  .auth-card__lead {
    font-size: 14rem;
  }
  .auth-card__form {
    gap: 24rem;
  }
  .auth-card__fields {
    gap: 14rem;
  }
  .auth-card__row {
    flex-direction: column;
    gap: 14rem;
  }
  .auth-card__options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12rem;
  }
  .auth-card__actions {
    gap: 10rem;
  }
  .auth-field__control {
    padding: 14rem;
  }
  .auth-field__input {
    font-size: 16rem;
  }
  .auth-btn {
    height: 56rem;
    font-size: 16rem;
    padding: 16rem 20rem;
  }
}
/* ====================================================================== */
/* Register page — relies on shared rules from pages/_login.scss            */
/* (auth-page, auth-card, auth-field, auth-check, auth-btn).                */
/* This partial only owns register-specific tweaks.                         */
/* ====================================================================== */
.page-register .auth-page__container {
  width: 636rem;
  /* Larger card sits higher on the page so it doesn't crowd the footer. */
  margin-top: 170rem;
}
.page-register .auth-card--register .auth-card__title--two-lines {
  font-size: 32rem;
  line-height: 1.16;
}
.page-register .auth-card--register .auth-card__title--two-lines br {
  display: inline;
}
@media (max-width: 1023px) {
  .page-register .auth-page__container {
    margin-top: 140rem;
  }
  .page-register .auth-card--register .auth-card__title--two-lines {
    font-size: 28rem;
  }
}
@media (max-width: 599px) {
  .page-register .auth-page__container {
    margin-top: 110rem;
  }
  .page-register .auth-card--register .auth-card__title--two-lines {
    font-size: 22rem;
  }
  .page-register .auth-card--register .auth-card__title--two-lines br {
    display: none;
  }
}
/* ====================================================================== */
/* Password recovery — relies on shared rules from pages/_login.scss        */
/* (auth-page, auth-card, auth-field, auth-btn).                            */
/* This partial only owns recovery-specific tweaks.                         */
/* ====================================================================== */
.page-recovery .auth-page__container {
  width: 636rem;
  margin-top: 200rem;
}
.page-recovery .auth-card--recovery {
  gap: 32rem;
}
.page-recovery .auth-card--recovery .auth-card__head {
  gap: 12rem;
}
.page-recovery .auth-card--recovery .auth-card__lead {
  max-width: 572rem;
  margin-left: auto;
  margin-right: auto;
}
.page-recovery .auth-card--recovery .auth-card__form {
  gap: 32rem;
}
@media (max-width: 1023px) {
  .page-recovery .auth-page__container {
    margin-top: 160rem;
  }
  .page-recovery .auth-card--recovery .auth-card__lead {
    font-size: 15rem;
  }
}
@media (max-width: 599px) {
  .page-recovery .auth-page__container {
    margin-top: 120rem;
  }
  .page-recovery .auth-card--recovery {
    gap: 24rem;
  }
  .page-recovery .auth-card--recovery .auth-card__lead {
    font-size: 14rem;
  }
}
/* ====================================================================== */
/* Shared modal styles — auth modals opened via Fancybox.                  */
/* The inner `.auth-card`, `.auth-field`, `.auth-btn`, `.auth-check`       */
/* primitives are owned by _login.scss and reused here as-is. This file   */
/* only adds modal-specific spacing and the few new elements that don't   */
/* exist on the standalone auth pages (code inputs, password rules,       */
/* status icon).                                                          */
/* ====================================================================== */
.modal {
  /* hidden by default in markup; Fancybox un-hides via display:flex */
  width: 492rem;
  max-width: 100%;
  margin: 0 auto;
  background: transparent;
  color: var(--color-dark);
}
.modal--wide {
  width: 636rem;
}
.modal__card {
  width: 100%;
}
.modal__title {
  text-align: center;
}
.modal__form {
  width: 100%;
}
.auth-modal {
  width: 492rem;
}
.auth-modal--wide {
  width: 636rem;
}
/* ----- Status icon (success screens) ----------------------------------- */
.auth-status__icon {
  width: 72rem;
  height: 72rem;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.auth-status__icon svg {
  width: 36rem;
  height: 36rem;
}
.auth-card--status {
  align-items: center;
  text-align: center;
  gap: 24rem;
}
.auth-card--status .auth-card__title {
  text-align: center;
}
.auth-card--status .auth-card__lead {
  text-align: center;
}
/* ----- Inline email link inside lead text ----------------------------- */
.auth-card__lead-link {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.auth-card__lead-link:hover {
  opacity: 0.8;
}
/* ----- Verification code input row ------------------------------------ */
.auth-code {
  display: flex;
  gap: 4rem;
  align-items: center;
  width: 100%;
}
.auth-code__input {
  flex: 1 1 0;
  min-width: 0;
  height: 44rem;
  padding: 12rem 16rem;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  color: var(--color-dark);
  caret-color: #262a3d;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-code__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(244, 169, 0, 0.18);
}
.auth-code__input:not(:placeholder-shown) {
  border-color: rgba(26, 26, 26, 0.32);
}
.auth-card__resend {
  margin-top: 8rem;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  text-align: center;
  width: 100%;
}
/* ----- Password rules list (new-password modal) ----------------------- */
.auth-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.auth-rules__title {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  margin-bottom: 4rem;
}
.auth-rules__item {
  display: flex;
  align-items: center;
  gap: 16rem;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.auth-rules__badge {
  min-width: 36rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  color: var(--color-dark);
}
/* ====================================================================== */
/* Fancybox overrides — match the visual treatment from the auth pages.   */
/* (Slight dim + centered card, no white container around the modal.)     */
/* ====================================================================== */
.fancybox__container {
  --fancybox-bg: rgba(26, 26, 26, 0.56);
}
.fancybox__content {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 16rem;
  box-shadow: none !important;
  max-width: 100%;
}
.fancybox__content.is-modal-content {
  background: var(--color-white) !important;
}
/* Hide Fancybox close button — we use the in-card back button & overlay  */
/* tap instead to match the design. Remove this rule if you want the X.   */
.fancybox__container .f-button.is-close-btn {
  top: 8px;
  right: 8px;
  --f-button-color: var(--color-white);
  --f-button-bg: rgba(26, 26, 26, 0.4);
  --f-button-hover-color: var(--color-white);
  --f-button-hover-bg: rgba(26, 26, 26, 0.6);
  border-radius: 999px;
}
/* ====================================================================== */
/* Responsive                                                              */
/* ====================================================================== */
@media (max-width: 1023px) {
  .modal,
  .auth-modal {
    width: 492rem;
  }
  .modal--wide,
  .auth-modal--wide {
    width: 636rem;
  }
  .auth-code {
    gap: 4rem;
  }
  .auth-code__input {
    height: 44rem;
    font-size: 16rem;
  }
  .auth-status__icon {
    width: 64rem;
    height: 64rem;
  }
  .auth-status__icon svg {
    width: 32rem;
    height: 32rem;
  }
}
@media (max-width: 599px) {
  .modal,
  .auth-modal {
    width: 100%;
    max-width: calc(100vw - 24rem);
  }
  .modal--wide,
  .auth-modal--wide {
    width: 100%;
    max-width: calc(100vw - 24rem);
  }
  /* The close button floats 26rem to the right of the card on desktop, which
     runs off the edge once the card is near full-width on mobile. Pull it
     inside the card's top-right corner instead (visible on the white card). */
  .fancybox__container .f-button.is-close-button,
  .fancybox__container .f-button.is-close-btn {
    top: 12rem;
    right: 12rem;
    background: rgba(26, 26, 26, 0.06);
    color: var(--color-dark);
  }
  .auth-code {
    gap: 4rem;
  }
  .auth-code__input {
    height: 44rem;
    font-size: 16rem;
    border-radius: 8rem;
  }
  .auth-card__resend {
    font-size: 14rem;
    margin-top: 8rem;
  }
  .auth-rules {
    gap: 10rem;
  }
  .auth-rules__title {
    font-size: 14rem;
  }
  .auth-rules__item {
    font-size: 14rem;
    gap: 12rem;
  }
  .auth-rules__badge {
    min-width: 32rem;
    font-size: 14rem;
  }
  .auth-status__icon {
    width: 56rem;
    height: 56rem;
  }
  .auth-status__icon svg {
    width: 28rem;
    height: 28rem;
  }
}
/* Callback-request modal (reuses the auth-card primitives) */
.auth-card--callback .auth-card__lead {
  opacity: 0.72;
}
.auth-card--callback .auth-card__actions {
  align-items: flex-start;
}
.auth-btn--inline {
  width: auto;
}
.auth-btn--inline svg {
  width: 24rem;
  height: 24rem;
}
/* ====================================================================== */
/* Modals preview — developer page that lists every auth modal as a       */
/* clickable card. Not a production view; styled simply for clarity.      */
/* ====================================================================== */
.page-modals-preview {
  min-height: 100vh;
  background: #f6f7f8;
  padding: 80rem 48rem 120rem;
  color: var(--color-dark);
}
.modals-preview {
  max-width: 1280rem;
  margin: 0 auto;
}
.modals-preview__header {
  margin-bottom: 48rem;
}
.modals-preview__title {
  font-size: 40rem;
  font-weight: 500;
  line-height: 1.16;
  margin-bottom: 12rem;
}
.modals-preview__subtitle {
  font-size: 18rem;
  line-height: 1.4;
  color: var(--color-text-soft);
  max-width: 720rem;
}
.modals-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280rem, 1fr));
  gap: 20rem;
}
.modals-preview__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 16rem;
  padding: 24rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.modals-preview__card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8rem 24rem rgba(26, 26, 26, 0.06);
  transform: translateY(-2rem);
}
.modals-preview__card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.modals-preview__card-eyebrow {
  font-size: 12rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.modals-preview__card-title {
  font-size: 22rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-dark);
}
.modals-preview__card-desc {
  font-size: 14rem;
  line-height: 1.45;
  color: var(--color-text-soft);
  opacity: 0.88;
}
.modals-preview__card-cta {
  margin-top: auto;
  padding-top: 12rem;
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  color: var(--color-accent);
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
}
.modals-preview__card-cta svg {
  width: 16rem;
  height: 16rem;
}
@media (max-width: 1023px) {
  .page-modals-preview {
    padding: 56rem 24rem 80rem;
  }
  .modals-preview__title {
    font-size: 32rem;
  }
  .modals-preview__grid {
    grid-template-columns: repeat(auto-fill, minmax(260rem, 1fr));
    gap: 16rem;
  }
  .modals-preview__card {
    padding: 20rem;
  }
}
@media (max-width: 599px) {
  .page-modals-preview {
    padding: 40rem 16rem 64rem;
  }
  .modals-preview__header {
    margin-bottom: 32rem;
  }
  .modals-preview__title {
    font-size: 26rem;
  }
  .modals-preview__subtitle {
    font-size: 15rem;
  }
  .modals-preview__grid {
    grid-template-columns: 1fr;
    gap: 12rem;
  }
  .modals-preview__card-title {
    font-size: 18rem;
  }
}
/* ====================================================================== */
/* Light header override (shared across internal pages)                    */
/* ====================================================================== */
.site-header--light {
  color: var(--color-dark);
  position: relative;
  padding-top: 24rem;
}
.site-header--light .site-header__inner {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.site-header--light .site-header__logo {
  color: var(--color-dark);
}
.site-header--light .site-header__divider {
  background: rgba(26, 26, 26, 0.16);
}
.site-header--light .site-header__contact {
  color: var(--color-dark);
}
.site-header--light .site-header__nav-link {
  color: var(--color-dark);
  opacity: 0.88;
}
.site-header--light .site-header__social {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.site-header--light .site-header__social svg path {
  fill: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__social:hover svg path {
  fill: var(--color-white);
}
.site-header--light .site-header__icon {
  color: var(--color-dark);
}
.site-header--light .site-header__icon svg [stroke=white] {
  stroke: var(--color-dark);
}
.site-header--light .site-header__icon svg [fill=white] {
  fill: var(--color-dark);
}
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
@media (max-width: 1023px) {
  .site-header--light .site-header__nav {
    background: rgba(255, 255, 255, 0.98);
  }
  .site-header--light .site-header__nav .site-header__nav-link {
    color: var(--color-dark);
  }
}
/* ====================================================================== */
/* Catalog page                                                            */
/* ====================================================================== */
.page-catalog {
  display: block;
  padding: 0 48rem 80rem;
  color: var(--color-text);
}
.page-catalog__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 32rem 0 24rem;
  font-size: 14rem;
  line-height: 1.4;
}
.page-catalog__crumb {
  color: var(--color-dark);
  transition: opacity 0.25s ease;
}
.page-catalog__crumb--muted {
  color: rgba(26, 26, 26, 0.32);
}
.page-catalog__crumb:is(a):hover {
  opacity: 0.7;
}
.page-catalog__crumb-sep {
  color: rgba(26, 26, 26, 0.32);
}
.page-catalog__hero {
  position: relative;
  padding-bottom: 24rem;
}
.page-catalog__hero-top {
  position: relative;
  min-height: 240rem;
  padding: 24rem 0 0;
}
.page-catalog__title, .page-catalog__title-outline {
  font-size: 188rem;
  line-height: 1.16;
  letter-spacing: -2rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0;
  font-family: "Suisse Intl", "Inter", sans-serif;
}
.page-catalog__title {
  position: relative;
  z-index: 2;
}
.page-catalog__title-outline {
  color: rgba(26, 26, 26, 0.24);
  white-space: nowrap;
  text-align: right;
}
.page-catalog__title-line {
  display: block;
  overflow: hidden;
  margin-bottom: -40rem;
}
.page-catalog__title-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
.page-catalog__hero-visual {
  position: absolute;
  right: 545rem;
  top: -91rem;
  width: auto;
  height: 834rem;
  z-index: 1;
  pointer-events: none;
}
.page-catalog__hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-catalog__hero-thumbs {
  position: absolute;
  right: 0;
  top: 88rem;
  display: flex;
  gap: 12rem;
  z-index: 3;
}
.page-catalog__thumb {
  width: 100rem;
  height: 100rem;
  border-radius: 12rem;
  overflow: hidden;
  background: #f1f2f4;
  transition: transform 0.25s ease;
}
.page-catalog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-catalog__thumb:hover {
  transform: translateY(-3rem);
}
.page-catalog__hero-divider {
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
  width: 100%;
}
.page-catalog__hero-bottom {
  position: relative;
  padding: 186rem 0;
  overflow: hidden;
}
.page-catalog__hero-lead {
  font-size: 18rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  max-width: 753rem;
  margin: 0;
  position: relative;
  z-index: 2;
}
.page-catalog__title-outline {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.page-catalog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rem;
  padding-top: 40rem;
  padding-bottom: 70rem;
}
.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  padding: 32rem;
  color: var(--color-text);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.catalog-card:hover {
  transform: translateY(-4rem);
  border-color: rgba(26, 26, 26, 0.24);
  box-shadow: 0 12rem 40rem -16rem rgba(26, 26, 26, 0.18);
}
.catalog-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rem;
}
.catalog-card__title {
  font-size: 28rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
}
.catalog-card__arrow {
  width: 40rem;
  height: 40rem;
  border-radius: 12rem;
  background: var(--color-accent);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.catalog-card__arrow svg {
  width: 24rem;
  height: 24rem;
  transition: transform 0.25s ease;
}
.catalog-card:hover .catalog-card__arrow {
  background: #d99700;
}
.catalog-card:hover .catalog-card__arrow svg {
  transform: rotate(45deg);
}
.catalog-card__image {
  position: relative;
  width: 100%;
  height: 283rem;
  border-radius: 12rem;
  overflow: hidden;
  background: linear-gradient(95.6deg, #504c49 0%, #908f8e 56.1%, #b5b5b5 100%);
}
.catalog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16rem;
}
.catalog-card__desc {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  max-width: 423rem;
  margin: 0;
}
.catalog-card__num {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.64;
  flex-shrink: 0;
}
.sort-radio.is-active svg, .sort-radio:has(input:checked) svg {
  transform: rotate(180deg);
}
/* ====================================================================== */
/* Catalog reveal animations                                               */
/* ====================================================================== */
/* КАТАЛОГ / оправ — same line-reveal as homepage hero title */
.page-catalog__title.js-reveal-lines .page-catalog__title-line > span,
.page-catalog__title-outline.js-reveal-lines .page-catalog__title-line > span {
  /* initial state defined on .page-catalog__title-line > span above */
}
.page-catalog__title.js-reveal-lines.is-visible .page-catalog__title-line > span {
  animation: reveal-line 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}
.page-catalog__title-outline.js-reveal-lines.is-visible .page-catalog__title-line > span {
  animation: reveal-line 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.45s;
}
/* Big glasses photo — rise from below */
.page-catalog__hero-visual.js-reveal-rise {
  opacity: 0;
  transform: translateY(80rem);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, opacity 1.1s ease-out 0.25s;
}
.page-catalog__hero-visual.js-reveal-rise.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Small thumbs — staggered rise from below */
.page-catalog__hero-thumbs.js-reveal-thumbs .page-catalog__thumb {
  opacity: 0;
  transform: translateY(48rem);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease-out;
}
.page-catalog__hero-thumbs.js-reveal-thumbs.is-visible .page-catalog__thumb {
  opacity: 1;
  transform: translateY(0);
}
.page-catalog__hero-thumbs.js-reveal-thumbs .page-catalog__thumb:nth-child(1) {
  transition-delay: 0.55s;
}
.page-catalog__hero-thumbs.js-reveal-thumbs .page-catalog__thumb:nth-child(2) {
  transition-delay: 0.7s;
}
.page-catalog__hero-thumbs.js-reveal-thumbs .page-catalog__thumb:nth-child(3) {
  transition-delay: 0.85s;
}
/* Cards — staggered rise */
.page-catalog__grid.js-reveal-cards .catalog-card {
  opacity: 0;
  transform: translateY(48rem);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
}
.page-catalog__grid.js-reveal-cards.is-visible .catalog-card {
  opacity: 1;
  transform: translateY(0);
}
.page-catalog__grid.js-reveal-cards .catalog-card:nth-child(1) {
  transition-delay: 0.05s;
}
.page-catalog__grid.js-reveal-cards .catalog-card:nth-child(2) {
  transition-delay: 0.15s;
}
.page-catalog__grid.js-reveal-cards .catalog-card:nth-child(3) {
  transition-delay: 0.25s;
}
.page-catalog__grid.js-reveal-cards .catalog-card:nth-child(4) {
  transition-delay: 0.35s;
}
/* ====================================================================== */
/* Catalog responsive                                                      */
/* ====================================================================== */
@media (max-width: 1023px) {
  .page-catalog {
    padding: 0 24rem 60rem;
  }
  .page-catalog__breadcrumbs {
    padding: 24rem 0 16rem;
  }
  .page-catalog__hero-top {
    padding: 16rem 0;
    min-height: 0;
  }
  .page-catalog__title, .page-catalog__title-outline {
    font-size: 96rem;
    letter-spacing: -1rem;
  }
  .page-catalog__title-outline {
    text-align: left;
  }
  .page-catalog__hero-visual {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 320rem;
    height: 220rem;
    margin: 16rem auto 0;
  }
  .page-catalog__hero-thumbs {
    position: relative;
    right: auto;
    top: auto;
    gap: 8rem;
    margin-top: 16rem;
  }
  .page-catalog .page-catalog__title-outline {
    display: none;
  }
  .page-catalog__thumb {
    width: 84rem;
    height: 84rem;
  }
  .page-catalog__hero-bottom {
    flex-direction: column;
    gap: 16rem;
    padding: 16rem 0;
  }
  .page-catalog__hero-lead {
    font-size: 16rem;
    max-width: 100%;
  }
  .page-catalog__grid {
    grid-template-columns: 1fr;
    gap: 16rem;
    padding-top: 32rem;
  }
  .catalog-card {
    padding: 24rem;
    gap: 20rem;
  }
  .catalog-card__title {
    font-size: 24rem;
  }
  .catalog-card__image {
    height: 240rem;
  }
  .catalog-card__desc {
    font-size: 14rem;
    max-width: 100%;
  }
}
@media (max-width: 599px) {
  .page-catalog {
    padding: 0 20rem 48rem;
  }
  .page-catalog__title, .page-catalog__title-outline {
    font-size: 64rem;
    letter-spacing: -0.5rem;
  }
  .page-catalog__hero-visual {
    margin-top: 30rem;
    height: 250rem;
  }
  .page-catalog__thumb {
    width: 72rem;
    height: 72rem;
  }
  .page-catalog__title-outline {
    display: none;
  }
  .catalog-card {
    padding: 20rem;
  }
  .catalog-card__title {
    font-size: 20rem;
  }
  .catalog-card__image {
    height: 200rem;
  }
  .catalog-card__head {
    gap: 12rem;
  }
  .catalog-card__arrow {
    width: 36rem;
    height: 36rem;
  }
}
/* ====================================================================== */
/* Category page                                                           */
/* ====================================================================== */
.page-category {
  display: block;
  color: var(--color-text);
  /* Hero -------------------------------------------------------------- */
}
.page-category__hero {
  position: relative;
  height: 511rem;
  overflow: hidden;
  margin: 0 0 64rem;
  isolation: isolate;
  color: var(--color-white);
  border-radius: 0 0 24px 24px;
}
.page-category__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(93.54deg, #504c49 0%, #908f8e 56.1%, #b5b5b5 100%);
}
.page-category__hero-image {
  position: absolute;
  right: 0;
  top: -230rem;
  width: 1107rem;
  height: 411rem;
  z-index: 1;
  pointer-events: none;
}
.page-category__hero-image img {
  width: 100%;
  object-fit: cover;
  object-position: right center;
}
.page-category__group {
  padding-left: 96rem;
}
.page-category__hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  z-index: 2;
  padding: 32rem 48rem 48rem 0;
}
.page-category__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4rem;
  font-size: 14rem;
  padding-left: 48rem;
  line-height: 1.4;
  color: var(--color-white);
}
.page-category__crumb {
  color: var(--color-white);
  transition: opacity 0.25s ease;
}
.page-category__crumb--muted {
  color: rgba(255, 255, 255, 0.56);
}
.page-category__crumb:is(a):hover {
  opacity: 0.8;
}
.page-category__crumb-sep {
  color: rgba(255, 255, 255, 0.4);
}
.page-category__title {
  font-size: 56rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 12rem;
  padding-top: 65rem;
}
.page-category__lead {
  font-size: 18rem;
  line-height: 1.32;
  color: var(--color-white);
  opacity: 0.88;
  max-width: 512rem;
}
.page-category {
  /* Body grid --------------------------------------------------------- */
}
.page-category__body {
  display: grid;
  grid-template-columns: 378rem 1fr;
  gap: 80rem;
  padding: 0 48rem 80rem;
  align-items: flex-start;
}
.page-category {
  /* Filters ----------------------------------------------------------- */
}
.page-category__filters {
  display: flex;
  flex-direction: column;
}
.page-category {
  /* Results ----------------------------------------------------------- */
}
.page-category__results {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.page-category {
  /* Sort -------------------------------------------------------------- */
}
.page-category__sort {
  display: flex;
  align-items: center;
  gap: 24rem;
  flex-wrap: wrap;
}
.page-category__sort-label {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  font-weight: 500;
}
.page-category {
  /* Pagination -------------------------------------------------------- */
}
.page-category__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  margin-top: 24rem;
  flex-wrap: wrap;
}
.page-category__more {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  height: 50rem;
  padding: 0 24rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  background: var(--color-white);
  color: var(--color-dark);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.page-category__more svg {
  width: 16rem;
  height: 16rem;
  transition: transform 0.25s ease;
}
.page-category__more:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.page-category__more:hover svg {
  transform: translateY(2rem);
}
/* Sort radio buttons -------------------------------------------------- */
.sort-radios {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
  flex-wrap: wrap;
}
.sort-radio {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  cursor: pointer;
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.64;
  transition: opacity 0.25s ease, color 0.25s ease;
  user-select: none;
}
.sort-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sort-radio__label {
  color: inherit;
  transition: color 0.25s ease;
}
.sort-radio__chevron {
  width: 16rem;
  height: 16rem;
  transition: transform 0.25s ease;
}
.sort-radio:hover {
  opacity: 1;
}
.sort-radio.is-active, .sort-radio:has(input:checked) {
  opacity: 1;
  color: var(--color-accent);
}
/* Filter blocks ------------------------------------------------------- */
.filter-block {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 24rem 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.filter-block--head {
  padding-top: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.filter-block__head {
  display: flex;
  align-items: center;
  gap: 12rem;
}
.filter-block__head-icon {
  width: 24rem;
  height: 24rem;
  color: var(--color-dark);
}
.filter-block__head-icon svg {
  width: 100%;
  height: 100%;
}
.filter-block__head-label {
  font-size: 24rem;
  line-height: 1.2;
  color: var(--color-dark);
  font-weight: 500;
}
.filter-block__list {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
/* Filter accordion (collapsible) ------------------------------------- */
.filter-accordion {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.filter-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24rem 0;
  font-size: 18rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  list-style: none;
  text-align: left;
  transition: color 0.25s ease;
}
.filter-accordion__head::-webkit-details-marker {
  display: none;
}
.filter-accordion__head:hover {
  color: var(--color-accent);
}
.filter-accordion__title {
  flex: 1;
  min-width: 0;
}
.filter-accordion__chevron {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-accordion__chevron svg {
  width: 100%;
  height: 100%;
}
.filter-accordion[open] .filter-accordion__chevron {
  transform: rotate(180deg);
}
.filter-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 0 0 24rem;
  animation: filter-accordion-slide 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-accordion__body--colors {
  gap: 16rem;
}
.filter-accordion__body--slider {
  gap: 24rem;
}
@keyframes filter-accordion-slide {
  from {
    opacity: 0;
    transform: translateY(-8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Filter checkbox ----------------------------------------------------- */
.filter-check {
  display: flex;
  align-items: center;
  gap: 16rem;
  cursor: pointer;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  user-select: none;
}
.filter-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filter-check__box {
  width: 16rem;
  height: 16rem;
  border-radius: 4rem;
  border: 1.5px solid rgba(26, 26, 26, 0.32);
  flex-shrink: 0;
  background: var(--color-white);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.filter-check__box::after {
  content: "";
  position: absolute;
  left: 3rem;
  top: -1rem;
  width: 4rem;
  height: 8rem;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s ease;
}
input:checked + .filter-check__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
input:checked + .filter-check__box::after {
  transform: rotate(45deg) scale(1);
}
.filter-check__icon {
  width: 20rem;
  height: 20rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  flex-shrink: 0;
}
.filter-check__icon svg {
  width: 100%;
  height: 100%;
}
.filter-check__shape {
  display: inline-flex;
  align-items: center;
  width: 72rem;
  height: 24rem;
  color: var(--color-dark);
  flex-shrink: 0;
}
.filter-check__shape svg {
  width: 100%;
  height: 100%;
}
.filter-check__label {
  display: inline-flex;
  align-items: baseline;
  gap: 6rem;
  opacity: 0.88;
}
.filter-check__count {
  color: rgba(26, 26, 26, 0.48);
  font-weight: 500;
}
.filter-check:hover .filter-check__box {
  border-color: var(--color-dark);
}
.filter-check:hover input:checked + .filter-check__box {
  border-color: var(--color-accent);
}
/* Color swatches ------------------------------------------------------- */
.filter-swatches {
  display: grid;
  grid-template-columns: repeat(6, 52rem);
  gap: 12rem;
}
.filter-swatch {
  width: 52rem;
  height: 52rem;
  border-radius: 12rem;
  background: #f1f2f4;
  cursor: pointer;
  border: none;
  outline-offset: 2px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease;
  position: relative;
}
.filter-swatch.is-hidden {
  display: none;
}
.filter-swatch--multi {
  background: conic-gradient(from 0deg, #c84d4d 0deg, #f4a900 60deg, #88b048 120deg, #2c4a8a 180deg, #6a3c8e 240deg, #c84d4d 360deg);
}
.filter-swatch:hover {
  transform: scale(1.08);
}
.filter-swatch:focus-visible {
  outline: 2px solid var(--color-accent);
}
.filter-swatch.is-active::after {
  content: "";
  position: absolute;
  inset: -4rem;
  border: 2px solid var(--color-accent);
  border-radius: 16rem;
}
/* "Show all colors" toggle -------------------------------------------- */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  transition: color 0.25s ease;
}
.filter-toggle svg {
  width: 16rem;
  height: 16rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-toggle:hover {
  color: var(--color-accent);
}
.filter-toggle.is-expanded svg {
  transform: rotate(180deg);
}
/* Range slider (noUI) ------------------------------------------------- */
.filter-range {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.filter-range__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rem;
}
.filter-range__icon {
  display: inline-flex;
  color: var(--color-dark);
}
.filter-range__icon img, .filter-range__icon svg {
  width: 114rem;
  height: auto;
  display: block;
}
.filter-range__icon {
  /* Rows 2 & 3 icons are stored flipped in Figma (scaleY -1) — mirror them
     back so they render the right way up. */
}
.filter-range__icon--flip img {
  transform: scaleY(-1);
}
.filter-range__value {
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4rem;
  white-space: nowrap;
  opacity: 0.88;
}
.filter-range__value-unit {
  opacity: 0.48;
}
.filter-range__slider {
  width: 100%;
}
/* noUI slider override styles ---------------------------------------- */
.noUi-target {
  background: transparent;
  border: none;
  box-shadow: none;
  height: 16rem;
}
.noUi-base, .noUi-connects {
  height: 16rem;
  position: relative;
}
.noUi-connects {
  border-radius: 30rem;
  overflow: visible;
  background: rgba(26, 26, 26, 0.12);
  height: 2rem;
  top: 7rem;
}
.noUi-connect {
  background: var(--color-accent);
  border-radius: 30rem;
}
.noUi-handle {
  width: 16rem !important;
  height: 16rem !important;
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 50%;
  box-shadow: none;
  /* Centre the handle on the 2px rail (rail sits at top:7rem in a 16rem
     track, so its centre is 8rem; a 16rem handle centres at top:0). */
  top: 0 !important;
  right: -8rem !important;
  cursor: grab;
}
.noUi-handle::before, .noUi-handle::after {
  display: none;
}
.noUi-handle:focus {
  outline: none;
}
.noUi-handle:focus-visible {
  box-shadow: 0 0 0 3rem rgba(26, 26, 26, 0.16);
}
.noUi-handle.noUi-active {
  cursor: grabbing;
}
.noUi-horizontal {
  height: 16rem;
}
/* Product grid -------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid rgba(26, 26, 26, 0.12);
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  overflow: hidden;
}
.product-grid li {
  display: flex;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  width: 100%;
  min-width: 0;
  padding: 24rem 24rem 40rem;
  border-right: 1px solid rgba(26, 26, 26, 0.12);
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow 0.25s ease, z-index 0s linear 0.25s;
  cursor: pointer;
  /* Stretched navigation link — the whole card opens the product, while the
     bookmark and the hover action bar stay independently clickable. */
}
.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card:hover {
  z-index: 5;
  box-shadow: 0 40rem 80rem -24rem rgba(26, 26, 26, 0.18), 0 8rem 24rem -12rem rgba(26, 26, 26, 0.1);
  transition: box-shadow 0.25s ease, z-index 0s;
}
.product-card:hover .product-card__image > img {
  transform: scale(1.04);
}
.product-card {
  /* Reveal the thumbnail strip + the quantity / add-to-cart bar on hover */
}
.product-card:hover .product-card__thumbs {
  opacity: 1;
  transform: translateY(0);
}
.product-card:hover .product-card__actions {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 24rem;
}
.product-card__image {
  position: relative;
  width: 100%;
  height: 352rem;
  border-radius: 12rem;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f5f7 0%, #e2e4e8 100%);
}
.product-card__image > img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card {
  /* Crossfade layer — JS shows the outgoing photo here and fades it out over
     the freshly-swapped main image, so switching views dissolves smoothly. */
}
.product-card__image-ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.4s ease;
}
.product-card {
  /* Thumbnail strip — overlays the bottom of the image, revealed on hover.
     Decorative (pointer-events: none) so clicks fall through to the card link. */
}
.product-card__thumbs {
  position: absolute;
  left: 12rem;
  right: 12rem;
  bottom: 16rem;
  z-index: 2;
  display: flex;
  gap: 8rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(8rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.product-card__thumb {
  width: 48rem;
  height: 48rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rem;
  overflow: hidden;
  background: #f1f2f4;
  border: 1px solid rgba(26, 26, 26, 0.12);
}
.product-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.product-card__thumb.is-active {
  border: 1.5px solid var(--color-accent);
}
.product-card__bookmark {
  position: absolute;
  top: 36rem;
  right: 36rem;
  width: 32rem;
  height: 32rem;
  background: transparent;
  border: none;
  border-radius: 8rem;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0;
}
.product-card__bookmark svg {
  width: 24rem;
  height: 24rem;
  transition: transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}
.product-card__bookmark:hover {
  color: var(--color-accent);
  transform: scale(1.08);
}
.product-card__bookmark.is-active {
  color: var(--color-accent);
}
.product-card__bookmark.is-active svg {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
.product-card__badge {
  position: absolute;
  top: 36rem;
  left: 36rem;
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  padding: 6rem 12rem;
  border-radius: 8rem;
  color: var(--color-white);
  font-size: 16rem;
  line-height: 1.4;
  z-index: 2;
  pointer-events: none;
}
.product-card__badge svg {
  width: 16rem;
  height: 16rem;
}
.product-card__badge--discount {
  background: #c84d4d;
}
.product-card__badge--new {
  background: #2e6f3f;
}
.product-card__badge--hit {
  background: #D89B3C;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8rem;
}
.product-card__row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: flex-start;
  gap: 16rem;
}
.product-card__name {
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  max-width: 234rem;
}
.product-card__sku {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
  white-space: nowrap;
}
.product-card__stock {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
  padding-bottom: 8rem;
  display: inline-block;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.12);
}
.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 12rem;
  margin-top: 8rem;
}
.product-card__price-main {
  font-size: 24rem;
  line-height: 1.16;
  color: var(--color-dark);
}
.product-card__price-old {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.4;
  text-decoration: line-through;
}
.product-card {
  /* Hover action bar — quantity stepper + add-to-cart, hidden until hover.
     Uses the grid 0fr→1fr trick so it expands smoothly to its natural height
     without reserving space in the resting (normal) state. */
}
.product-card__actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}
.product-card__actions-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
.product-card__divider {
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
}
.product-card__buy {
  display: flex;
  align-items: center;
  gap: 16rem;
}
.product-card__qty {
  display: flex;
  align-items: center;
  gap: 16rem;
  flex-shrink: 0;
}
.product-card__qty-btn {
  width: 56rem;
  height: 56rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 12rem;
  color: var(--color-dark);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.product-card__qty-btn svg {
  width: 24rem;
  height: 24rem;
}
.product-card__qty-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.product-card__qty-value {
  min-width: 20rem;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 18rem;
  line-height: 1.4;
  color: #363636;
}
.product-card__cart {
  flex: 1 1 auto;
  min-width: 0;
  height: 56rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 0 20rem;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 12rem;
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.16;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}
.product-card__cart svg {
  width: 24rem;
  height: 24rem;
}
.product-card__cart:hover {
  background: #d99700;
}
/* Pager (pill style) -------------------------------------------------- */
.pager {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 50rem;
  padding: 4rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
  background: var(--color-white);
}
.pager__page {
  min-width: 42rem;
  height: 42rem;
  padding: 0 12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14rem;
  font-weight: 500;
  color: var(--color-dark);
  border-radius: 30rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.pager__page.is-active {
  background: var(--color-accent);
  color: var(--color-white);
}
.pager__page:hover:not(.is-active) {
  background: rgba(26, 26, 26, 0.06);
}
.pager__dots {
  min-width: 24rem;
  text-align: center;
  color: var(--color-dark);
  opacity: 0.64;
  font-weight: 500;
  font-size: 14rem;
  padding: 0 8rem;
}
.pager__next {
  min-width: 68rem;
  height: 42rem;
  padding: 0 24rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 30rem;
  margin-left: 12rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pager__next svg {
  width: 20rem;
  height: 20rem;
}
.pager__next:hover {
  background: #d99700;
  transform: translateX(2rem);
}
/* Mobile filter-drawer controls — hidden on desktop (filter stays a sidebar) */
.page-category__filter-toggle,
.page-category__filter-close,
.page-category__filter-foot,
.page-category__filter-backdrop {
  display: none;
}
/* "Сбросить фильтры" — neutral grey button at the bottom of the filter list.
   Shared by the category and search pages, shown on desktop and mobile. */
.filter-reset {
  width: 100%;
  min-height: 50rem;
  margin-top: 20rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding: 12rem 20rem;
  background: rgba(26, 26, 26, 0.06);
  color: var(--color-dark);
  border: none;
  border-radius: 12rem;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.filter-reset:hover {
  background: rgba(26, 26, 26, 0.1);
}
.filter-reset:active {
  background: rgba(26, 26, 26, 0.14);
}
@media (max-width: 1023px) {
  .page-category__hero {
    height: auto;
    min-height: 0;
    padding-bottom: 36rem;
  }
  .page-category {
    /* Stack compactly under the fixed header instead of pinning title to the
       bottom of a tall block (which left a big empty gap). */
  }
  .page-category__hero-inner {
    height: auto;
    padding: 104rem 24rem 0;
    justify-content: flex-start;
    gap: 20rem;
  }
  .page-category__breadcrumbs {
    padding-left: 0;
  }
  .page-category__group {
    padding-left: 0;
  }
  .page-category__title {
    font-size: 40rem;
    padding-top: 0;
  }
  .page-category__lead {
    font-size: 16rem;
    max-width: 100%;
  }
  .page-category__hero-image {
    width: 86vw;
    height: auto;
    max-width: 400px;
    max-height: 240rem;
    top: auto;
    bottom: 0;
    opacity: 0.45;
  }
  .page-category .page-checkout-success .order-summary--success .order-summary__row {
    font-size: 12rem;
  }
  .page-category__body {
    grid-template-columns: 1fr;
    gap: 32rem;
    padding: 0 24rem 60rem;
  }
  .page-category__filters {
    max-width: 100%;
  }
  .page-category__pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .page-category__more {
    justify-content: center;
  }
  .filter-swatches {
    grid-template-columns: repeat(8, 1fr);
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-card {
    padding: 16rem 16rem 24rem;
  }
  .product-card__image {
    height: 220rem;
  }
  .product-card__name {
    font-size: 16rem;
  }
  .product-card__bookmark {
    top: 28rem;
    right: 28rem;
  }
  .product-card__badge {
    top: 28rem;
    left: 28rem;
  }
  .product-card {
    /* No hover on touch — show the thumbnails + the cart bar permanently */
  }
  .product-card__thumbs {
    opacity: 1;
    transform: none;
    bottom: 12rem;
  }
  .product-card__thumb {
    width: 44rem;
    height: 44rem;
  }
  .product-card__actions {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 20rem;
  }
  .product-card__qty-btn {
    width: 48rem;
    height: 48rem;
  }
  .product-card__cart {
    height: 48rem;
    font-size: 16rem;
  }
  .pager {
    overflow-x: auto;
    max-width: 100%;
  }
  /* ---- Filter becomes a slide-in drawer on mobile ---- */
  body.is-filter-open {
    overflow: hidden;
  }
  .page-category__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
    align-self: flex-start;
    min-height: 44rem;
    padding: 11rem 18rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.16);
    border-radius: 30rem;
    font-family: "Inter", sans-serif;
    font-size: 15rem;
    font-weight: 500;
    color: var(--color-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .page-category__filter-toggle:hover {
    border-color: rgba(26, 26, 26, 0.32);
  }
  .page-category__filter-toggle svg {
    width: 20rem;
    height: 20rem;
  }
  .page-category__filters {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: min(420rem, 88vw);
    max-width: 88vw;
    height: 100dvh;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20rem 20rem 0;
    box-shadow: 0 0 60rem rgba(26, 26, 26, 0.25);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.is-filter-open .page-category__filters {
    transform: translateX(0);
  }
  .page-category__filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(26, 26, 26, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  body.is-filter-open .page-category__filter-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .page-category__filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: -8rem;
    width: 44rem;
    height: 44rem;
    background: transparent;
    border: none;
    color: var(--color-dark);
    cursor: pointer;
  }
  .page-category__filter-close svg {
    width: 24rem;
    height: 24rem;
  }
  .page-category__filter-foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin: 24rem -20rem 0;
    padding: 16rem 20rem;
    background: #fff;
    border-top: 1px solid rgba(26, 26, 26, 0.12);
  }
  .page-category__filter-apply {
    width: 100%;
    min-height: 50rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 12rem;
    font-family: "Inter", sans-serif;
    font-size: 16rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .page-category__filter-apply:hover {
    background: #d99700;
  }
}
@media (max-width: 599px) {
  .page-category__hero-inner {
    padding: 96rem 20rem 0;
    padding-top: 30px;
  }
  .page-category__breadcrumbs {
    left: 20rem;
    top: 96rem;
    font-size: 12rem;
  }
  .page-category__title {
    font-size: 32rem;
    padding-top: 40rem;
  }
  .page-category__lead {
    font-size: 15rem;
  }
  .page-category__body {
    padding: 0 20rem 48rem;
    gap: 24rem;
  }
  .page-category__sort {
    gap: 12rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .sort-radios {
    gap: 10rem;
  }
  .filter-swatches {
    grid-template-columns: repeat(6, 1fr);
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  .product-card {
    padding: 16rem 16rem 28rem;
    min-width: 0;
  }
  .product-card__image {
    height: 240rem;
  }
  .product-card__image img {
    max-width: 100%;
  }
  .product-card__bookmark {
    top: 28rem;
    right: 28rem;
  }
  .product-card__badge {
    top: 28rem;
    left: 28rem;
  }
  .product-card__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }
  .product-card__sku {
    white-space: normal;
  }
  .product-card__name {
    max-width: 100%;
  }
  .product-card {
    /* Thumbnails + action bar stay visible (no hover) */
  }
  .product-card__thumbs {
    opacity: 1;
    transform: none;
    bottom: 12rem;
    gap: 6rem;
  }
  .product-card__thumb {
    width: 40rem;
    height: 40rem;
  }
  .product-card__actions {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 16rem;
  }
  .product-card__qty {
    gap: 12rem;
  }
  .product-card__qty-btn {
    width: 48rem;
    height: 48rem;
  }
  .product-card__qty-value {
    min-width: 16rem;
  }
  .product-card__cart {
    height: 48rem;
    font-size: 16rem;
    padding: 0 12rem;
  }
}
/* ====================================================================== */
/* Product page                                                            */
/* ====================================================================== */
.page-product {
  display: block;
  padding: 0 48rem 80rem;
  color: var(--color-text);
}
.page-product__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6rem;
  padding: 32rem 0 24rem;
  font-size: 14rem;
  line-height: 1.4;
  flex-wrap: wrap;
}
.page-product__crumb {
  color: var(--color-dark);
  transition: opacity 0.25s ease;
}
.page-product__crumb--muted {
  color: rgba(26, 26, 26, 0.32);
}
.page-product__crumb:is(a):hover {
  opacity: 0.7;
}
.page-product__crumb-sep {
  color: rgba(26, 26, 26, 0.32);
}
.page-product {
  /* Main row (gallery + info) ------------------------------------------ */
}
.page-product__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 753rem;
  column-gap: 48rem;
  row-gap: 24rem;
  align-items: flex-start;
  margin-bottom: 80rem;
}
.page-product {
  /* Right column wrapper: heading + info in a single grid cell, top-aligned,
     so the (taller) gallery column never pushes the description down. On mobile
     it collapses (display:contents) so heading/gallery/info can be reordered. */
}
.page-product__right {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24rem;
  min-width: 0;
}
.page-product {
  /* Heading (SKU + name + stock). On mobile it's reordered above the gallery. */
}
.page-product__heading {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24rem;
}
.page-product {
  /* Left column: 360 viewer + gallery ---------------------------------- */
}
.page-product__gallery {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  min-width: 0;
}
.page-product {
  /* Info (price, description, accordions) ------------------------------- */
}
.page-product__info {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24rem;
  position: relative;
}
.page-product__info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16rem;
}
.page-product__sku {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
  font-weight: 500;
}
.page-product__bookmark {
  width: 32rem;
  height: 32rem;
  background: transparent;
  border: none;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.page-product__bookmark svg {
  width: 24rem;
  height: 24rem;
}
.page-product__bookmark:hover {
  color: var(--color-accent);
  transform: scale(1.08);
}
.page-product__bookmark.is-active {
  color: var(--color-accent);
}
.page-product__bookmark.is-active svg {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
.page-product__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  letter-spacing: -0.5rem;
}
.page-product__stock {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
  padding-bottom: 12rem;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.12);
  margin: 0;
}
.page-product__divider {
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
  width: 100%;
}
.page-product__lead {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.page-product__lead p {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.page-product__price-row {
  display: flex;
  align-items: center;
  gap: 24rem;
  width: 100%;
  flex-wrap: wrap;
}
.page-product__price-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 12rem;
}
.page-product__price {
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.page-product__price-old {
  font-size: 20rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  opacity: 0.4;
  text-decoration: line-through;
}
.page-product__divider-v {
  display: inline-block;
  width: 1px;
  height: 56rem;
  background: rgba(26, 26, 26, 0.16);
}
.page-product__qty {
  display: inline-flex;
  align-items: center;
  gap: 24rem;
}
.page-product__qty-btn {
  width: 56rem;
  height: 56rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 12rem;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}
.page-product__qty-btn svg {
  width: 24rem;
  height: 24rem;
}
.page-product__qty-btn:hover {
  border-color: var(--color-dark);
}
.page-product__qty-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.page-product__qty-btn:disabled:hover {
  border-color: rgba(26, 26, 26, 0.16);
}
.page-product__qty-value {
  width: 32rem;
  min-width: 32rem;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  font-size: 18rem;
  line-height: 1.4;
  font-weight: 600;
  color: #363636;
  font-family: inherit;
  padding: 0;
  appearance: none;
  -moz-appearance: textfield;
}
.page-product__qty-value::-webkit-outer-spin-button, .page-product__qty-value::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.page-product__cta {
  width: 251rem;
  min-width: 251rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 20rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  border: none;
  border-radius: 12rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.page-product__cta-icon {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.page-product__cta-icon svg {
  width: 100%;
  height: 100%;
}
.page-product__cta:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.page-product__accordions {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  width: 100%;
  margin-top: 40rem;
}
/* ---------------------------------------------------------------------- */
/* 360 viewer                                                              */
/* ---------------------------------------------------------------------- */
.product-viewer {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.product-viewer__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1023/747;
  border-radius: 24rem;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.product-viewer__frames {
  position: absolute;
  inset: 0;
}
.product-viewer__frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.05s linear;
  pointer-events: none;
}
.product-viewer__frames img.is-active {
  opacity: 1;
}
.product-viewer__badge {
  position: absolute;
  top: 24rem;
  left: 24rem;
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  padding: 6rem 12rem;
  border-radius: 8rem;
  color: var(--color-white);
  font-size: 16rem;
  line-height: 1.4;
  z-index: 2;
}
.product-viewer__badge svg {
  width: 16rem;
  height: 16rem;
}
.product-viewer__badge--discount {
  background: #c84d4d;
}
.product-viewer__hint {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  color: var(--color-dark);
  opacity: 0.88;
  pointer-events: none;
  z-index: 2;
}
.product-viewer__hint-text {
  font-size: 16rem;
  line-height: 1.4;
}
.product-viewer__hint-icon, .product-viewer__hint svg {
  width: 24rem;
  height: 24rem;
}
.product-viewer__slider {
  width: 242rem;
  margin: 0 auto;
  padding: 0 24rem;
}
.product-viewer__slider-track {
  position: relative;
  height: 4rem;
  background: rgba(26, 26, 26, 0.1333333333);
  border-radius: 999rem;
  cursor: pointer;
  touch-action: none;
}
.product-viewer__slider-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20rem;
  height: 20rem;
  background: var(--color-dark);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  padding: 0;
  transition: transform 0.15s ease;
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.2);
}
.product-viewer__slider-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
}
.product-viewer__slider-handle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* ---------------------------------------------------------------------- */
/* Photo gallery grid                                                      */
/* ---------------------------------------------------------------------- */
.product-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12rem;
  margin-top: 44rem;
}
.product-gallery__item {
  border-radius: 24rem;
  overflow: hidden;
  background: #f1f2f4;
  aspect-ratio: 505/369;
  flex-grow: 0;
  flex-shrink: 0;
}
.product-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-gallery__item {
  /* Pattern of 6: 50/50 | 100 | 50/50 | 100 */
}
.product-gallery__item:nth-child(6n+1), .product-gallery__item:nth-child(6n+2) {
  flex-basis: calc(50% - 6rem);
  width: calc(50% - 6rem);
}
.product-gallery__item:nth-child(6n+3) {
  flex-basis: 100%;
  width: 100%;
  aspect-ratio: 1023/571;
}
.product-gallery__item:nth-child(6n+4), .product-gallery__item:nth-child(6n+5) {
  flex-basis: calc(50% - 6rem);
  width: calc(50% - 6rem);
}
.product-gallery__item:nth-child(6n+6) {
  flex-basis: 100%;
  width: 100%;
  aspect-ratio: 1023/571;
}
.product-gallery {
  /* Collapsed: show only the first row pattern (items 1..3 → 50/50 + 100 wide) */
}
.product-gallery[data-collapsed=true] .product-gallery__item:nth-child(n+4) {
  display: none;
}
.product-gallery__more {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  padding: 16rem 12rem;
  border: 1px solid rgba(26, 26, 26, 0.2);
  border-radius: 12rem;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 16rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-top: 4rem;
}
.product-gallery__more svg {
  width: 16rem;
  height: 16rem;
  transition: transform 0.25s ease;
}
.product-gallery__more:hover {
  background: #f6f7f9;
  border-color: rgba(26, 26, 26, 0.3);
}
.product-gallery__more.is-expanded svg {
  transform: rotate(180deg);
}
/* ---------------------------------------------------------------------- */
/* Accordions                                                              */
/* ---------------------------------------------------------------------- */
.product-accordion {
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 12rem;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.product-accordion[open] {
  border-color: rgba(26, 26, 26, 0.24);
}
.product-accordion__head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  padding: 24rem;
  cursor: pointer;
  color: var(--color-dark);
  font-size: 20rem;
  line-height: 1.16;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-accordion__head::-webkit-details-marker {
  display: none;
}
.product-accordion__head::marker {
  display: none;
}
.product-accordion__label {
  font-weight: 400;
}
.product-accordion__chev {
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-accordion[open] .product-accordion__head {
  color: var(--color-accent);
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.product-accordion[open] .product-accordion__chev {
  transform: rotate(180deg);
}
.product-accordion__body {
  overflow: hidden;
  /* JS animates max-height between 0 and the natural height on toggle. */
  transition: max-height 0.3s ease;
  padding: 24rem;
  font-size: 16rem;
  line-height: 1.5;
  color: var(--color-dark);
  opacity: 0.88;
}
.product-accordion__body p {
  margin: 0 0 12rem;
}
.product-accordion__body p:last-child {
  margin-bottom: 0;
}
/* Sizes accordion: icon (88×40) | dashed rule | label/value */
.product-sizes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.product-sizes__row {
  display: flex;
  align-items: flex-end;
  gap: 12rem;
  width: 100%;
}
.product-sizes__icon {
  width: 88rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  color: var(--color-dark);
}
.product-sizes__icon img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.product-sizes__rule {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
  align-self: flex-end;
  margin-bottom: 11rem; /* aligns with text baseline of "158 мм" line */
}
.product-sizes__value {
  width: 158rem;
  min-width: 158rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
}
.product-sizes__label {
  color: rgba(26, 26, 26, 0.48);
  opacity: 0.88;
}
.product-sizes__num {
  color: var(--color-dark);
  opacity: 0.88;
}
.product-spec {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  margin: 0;
}
.product-spec__row {
  display: flex;
  align-items: baseline;
  gap: 12rem;
  padding-bottom: 12rem;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.12);
}
.product-spec__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.product-spec__row dt {
  flex: 0 0 auto;
  font-size: 15rem;
  color: var(--color-dark);
  opacity: 0.6;
}
.product-spec__row dd {
  margin: 0 0 0 auto;
  font-size: 15rem;
  color: var(--color-dark);
  text-align: right;
}
.product-list {
  margin: 0;
  padding: 0 0 0 20rem;
  list-style: disc;
}
.product-list li {
  margin-bottom: 6rem;
}
.product-list li:last-child {
  margin-bottom: 0;
}
/* ---------------------------------------------------------------------- */
/* Shelves (Similar, Recently viewed) — Swiper                            */
/* ---------------------------------------------------------------------- */
.page-product__shelf {
  position: relative;
  margin-bottom: 64rem;
  background: #f1f2f4;
  border-radius: 24rem;
  padding: 56rem 104rem 104rem;
  margin-left: -48rem;
  margin-right: -48rem;
}
.page-product__shelf--plain {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  padding-left: 48rem;
  padding-right: 48rem;
  padding-top: 30rem;
  padding-bottom: 40rem;
}
.page-product__shelf--plain .product-grid {
  grid-template-columns: repeat(4, 1fr);
}
.page-product__shelf-inner {
  position: relative;
}
.page-product__shelf-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rem;
  margin-bottom: 32rem;
}
.page-product__shelf-title {
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  text-align: left;
  width: 100%;
}
.product-shelf-swiper {
  position: relative;
  overflow: hidden;
  padding-bottom: 32rem;
}
.product-shelf-swiper .swiper-wrapper {
  align-items: stretch;
}
.product-shelf-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.product-shelf-swiper .swiper-slide > .product-card {
  width: 100%;
}
.product-shelf-swiper__pagination.swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 12rem;
  width: auto;
}
.product-shelf-swiper__pagination.swiper-pagination .swiper-pagination-bullet {
  width: 10rem;
  height: 10rem;
  margin: 0;
  border-radius: 2rem;
  background: var(--color-dark);
  opacity: 0.16;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.product-shelf-swiper__pagination.swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent);
  opacity: 1;
}
.product-shelf-swiper__nav {
  position: absolute;
  top: calc(50% - 16rem);
  transform: translateY(-50%);
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, 0.16);
  background: var(--color-white);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  z-index: 5;
  box-shadow: 0 4rem 12rem rgba(26, 26, 26, 0.08);
}
.product-shelf-swiper__nav svg {
  width: 20rem;
  height: 20rem;
}
.product-shelf-swiper__nav:hover {
  color: var(--color-white);
  border-color: var(--color-dark);
}
.product-shelf-swiper__nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.product-shelf-swiper__nav--prev {
  left: -20rem;
}
.product-shelf-swiper__nav--next {
  right: -20rem;
}
.product-shelf-swiper {
  /* product-card overrides inside swiper — turn off internal border so the
     slide acts as a standalone card with the design’s thin outline. */
}
.product-shelf-swiper .product-card {
  border: 1px solid rgba(26, 26, 26, 0.12);
  padding: 24rem 24rem 40rem;
}
.product-shelf-swiper .swiper-wrapper {
  height: auto;
}
/* Responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
  .page-product {
    padding: 0 32rem 60rem;
  }
  .page-product__main {
    grid-template-columns: minmax(0, 1fr) 480rem;
    column-gap: 32rem;
    row-gap: 24rem;
  }
  .page-product__title {
    font-size: 38rem;
  }
  .page-product__price {
    font-size: 28rem;
  }
  .page-product__cta {
    min-width: 200rem;
    font-size: 16rem;
  }
  .page-product__shelf {
    padding: 40rem 32rem 40rem;
    margin-left: -32rem;
    margin-right: -32rem;
  }
}
@media (max-width: 1023px) {
  .page-product {
    padding: 0 24rem 60rem;
    /* Stack as a single column and lift the heading above the gallery */
  }
  .page-product__main {
    display: flex;
    flex-direction: column;
    gap: 32rem;
  }
  .page-product {
    /* Collapse the right wrapper so heading/gallery/info become direct flex
       items and can be reordered (heading first, then gallery, then info). */
  }
  .page-product__right {
    display: contents;
  }
  .page-product__heading {
    order: -1;
  }
  .page-product__title {
    font-size: 32rem;
  }
  .page-product__shelf {
    padding: 32rem 24rem;
    border-radius: 20rem;
    margin-left: -24rem;
    margin-right: -24rem;
  }
  .page-product__shelf-title {
    font-size: 24rem;
  }
  .product-viewer__hint {
    bottom: 32rem;
  }
  .product-shelf-swiper__nav {
    display: none;
  }
}
@media (max-width: 599px) {
  .page-product {
    padding: 0 16rem 48rem;
  }
  .page-product__breadcrumbs {
    padding: 20rem 0 16rem;
    font-size: 12rem;
  }
  .page-product__main {
    gap: 24rem;
    margin-bottom: 48rem;
  }
  .page-product__title {
    font-size: 26rem;
  }
  .page-product__price {
    font-size: 24rem;
  }
  .page-product__price-row {
    gap: 16rem;
  }
  .page-product__price-wrap {
    padding-right: 0;
    border-right: none;
    width: 100%;
  }
  .page-product__cta {
    width: 100%;
    padding: 14rem 16rem;
    font-size: 16rem;
    min-width: 0;
  }
  .page-product__accordions {
    margin-top: 16rem;
  }
  .page-product__shelf {
    padding: 24rem 16rem;
    border-radius: 16rem;
    margin-bottom: 32rem;
    margin-left: -16rem;
    margin-right: -16rem;
  }
  .page-product__shelf-title {
    font-size: 20rem;
  }
  .product-viewer__slider {
    padding: 0 8rem;
  }
  .product-viewer__slider-track {
    height: 6rem;
  }
  .product-viewer__slider-handle {
    width: 22rem;
    height: 22rem;
  }
  .product-viewer__hint {
    bottom: 24rem;
  }
  .product-viewer__badge {
    top: 12rem;
    left: 12rem;
  }
  .product-accordion__head {
    padding: 16rem 20rem;
    font-size: 18rem;
  }
  .product-accordion__body {
    padding: 20rem;
    font-size: 15rem;
  }
  .product-sizes {
    gap: 20rem;
  }
  .product-sizes__row {
    flex-wrap: wrap;
    gap: 8rem 12rem;
  }
  .product-sizes__icon {
    width: 64rem;
  }
  .product-sizes__rule {
    display: none;
  }
  .product-sizes__value {
    width: auto;
    min-width: 0;
    flex: 1;
    font-size: 14rem;
  }
  .product-gallery__item {
    /* On mobile collapse gallery into single column */
  }
  .product-gallery__item:nth-child(n) {
    flex-basis: 100%;
    width: 100%;
    aspect-ratio: 16/11;
  }
}
/* ====================================================================== */
/* Cart layout (items + summary) — Figma node 679:9142 (filled cart)         */
/* Below-min variant: 610:53935 · Unauth variant: 645:59046 (see _cart-unauth)*/
/* Units: 1rem ≈ 1px @1920. Figma px → rem 1:1.                              */
/* cart-empty.html does NOT use these selectors, so it is unaffected.        */
/* ====================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Figma 679:9151 — on the filled cart the title sits 32rem above the
   "Выбрать все" toolbar. The base `.page__title` rule (defined globally in
   _cart-empty.scss) is `margin: 0`, so the title was flush on the toolbar.
   Scoped to the filled-cart variants only — `:not(.page-cart--empty)` keeps
   cart-empty.html's own title spacing (Figma 618:64323) untouched, and no
   non-cart page uses the bare `.page__title` class. */
.page-cart:not(.page-cart--empty) .page__title {
  margin-bottom: 32rem;
}
.page-cart .cart {
  display: grid;
  grid-template-columns: 1fr 442rem;
  gap: 40rem;
  align-items: start;
}
.page-cart .cart__main {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Generic square checkbox (16×16, rounded-4, no fill until checked) ------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
  cursor: pointer;
  user-select: none;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__box {
  width: 16rem;
  height: 16rem;
  border-radius: 4rem;
  border: 1px solid rgba(26, 26, 26, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  color: transparent;
}
.checkbox__box svg {
  width: 10rem;
  height: 10rem;
}
input:checked ~ .checkbox__box, input:checked + .checkbox__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.checkbox__label {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
/* Toolbar above the list — flat (checkbox left, text link right) ---------- */
.cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  padding: 0;
  background: transparent;
  border: none;
  margin: 0 0 24rem;
}
.cart-toolbar__select .checkbox__label {
  font-size: 16rem;
  color: var(--color-dark);
  opacity: 0.88;
}
.cart-toolbar__remove {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  color: var(--color-dark);
  opacity: 0.88;
  font-size: 16rem;
  line-height: 1.4;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2rem;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.cart-toolbar__remove:hover {
  color: var(--color-accent);
  opacity: 1;
}
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
/* Cart item — single row card -------------------------------------------- */
.cart-item {
  display: flex;
  align-items: center;
  gap: 24rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  padding: 32rem;
  box-shadow: 0 55rem 89rem rgba(0, 0, 0, 0.02);
}
.cart-item__select {
  padding: 0;
  align-self: center;
  flex-shrink: 0;
}
.cart-item__body {
  display: flex;
  align-items: flex-start;
  gap: 24rem;
  flex: 1 1 0;
  min-width: 0;
}
.cart-item__media {
  position: relative;
  width: 228rem;
  height: 151rem;
  border-radius: 12rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: #f6f7f8;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24rem;
  flex: 1 1 0;
  min-width: 0;
}
.cart-item {
  /* Left part of content: badge + sku + title + icons */
}
.cart-item__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 151rem;
  width: 359rem;
  max-width: 100%;
  min-width: 0;
}
.cart-item__info-top {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  min-width: 0;
}
.cart-item__badges {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
}
.cart-item__text {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  min-width: 0;
}
.cart-item__sku {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
}
.cart-item__title {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  font-weight: 400;
}
.cart-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
}
.cart-item__action {
  width: 24rem;
  height: 24rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--color-dark);
  opacity: 0.72;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
  padding: 0;
}
.cart-item__action svg {
  width: 24rem;
  height: 24rem;
  display: block;
}
.cart-item__action:hover {
  color: var(--color-accent);
  opacity: 1;
}
.cart-item__action.is-active {
  color: var(--color-accent);
  opacity: 1;
}
.cart-item {
  /* Right part of content: price + qty stepper */
}
.cart-item__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  width: 185rem;
  flex-shrink: 0;
}
.cart-item__price {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12rem;
  width: 100%;
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  white-space: nowrap;
}
.cart-item__price-old {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.4;
  text-decoration: line-through;
}
/* Badge — solid fill, white text (Скидка = red, Новинка = green) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  padding: 6rem 12rem;
  border-radius: 8rem;
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-white);
  white-space: nowrap;
}
.badge svg {
  width: 14rem;
  height: 14rem;
  display: block;
}
.badge--discount, .badge--danger {
  background: #c84d4d;
}
.badge--new, .badge--success {
  background: #4faf7a;
}
.badge--hit {
  background: #f4a900;
}
/* Quantity stepper — 48×48 bordered boxes, "1" between (gap 20) ----------- */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 20rem;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.qty__btn {
  width: 48rem;
  height: 48rem;
  border-radius: 12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.16);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qty__btn svg {
  width: 20rem;
  height: 20rem;
  display: block;
}
.qty__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.qty__input {
  width: 28rem;
  min-width: 20rem;
  height: 28rem;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  color: #363636;
  padding: 0;
  appearance: none;
  -moz-appearance: textfield;
  font-family: inherit;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty__input:focus {
  outline: none;
}
.qty__value {
  min-width: 20rem;
  text-align: center;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  color: #363636;
}
/* ====================================================================== */
/* Order summary (right panel) — bg #f1f2f4, rounded 16, padding 24         */
/* ====================================================================== */
.order-summary {
  background: #f1f2f4;
  border-radius: 16rem;
  padding: 24rem;
  display: flex;
  flex-direction: column;
  gap: 24rem;
  position: sticky;
  top: 120rem;
}
.order-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16rem;
}
.order-summary__title {
  font-size: 20rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
}
.order-summary__count {
  font-size: 18rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.64;
}
.order-summary {
  /* Top divider above the rows */
}
.order-summary__divider {
  height: 1px;
  width: 100%;
  background: rgba(26, 26, 26, 0.12);
}
.order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.order-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
}
.order-summary__label {
  color: var(--color-dark);
  opacity: 0.64;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 400;
}
.order-summary__value {
  color: var(--color-dark);
  opacity: 0.88;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
}
.order-summary__value--minus, .order-summary__value--negative {
  opacity: 0.88;
}
.order-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
}
.order-summary__total-label {
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.order-summary__total-value {
  display: inline-flex;
  align-items: baseline;
  gap: 12rem;
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  white-space: nowrap;
}
.order-summary__total-old {
  font-size: 20rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.4;
  text-decoration: line-through;
}
.order-summary {
  /* The "Итог" block can carry an extra hint row (below-min variant) */
}
.order-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.order-summary__hint {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.64;
}
.order-summary__hint-label, .order-summary__hint-value {
  font-size: 14rem;
  line-height: 1.4;
}
.order-summary {
  /* Foot block: button + helper note */
}
.order-summary__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  margin-top: 8rem;
}
.order-summary__cta {
  width: 100%;
  height: 61rem;
  padding: 20rem 24rem;
}
.order-summary__cta.is-disabled {
  background: rgba(26, 26, 26, 0.4);
  color: var(--color-white);
  pointer-events: none;
  cursor: default;
}
.order-summary__cta.is-disabled:hover {
  background: rgba(26, 26, 26, 0.4);
  transform: none;
}
.order-summary__warning {
  font-size: 14rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.56;
  text-align: center;
  width: 276rem;
  max-width: 100%;
}
@media (max-width: 1023px) {
  .page-cart .cart {
    grid-template-columns: 1fr;
    gap: 24rem;
  }
  /* The single-column grid track is `1fr`; without min-width:0 the flex
     children below (toolbar + item rows) keep their min-content width and
     blow the track past the viewport. Clamp it so everything fits. */
  .cart__main {
    min-width: 0;
  }
  /* Toolbar halves (select label + remove link) can wrap instead of forcing
     a wide min-content on narrow screens. */
  .cart-toolbar {
    flex-wrap: wrap;
  }
  .cart-item {
    padding: 20rem;
    gap: 16rem;
    min-width: 0;
  }
  .cart-item__body {
    flex-wrap: wrap;
    gap: 16rem;
    min-width: 0;
  }
  .cart-item__media {
    width: 160rem;
    height: 110rem;
  }
  .cart-item__content {
    flex: 1 1 240rem;
    min-width: 0;
  }
  .cart-item__info {
    width: auto;
    height: auto;
    gap: 16rem;
  }
  .cart-item__aside {
    width: auto;
    align-self: flex-end;
    gap: 16rem;
  }
  .order-summary {
    position: static;
  }
}
@media (max-width: 599px) {
  .cart-toolbar {
    gap: 12rem;
  }
  .cart-item {
    padding: 16rem;
    /* Reset the tablet wrap: a wrapping *column* flexbox sizes its width to the
       widest child's min-content (~343), which overflowed the row. Force a
       plain single-column stack so children clamp to the parent width. */
  }
  .cart-item__body {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .cart-item__media {
    width: 100%;
    height: 160rem;
  }
  .cart-item__content {
    flex-direction: column;
    gap: 16rem;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .cart-item__info {
    width: 100%;
    min-width: 0;
  }
  .cart-item__aside {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12rem 16rem;
  }
  .cart-item__price {
    width: auto;
  }
  .cart-item .qty {
    flex-shrink: 0;
  }
  .cart-item {
    /* Keep tap targets comfortable on phones. */
  }
  .cart-item__action {
    width: 28rem;
    height: 28rem;
  }
  .cart-item__action svg {
    width: 24rem;
    height: 24rem;
  }
  .qty {
    gap: 12rem;
  }
  .qty__btn {
    width: 44rem;
    height: 44rem;
  }
  .qty__btn svg {
    width: 20rem;
    height: 20rem;
  }
  .order-summary__title {
    font-size: 20rem;
  }
  .order-summary__total-label, .order-summary__total-value {
    font-size: 22rem;
  }
}
/* ====================================================================== */
/* Add-to-cart drawer — Figma node 610:53257                                */
/* Right-side, full-height drawer pinned to the viewport's right edge.      */
/* Fancybox is opened from cart.js with mainClass "fancybox--cart-drawer";  */
/* the rules below dock its inline content to the right and slide it in.    */
/* ====================================================================== */
.fancybox__container.fancybox--cart-drawer {
  --fancybox-bg: rgba(26, 26, 26, 0.4);
}
.fancybox__container.fancybox--cart-drawer .fancybox__backdrop {
  background: rgba(26, 26, 26, 0.4);
}
.fancybox__container.fancybox--cart-drawer {
  /* Let the slide host align its content to the right edge, full height. */
}
.fancybox__container.fancybox--cart-drawer .fancybox__slide {
  padding: 0;
  justify-content: flex-end;
  align-items: stretch;
}
.fancybox__container.fancybox--cart-drawer .fancybox__content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  width: 648rem;
  max-width: 100vw;
  height: 100%;
  min-height: 100%;
  margin: 0;
  border-radius: 0;
}
.fancybox__container.fancybox--cart-drawer {
  /* Slide the drawer in from the right (paired with the fade classes). */
}
.fancybox__container.fancybox--cart-drawer.f-fadeIn .cart-drawer__inner {
  animation: cart-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cart-drawer-in {
  from {
    transform: translateX(40rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.cart-drawer {
  height: 100%;
}
.cart-drawer__inner {
  background: var(--color-white);
  box-shadow: 0 55rem 89rem rgba(0, 0, 0, 0.08), 0 6.887rem 11.144rem rgba(0, 0, 0, 0.04);
  padding: 48rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32rem;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
}
.cart-drawer {
  /* Top group: header + product card -------------------------------------- */
}
.cart-drawer__top {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
}
.cart-drawer__title {
  font-size: 28rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.cart-drawer__close {
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.cart-drawer__close svg {
  width: 24rem;
  height: 24rem;
  display: block;
}
.cart-drawer__close:hover {
  color: var(--color-accent);
}
.cart-drawer {
  /* Product card — grey panel with thumb + info ---------------------------- */
}
.cart-drawer__item {
  display: flex;
  align-items: center;
  gap: 16rem;
  background: #f1f2f4;
  border-radius: 16rem;
  padding: 8rem 16rem 8rem 8rem;
}
.cart-drawer__media {
  width: 197rem;
  height: 146rem;
  border-radius: 12rem;
  border: 1px solid rgba(26, 26, 26, 0.08);
  background: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-drawer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-drawer__item-main {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  flex: 1 1 0;
  min-width: 0;
}
.cart-drawer__item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rem;
}
.cart-drawer__item-text {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  min-width: 0;
}
.cart-drawer__item-title {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
}
.cart-drawer__item-sku {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
}
.cart-drawer__item-remove {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
.cart-drawer__item-remove svg {
  width: 20rem;
  height: 20rem;
  display: block;
}
.cart-drawer__item-remove:hover {
  color: var(--color-accent);
}
.cart-drawer__item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
}
.cart-drawer__price {
  font-size: 20rem;
  line-height: 1.16;
  color: var(--color-dark);
  white-space: nowrap;
}
.cart-drawer {
  /* Bottom group: summary rows + actions ---------------------------------- */
}
.cart-drawer__bottom {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.cart-drawer__summary {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.cart-drawer__divider {
  height: 1px;
  width: 100%;
  background: rgba(26, 26, 26, 0.12);
}
.cart-drawer__rows {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  margin: 0;
}
.cart-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
  font-size: 18rem;
  line-height: 1.16;
  color: var(--color-dark);
  white-space: nowrap;
}
.cart-drawer__row dt {
  font-weight: 400;
  opacity: 0.56;
}
.cart-drawer__row dd {
  margin: 0;
  opacity: 0.4;
}
.cart-drawer__row--total {
  font-size: 20rem;
}
.cart-drawer__row--total dt {
  opacity: 1;
}
.cart-drawer__row--total dd {
  display: inline-flex;
  align-items: baseline;
  gap: 12rem;
  opacity: 1;
}
.cart-drawer__total-now {
  font-size: 20rem;
  color: var(--color-dark);
}
.cart-drawer__total-old {
  font-size: 18rem;
  color: var(--color-dark);
  opacity: 0.4;
  text-decoration: line-through;
}
.cart-drawer__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
}
.cart-drawer__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rem;
  width: 100%;
}
.cart-drawer__btn {
  width: 100%;
  height: 61rem;
  padding: 20rem 24rem;
  gap: 12rem;
  font-size: 18rem;
}
.cart-drawer__btn--continue svg {
  width: 24rem;
  height: 24rem;
  display: block;
}
.cart-drawer__note {
  font-size: 14rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.56;
  text-align: center;
  width: 276rem;
  max-width: 100%;
}
@media (max-width: 599px) {
  .fancybox__container.fancybox--cart-drawer .fancybox__content {
    width: 100vw;
  }
  .cart-drawer__inner {
    padding: 24rem;
    gap: 24rem;
  }
  .cart-drawer__title {
    font-size: 22rem;
  }
  .cart-drawer__media {
    width: 120rem;
    height: 100rem;
  }
  .cart-drawer__buttons {
    grid-template-columns: 1fr;
  }
}
/* ====================================================================== */
/* Light header variant — shared by all internal pages                     */
/* Header is relative here so it occupies layout space and the page content */
/* flows right below it (matches every other internal page + Figma).        */
/* ====================================================================== */
.site-header--light {
  color: var(--color-dark);
  position: relative;
  padding-top: 24rem;
}
.site-header--light .site-header__inner {
  border-bottom-color: rgba(26, 26, 26, 0.08);
}
.site-header--light .site-header__logo {
  color: var(--color-dark);
}
.site-header--light .site-header__divider {
  background: rgba(26, 26, 26, 0.16);
}
.site-header--light .site-header__contact,
.site-header--light .site-header__nav-link,
.site-header--light .site-header__icon {
  color: var(--color-dark);
}
.site-header--light .site-header__social {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.site-header--light .site-header__social svg path,
.site-header--light .site-header__social svg circle {
  fill: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__social:hover svg path,
.site-header--light .site-header__social:hover svg circle {
  fill: var(--color-white);
}
.site-header--light .site-header__icon svg [stroke=white] {
  stroke: var(--color-dark);
}
.site-header--light .site-header__icon svg [fill=white] {
  fill: var(--color-dark);
}
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
/* ====================================================================== */
/* Page shell + breadcrumbs                                                 */
/* Figma node 618:64057 (1920 frame): breadcrumbs top 132, title top 176.   */
/* Light header above is ~101rem tall, so a small top gap lands the         */
/* breadcrumbs at ~132 (no more huge empty band under the header).          */
/* ====================================================================== */
.page {
  padding-top: 16rem;
  padding-bottom: 80rem;
  background: var(--color-white);
  color: var(--color-text);
}
.page__container {
  max-width: 1824rem;
  margin: 0 auto;
  padding: 0 48rem;
}
.page__title {
  font-size: 48rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6rem;
  font-size: 14rem;
  line-height: 1.4;
  padding-top: 12rem; /* lands breadcrumbs at Figma top ~132 below the header */
  margin-bottom: 12rem; /* breadcrumb top 132 -> title top 176 */
  color: var(--color-dark);
}
.breadcrumbs__link {
  color: var(--color-dark);
  transition: opacity 0.25s ease;
}
.breadcrumbs__link--muted {
  color: rgba(26, 26, 26, 0.32);
}
.breadcrumbs__link:hover {
  opacity: 0.7;
}
.breadcrumbs__sep {
  color: rgba(26, 26, 26, 0.32);
}
/* ====================================================================== */
/* Cart — empty state (Figma node 618:64323)                               */
/* Title bottom ~232, content block top 332 => ~100rem gap above the icon. */
/* Block: icon 72 -> gap 24 -> (text gap 12) -> gap 24 -> button.          */
/* ====================================================================== */
.page-cart--empty {
  padding-bottom: 0;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  margin-top: 100rem;
  padding-bottom: 90rem; /* breathing room before the footer (frame: footer at 679) */
  color: var(--color-dark);
}
.cart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72rem;
  height: 72rem;
}
.cart-empty__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cart-empty__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  width: 554rem;
  max-width: 100%;
}
.cart-empty__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  width: 100%;
  text-align: center;
}
.cart-empty__title {
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
  white-space: nowrap;
}
.cart-empty__subtitle {
  font-size: 16rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.cart-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  border-radius: 12rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.cart-empty__cta:hover {
  background: #d99700;
}
.cart-empty__cta-icon {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.cart-empty__cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 1023px) {
  .page {
    padding-top: 8rem;
  }
  .page__container {
    padding: 0 24rem;
  }
  .page__title {
    font-size: 40rem;
  }
  .cart-empty {
    margin-top: 72rem;
    padding-bottom: 64rem;
  }
  .cart-empty__title {
    font-size: 26rem;
    white-space: normal;
  }
  .cart-empty__cta {
    width: 100%;
    max-width: 480rem;
  }
}
@media (max-width: 599px) {
  .page {
    padding-top: 4rem;
    padding-bottom: 56rem;
  }
  .page__container {
    padding: 0 20rem;
  }
  .page__title {
    font-size: 32rem;
  }
  .breadcrumbs {
    padding-top: 8rem;
  }
  .cart-empty {
    margin-top: 48rem;
    padding-bottom: 48rem;
  }
  .cart-empty__icon {
    width: 56rem;
    height: 56rem;
  }
  .cart-empty__title {
    font-size: 22rem;
  }
  .cart-empty__subtitle {
    font-size: 14rem;
  }
  .cart-empty__cta {
    width: 100%;
    padding: 14rem 20rem;
    font-size: 16rem;
  }
}
/* ====================================================================== */
/* Cart — unauthorized state · Figma node 645:59046                         */
/* Inherits cart + order-summary layout from _cart.scss; this file adds the */
/* white "login" card that replaces the foot button on the unauth panel.    */
/* ====================================================================== */
.order-summary--unauth {
  /* The summary head + totals keep the shared look; only the foot changes. */
}
.order-summary--unauth .order-summary__login {
  background: var(--color-white);
  border-radius: 12rem;
  padding: 16rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  margin-top: 8rem;
  box-shadow: 0 3rem 7rem rgba(77, 83, 112, 0.02), 0 12rem 12rem rgba(77, 83, 112, 0.02), 0 28rem 17rem rgba(77, 83, 112, 0.01);
}
.order-summary--unauth .order-summary__login-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
}
.order-summary--unauth .order-summary__login-badge {
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.order-summary--unauth .order-summary__login-badge svg {
  width: 24rem;
  height: 24rem;
  color: var(--color-white);
  display: block;
}
.order-summary--unauth .order-summary__login-text {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.88;
  text-align: center;
}
.order-summary--unauth .order-summary__login-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
}
.order-summary--unauth .order-summary__cta {
  width: 100%;
  height: 61rem;
  padding: 20rem 24rem;
  margin-top: 0;
}
.order-summary--unauth .order-summary__register {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.order-summary--unauth .order-summary__register:hover {
  color: var(--color-accent);
}
/* ====================================================================== */
/* Checkout — shared layout (delivery + pickup share most rules).           */
/* All checkout-specific selectors use the `.ch-` / `.checkout-` / `.addr-` */
/* / `.option` / `.date-pill` prefixes to avoid clashes with account-page  */
/* `address-card`/`addresses-*` rules.                                     */
/* ====================================================================== */
.page-checkout {
  padding-bottom: 80rem;
}
.page-checkout .checkout {
  display: grid;
  grid-template-columns: 1fr 442rem;
  gap: 24rem;
  margin-top: 32rem;
  align-items: start;
}
.page-checkout .checkout__main {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  min-width: 0;
}
.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  font-size: 18rem;
  line-height: 1.16;
  color: var(--color-dark);
  margin-top: 20rem;
  margin-bottom: 16rem;
  transition: color 0.2s ease;
}
.checkout-back:hover {
  color: var(--color-accent);
}
.checkout-back__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 20rem;
}
.checkout-back__icon svg {
  width: 20rem;
  height: 20rem;
}
.checkout-section {
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  padding: 32rem;
  display: flex;
  flex-direction: column;
  gap: 24rem;
  box-shadow: 0 55rem 89rem rgba(0, 0, 0, 0.02);
}
.checkout-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  flex-wrap: wrap;
}
.checkout-section__title {
  font-size: 28rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
}
/* ---------- Switch toggle (Получит другой человек) ---------------------- */
.ch-switch {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  cursor: pointer;
  user-select: none;
  font-size: 14rem;
  line-height: 1.3;
  color: var(--color-dark);
}
.ch-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ch-switch__label {
  color: var(--color-dark);
  font-weight: 500;
  order: -1;
}
.ch-switch__track {
  position: relative;
  width: 46rem;
  height: 26rem;
  border-radius: 60rem;
  background: rgba(26, 26, 26, 0.08);
  border: 1px solid rgba(26, 26, 26, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.ch-switch__thumb {
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.32);
  transition: transform 0.2s ease, background 0.2s ease;
}
input:checked ~ .ch-switch__track {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
input:checked ~ .ch-switch__track .ch-switch__thumb,
.ch-switch input:checked ~ .ch-switch__track .ch-switch__thumb {
  transform: translateX(20rem);
  background: var(--color-white);
}
/* ----- Recipient + promo banner ------------------------------------------ */
.recipient {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rem;
  align-items: stretch;
}
.recipient__card {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 24rem;
  background: #f1f2f4;
  border-radius: 12rem;
}
.recipient__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
}
.recipient__person {
  display: flex;
  align-items: center;
  gap: 16rem;
  min-width: 0;
}
.recipient__avatar {
  width: 56rem;
  height: 56rem;
  border-radius: 32rem;
  background: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 24rem;
  font-weight: 400;
  flex-shrink: 0;
}
.recipient__name {
  font-size: 20rem;
  line-height: 1.3;
  color: var(--color-dark);
  font-weight: 400;
}
.recipient__divider {
  height: 1px;
  width: 100%;
  background: rgba(26, 26, 26, 0.12);
}
.recipient__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8rem 16rem;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.16;
  color: var(--color-dark);
}
.recipient__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
}
.recipient__meta-label {
  opacity: 0.56;
}
.recipient__meta-sep {
  width: 1px;
  height: 14rem;
  background: rgba(26, 26, 26, 0.12);
}
.recipient__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.recipient__edit svg {
  width: 18rem;
  height: 18rem;
}
.recipient__edit:hover {
  color: var(--color-accent);
}
.ch-promo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22rem 24rem;
  background: var(--color-accent);
  border-radius: 12rem;
  color: var(--color-white);
  overflow: hidden;
  gap: 12rem;
}
.ch-promo__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.ch-promo__heading {
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
}
.ch-promo__caption {
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 400;
}
.ch-promo__value {
  position: relative;
  z-index: 1;
  font-size: 93rem;
  line-height: 1.16;
  font-weight: 400;
  white-space: nowrap;
}
/* ----- Generic option row (delivery method, payment method) -------------- */
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rem;
}
.option {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48rem;
  padding: 24rem;
  background: #f1f2f4;
  border: 1px solid transparent;
  border-radius: 12rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 148rem;
}
.option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
}
.option__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
}
.option__head {
  display: flex;
  align-items: center;
  gap: 16rem;
  min-width: 0;
}
.option__radio {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 26, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.option__radio span {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
input:checked ~ .option__top .option__radio span {
  opacity: 1;
}
input:checked ~ .option__top .option__radio {
  border-color: var(--color-accent);
}
.option__title {
  font-size: 20rem;
  line-height: 1.3;
  color: var(--color-dark);
  font-weight: 400;
}
.option__caption {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.56;
  font-weight: 500;
}
.option__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 12rem;
  border-radius: 8rem;
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  color: var(--color-dark);
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  white-space: nowrap;
}
.option__price--plain {
  border-color: transparent;
}
.option--selected {
  border-color: var(--color-accent);
}
.option--selected .option__radio {
  border-color: var(--color-accent);
}
.option--selected .option__radio span {
  opacity: 1;
}
/* ----- Delivery block: map (left) + addresses/date stacked (right) -------- */
/* Per layout brief: map on the LEFT spanning the full height of the two      */
/* right-side blocks (Адреса доставки + Дата доставки) combined.              */
.delivery-block {
  display: grid;
  grid-template-columns: 533rem 1fr;
  gap: 24rem;
  align-items: stretch;
}
.delivery-block__map {
  position: relative;
  border-radius: 12rem;
  overflow: hidden;
  background: #eef0f2;
  min-height: 100%;
}
.delivery-block__map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.delivery-block__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 46rem;
  height: 60rem;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 6rem 12rem rgba(26, 26, 26, 0.25));
}
.delivery-block__pin svg {
  width: 100%;
  height: 100%;
}
.delivery-block__content {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  min-width: 0;
}
.delivery-block__group {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.delivery-block__divider {
  height: 1px;
  width: 100%;
  background: rgba(26, 26, 26, 0.12);
}
.addresses {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.addresses__actions {
  display: flex;
  align-items: stretch;
  gap: 12rem;
}
.addresses__add {
  flex: 1;
  padding: 16rem 32rem;
  font-size: 18rem;
  border-radius: 12rem;
}
.addresses__more {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding: 16rem 32rem;
  border-radius: 12rem;
  border: none;
  background: rgba(244, 169, 0, 0.4);
  color: var(--color-dark);
  font-size: 18rem;
  line-height: 1.16;
  cursor: pointer;
  transition: background 0.2s ease;
}
.addresses__more:hover {
  background: rgba(244, 169, 0, 0.55);
}
.address-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rem;
  list-style: none;
}
/* In-page short address card (.addr-card, distinct from account-addresses) */
.addr-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12rem;
  padding: 16rem;
  background: #f1f2f4;
  border: 1px solid transparent;
  border-radius: 12rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.addr-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
}
.addr-card__radio {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 26, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.addr-card__radio span {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
input:checked ~ .addr-card__radio span {
  opacity: 1;
}
input:checked ~ .addr-card__radio {
  border-color: var(--color-accent);
}
.addr-card__body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}
.addr-card__title {
  font-size: 16rem;
  line-height: 1.3;
  color: var(--color-dark);
}
.addr-card__sub {
  font-size: 14rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.64;
}
.addr-card--selected {
  background: #f1f2f4;
  border-color: var(--color-accent);
}
/* ----- Date pills -------------------------------------------------------- */
.date-field {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.date-field__label {
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.56;
}
.date-pills {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8rem;
}
.date-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
  padding: 12rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.date-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
}
.date-pill__date {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  font-weight: 500;
  white-space: nowrap;
}
.date-pill__weekday {
  font-size: 12rem;
  line-height: 1.4;
  color: var(--color-dark);
  font-weight: 600;
  opacity: 0.56;
}
.date-pill--selected, .date-pill:has(input:checked) {
  border-color: var(--color-accent);
}
/* ----- Comment field ----------------------------------------------------- */
.comment-field {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.comment-field__label {
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.56;
}
.comment-field__input {
  width: 100%;
  padding: 16rem;
  border-radius: 8rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  background: var(--color-white);
  resize: vertical;
  min-height: 99rem;
  transition: border-color 0.2s ease;
}
.comment-field__input::placeholder {
  color: var(--color-dark);
  opacity: 0.48;
}
.comment-field__input:focus {
  outline: none;
  border-color: var(--color-accent);
}
/* ----- Order summary checkout overrides ---------------------------------- */
.order-summary--checkout {
  background: #f1f2f4;
  gap: 24rem;
}
.order-summary--checkout .order-summary__count {
  font-size: 18rem;
  opacity: 0.64;
  color: var(--color-dark);
}
.order-summary--checkout .order-summary__rows {
  gap: 12rem;
}
.order-summary--checkout .order-summary__row {
  font-size: 16rem;
}
.order-summary--checkout .order-summary__row dt {
  opacity: 0.64;
  color: var(--color-dark);
}
.order-summary--checkout .order-summary__row dd {
  font-weight: 500;
  opacity: 0.88;
}
.order-summary--checkout .order-summary__value--negative {
  opacity: 0.88;
  color: var(--color-dark);
}
.order-summary--checkout .order-summary__total-value {
  font-size: 24rem;
}
.order-summary--checkout .order-summary__total-old {
  font-size: 20rem;
}
.order-summary--checkout .order-summary__sep {
  height: 1px;
  width: 100%;
  background: rgba(26, 26, 26, 0.12);
}
.order-summary--checkout .checkout-agree {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
  cursor: pointer;
}
.order-summary--checkout .checkout-agree .checkbox__box {
  width: 14rem;
  height: 14rem;
  border-radius: 4rem;
  background: rgba(26, 26, 26, 0.06);
  border-color: rgba(26, 26, 26, 0.24);
  margin-top: 1rem;
}
.order-summary--checkout .checkout-agree .checkbox__box svg {
  width: 10rem;
  height: 10rem;
}
.order-summary--checkout .checkout-agree .checkbox__label {
  font-size: 12rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.84;
}
.order-summary--checkout .order-summary__cta {
  padding: 20rem 24rem;
  margin-top: 0;
}
.order-summary--checkout .order-summary__cta:disabled,
.order-summary--checkout .order-summary__cta.is-disabled {
  background: rgba(26, 26, 26, 0.4);
  color: var(--color-white);
  cursor: not-allowed;
}
.order-summary--checkout .order-summary__cta:disabled:hover,
.order-summary--checkout .order-summary__cta.is-disabled:hover {
  background: rgba(26, 26, 26, 0.4);
  transform: none;
}
/* ====================================================================== */
/* Modals (Fancybox content). Wrapper class `.ch-modal` overrides         */
/* Fancybox default styles where needed.                                  */
/* ====================================================================== */
.ch-modal {
  background: var(--color-white);
  border-radius: 20rem;
  padding: 0;
  max-width: 720rem;
  width: 100%;
}
.ch-modal__inner {
  padding: 32rem;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
.ch-modal__inner--narrow {
  padding: 40rem 48rem;
  align-items: center;
  gap: 20rem;
}
.ch-modal__header {
  display: grid;
  grid-template-columns: 56rem 1fr;
  gap: 16rem;
  align-items: center;
}
.ch-modal__avatar {
  width: 56rem;
  height: 56rem;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  font-size: 20rem;
  font-weight: 500;
}
.ch-modal__header-text {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.ch-modal__title {
  font-size: 24rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark);
}
.ch-modal__title--center {
  text-align: center;
}
.ch-modal__subtitle {
  font-size: 14rem;
  color: rgba(26, 26, 26, 0.64);
}
.ch-modal__subtitle strong {
  color: var(--color-dark);
  font-weight: 500;
}
.ch-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56rem;
  height: 56rem;
}
.ch-modal__icon svg {
  width: 100%;
  height: 100%;
}
.ch-modal__success-text {
  font-size: 20rem;
  line-height: 1.3;
  color: var(--color-dark);
  text-align: center;
  font-weight: 400;
}
.ch-modal__add {
  margin-top: 8rem;
  width: 100%;
}
.ch-modal__text {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  font-size: 14rem;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.8);
}
.ch-modal__cta {
  align-self: stretch;
  width: 100%;
}
.ch-modal {
  /* ---------- Modal variants ------------------------------------------ */
}
.ch-modal--list {
  max-width: 480rem;
}
.ch-modal--addr {
  max-width: 619rem;
}
.ch-modal--form {
  max-width: 640rem;
}
.ch-modal--success {
  max-width: 360rem;
}
.ch-modal--pickup {
  max-width: 1146rem;
}
.ch-modal--text {
  max-width: 600rem;
}
/* Override Fancybox container for our modals */
.fancybox__content > .ch-modal {
  padding: 0 !important;
}
.fancybox__content {
  --fancybox-bg: rgba(26, 26, 26, 0.55);
  padding: 0;
  border-radius: 20rem;
  background: transparent;
}
/* Address selection modal (Figma 628:71881) ----------------------------- */
.ch-addr-modal {
  gap: 32rem;
  align-items: center;
}
.ch-addr-modal__title {
  font-size: 32rem;
}
.ch-addr-modal {
  /* Accent CTA — text left, plus icon right (full width) */
}
.ch-addr-modal__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  width: 100%;
  padding: 16rem 32rem;
  border: none;
  border-radius: 12rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ch-addr-modal__add svg {
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
}
.ch-addr-modal__add:hover {
  background: #e09e00;
}
/* Address list inside modal — scrollable, ~4 visible rows */
.ch-address-list {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  list-style: none;
  width: 100%;
  max-height: 311rem;
  overflow-y: auto;
  padding-right: 8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 26, 0.24) transparent;
}
.ch-address-list::-webkit-scrollbar {
  width: 4rem;
}
.ch-address-list::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, 0.24);
  border-radius: 40rem;
}
.ch-address-list::-webkit-scrollbar-track {
  background: transparent;
}
.ch-address-row {
  position: relative;
  display: flex;
  gap: 12rem;
  align-items: center;
  padding: 16rem;
  background: #f1f2f4;
  border: 1px solid transparent;
  border-radius: 12rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ch-address-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
}
.ch-address-row__radio {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 26, 0.32);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.ch-address-row__radio span {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
input:checked ~ .ch-address-row__radio span {
  opacity: 1;
}
input:checked ~ .ch-address-row__radio {
  border-color: var(--color-accent);
}
.ch-address-row__body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}
.ch-address-row__title {
  font-size: 16rem;
  line-height: 1.3;
  color: #29292c;
}
.ch-address-row__sub {
  font-size: 14rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.64;
}
.ch-address-row--selected {
  border-color: var(--color-accent);
}
/* Form inside modal */
.ch-form {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.ch-form__row {
  display: grid;
  gap: 12rem;
}
.ch-form__row--2 {
  grid-template-columns: 1fr 1fr;
}
.ch-form__row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.ch-form__actions {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 8rem;
}
.ch-form__submit, .ch-form__cancel {
  width: 100%;
  padding: 14rem 24rem;
  font-size: 16rem;
}
.ch-field {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  min-width: 0;
}
.ch-field__label {
  font-size: 12rem;
  color: rgba(26, 26, 26, 0.56);
}
.ch-field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 12rem 14rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 10rem;
  transition: border-color 0.2s ease;
}
.ch-field__control:focus-within {
  border-color: var(--color-accent);
}
.ch-field__control input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  color: var(--color-dark);
  padding: 0;
}
.ch-field__control input::placeholder {
  color: rgba(26, 26, 26, 0.4);
}
.ch-field__icon {
  width: 20rem;
  height: 20rem;
  color: rgba(26, 26, 26, 0.48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.ch-field__icon svg {
  width: 18rem;
  height: 18rem;
}
.ch-field__icon:hover {
  color: var(--color-accent);
}
/* Pickup point selection modal (Figma 628:73038) ------------------------ */
.ch-pickup-modal {
  gap: 32rem;
  /* Match Figma panel proportions; let it shrink on small screens */
  height: 806rem;
  max-height: 86vh;
}
.ch-pickup-modal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16rem;
}
.ch-pickup-modal__title {
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
}
.ch-pickup-modal__count {
  font-size: 16rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.56);
  white-space: nowrap;
}
.ch-pickup-modal__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 423rem 1fr;
  gap: 20rem;
  align-items: stretch;
}
.ch-pickup-modal__side {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  min-width: 0;
  min-height: 0;
}
.ch-pickup-modal {
  /* Plain photo instead of an interactive map */
}
.ch-pickup-modal__map {
  position: relative;
  min-width: 0;
  border-radius: 12rem;
  overflow: hidden;
  background: #eef0f2;
}
.ch-pickup-modal__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
/* Search field (grey, rounded-8) */
.ch-pickup-search {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 12rem;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 8rem;
  cursor: text;
}
.ch-pickup-search__icon {
  width: 20rem;
  height: 20rem;
  color: var(--color-dark);
  opacity: 0.48;
  flex-shrink: 0;
}
.ch-pickup-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.ch-pickup-search input::placeholder {
  color: var(--color-dark);
  opacity: 0.48;
}
.ch-pickup-list {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 26, 0.24) transparent;
}
.ch-pickup-list::-webkit-scrollbar {
  width: 4rem;
}
.ch-pickup-list::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, 0.24);
  border-radius: 40rem;
}
.ch-pickup-list::-webkit-scrollbar-track {
  background: transparent;
}
.ch-pickup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 16rem;
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: 8rem;
}
.ch-pickup-card__head {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.ch-pickup-card__title {
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-dark);
}
.ch-pickup-card__address {
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.56;
}
.ch-pickup-card__divider {
  height: 1px;
  width: 100%;
  background: rgba(26, 26, 26, 0.12);
}
.ch-pickup-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.ch-pickup-card__row {
  display: flex;
  align-items: center;
  gap: 8rem;
  font-family: "Inter", sans-serif;
  font-size: 12rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.ch-pickup-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.ch-pickup-card__icon svg {
  width: 100%;
  height: 100%;
}
.ch-pickup-card {
  /* "Выбрать" link with chevron */
}
.ch-pickup-card__select {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-dark);
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ch-pickup-card__select svg {
  width: 16rem;
  height: 16rem;
  flex-shrink: 0;
}
.ch-pickup-card__select:hover {
  color: var(--color-accent);
}
.ch-pickup-card {
  /* "Выбран" indicator (selected card) */
}
.ch-pickup-card__chosen {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4rem;
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-white);
}
.ch-pickup-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: var(--color-white);
  flex-shrink: 0;
}
.ch-pickup-card {
  /* Selected = accent fill, white text */
}
.ch-pickup-card--selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.ch-pickup-card--selected .ch-pickup-card__address {
  opacity: 1;
  color: #fff;
}
.ch-pickup-card--selected .ch-pickup-card__row {
  color: var(--color-white);
}
.ch-pickup-card--selected .ch-pickup-card__icon {
  color: var(--color-white);
}
.ch-pickup-card--selected .ch-pickup-card__divider {
  background: rgba(255, 255, 255, 0.24);
}
.ch-pickup-card--selected .ch-pickup-card__title {
  font-weight: 500;
  color: #fff;
}
.ch-pickup-card {
  /* Unselected expanded card = accent outline */
}
.ch-pickup-card--active {
  border-color: var(--color-accent);
}
.ch-pickup-card {
  /* Plain cards = subtle outline */
}
.ch-pickup-card--bordered {
  border-color: rgba(26, 26, 26, 0.12);
}
.ch-pickup-card {
  /* Collapsed cards: title + address only */
}
.ch-pickup-card--collapsed {
  gap: 0;
}
/* ====================================================================== */
/* Responsive                                                              */
/* ====================================================================== */
@media (max-width: 1279px) {
  .page-checkout .checkout {
    grid-template-columns: 1fr 380rem;
  }
  .delivery-block {
    grid-template-columns: 420rem 1fr;
  }
  .ch-modal--pickup {
    max-width: 92vw;
  }
  .ch-pickup-modal__body {
    grid-template-columns: 380rem 1fr;
  }
}
@media (max-width: 1023px) {
  .page-checkout .checkout {
    grid-template-columns: 1fr;
    gap: 20rem;
  }
  .page-checkout .checkout__main {
    gap: 20rem;
  }
  .checkout-section {
    padding: 24rem;
    gap: 20rem;
  }
  .recipient {
    grid-template-columns: 1fr;
  }
  .option-grid {
    grid-template-columns: 1fr;
  }
  .option {
    min-height: 0;
    gap: 24rem;
  }
  .delivery-block {
    grid-template-columns: 1fr;
    gap: 20rem;
  }
  .delivery-block__map {
    grid-row: auto;
    min-height: 280rem;
    order: 2;
  }
  .delivery-block__content {
    order: 1;
  }
  .address-list {
    grid-template-columns: 1fr 1fr;
  }
  .date-pills {
    grid-template-columns: repeat(5, 1fr);
  }
  .ch-pickup-modal {
    height: auto;
    max-height: 86vh;
  }
  .ch-pickup-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16rem;
  }
  .ch-pickup-modal__map {
    min-height: 280rem;
    order: 2;
  }
  .ch-pickup-modal__side {
    order: 1;
  }
  .ch-pickup-list {
    max-height: 320rem;
  }
  .ch-form__row--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 599px) {
  .page-checkout {
    padding-bottom: 56rem;
  }
  .checkout-section {
    padding: 20rem;
  }
  .checkout-section__title {
    font-size: 22rem;
  }
  .checkout-section__header {
    gap: 12rem;
  }
  .recipient__avatar {
    width: 44rem;
    height: 44rem;
    font-size: 18rem;
  }
  .recipient__name {
    font-size: 18rem;
  }
  .recipient__card {
    padding: 16rem;
  }
  .recipient__meta-sep {
    display: none;
  }
  .recipient__meta {
    gap: 8rem 12rem;
  }
  .ch-promo {
    padding: 18rem;
  }
  .ch-promo__value {
    font-size: 56rem;
  }
  .ch-promo__heading {
    font-size: 18rem;
  }
  .ch-promo__caption {
    font-size: 12rem;
  }
  .option {
    padding: 18rem;
    gap: 20rem;
  }
  .option__title {
    font-size: 18rem;
  }
  .option__caption {
    font-size: 14rem;
  }
  .address-list {
    grid-template-columns: 1fr;
  }
  .date-pills {
    grid-template-columns: repeat(3, 1fr);
  }
  .ch-switch__label {
    display: none;
  }
  .ch-modal__inner {
    padding: 24rem;
    gap: 16rem;
  }
  .ch-modal__inner--narrow {
    padding: 32rem 24rem;
  }
  .ch-modal__title {
    font-size: 20rem;
  }
  .ch-addr-modal {
    gap: 24rem;
  }
  .ch-addr-modal__title {
    font-size: 24rem;
  }
  .ch-pickup-modal {
    gap: 24rem;
  }
  .ch-pickup-modal__title {
    font-size: 22rem;
  }
  .ch-pickup-modal__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }
  .ch-form__row--3 {
    grid-template-columns: 1fr;
  }
  .ch-form__row--2 {
    grid-template-columns: 1fr;
  }
  .addresses__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .addresses__add, .addresses__more {
    width: 100%;
    justify-content: center;
  }
  .order-summary--checkout .order-summary__row {
    font-size: 12rem;
  }
  .order-summary__total_checkout {
    padding-bottom: 30rem !important;
  }
}
.page-checkout-success .success__group {
  margin-top: 64rem;
}
.btn--outline {
  border: 1px solid var(--Yellow, #F4A900);
}
/* ====================================================================== */
/* Checkout — pickup variant.                                              */
/* Inherits common rules from _checkout.scss; adds the pickup section,     */
/* the "another person" recipient fields, and a reusable input group.      */
/* ====================================================================== */
/* ---------- Reusable labelled input / textarea (Figma "Imput") --------- */
.ch-input {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}
.ch-input__label {
  font-size: 12rem;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.72);
}
.ch-input input,
.ch-input textarea {
  width: 100%;
  padding: 16rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  background: var(--color-white);
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  transition: border-color 0.2s ease;
}
.ch-input input::placeholder,
.ch-input textarea::placeholder {
  color: rgba(26, 26, 26, 0.48);
  font-weight: 500;
}
.ch-input input:focus,
.ch-input textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.ch-input textarea {
  resize: vertical;
  min-height: 88rem;
  font-size: 14rem;
}
/* ---------- Recipient: hide the saved card when toggled on ------------- */
/* `_checkout.scss` sets `.recipient__card { display:flex }`, which beats the
   `[hidden]` attribute. This file loads after it, so this scoped rule wins
   and the saved card actually disappears when the JS sets `hidden`. */
.recipient__card[hidden] {
  display: none !important;
}
/* ---------- Recipient: "another person" fields ------------------------- */
.recipient-fields {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.recipient-fields[hidden] {
  display: none;
}
.recipient-fields__row {
  display: grid;
  gap: 12rem;
}
.recipient-fields__row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.recipient-fields__row--2 {
  grid-template-columns: repeat(2, 1fr);
}
/* When the "another person" switch is on: stack the recipient block —
   the input fields take the full width on top, the promo banner sits
   below at roughly half width (matches Figma node 628:73605). */
.page-checkout--pickup [data-recipient]:has([data-recipient-toggle]:checked) .recipient {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  align-items: stretch;
}
.page-checkout--pickup [data-recipient]:has([data-recipient-toggle]:checked) .ch-promo {
  width: 568rem;
  max-width: 100%;
}
/* ---------- Pickup point + map ----------------------------------------- */
.pickup {
  display: grid;
  grid-template-columns: 1fr 698rem;
  gap: 24rem;
  align-items: stretch;
}
.pickup__panel {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  min-width: 0;
}
.pickup__label {
  font-size: 16rem;
  line-height: 1.3;
  color: var(--color-dark);
}
.pickup {
  /* Grey info card */
}
.pickup__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  padding: 16rem;
  background: var(--color-gray, #f1f2f4);
  border-radius: 12rem;
}
.pickup__address {
  font-size: 14rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
}
.pickup__ready {
  font-size: 16rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.56);
}
.pickup__details {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  list-style: none;
  width: 100%;
}
.pickup__details li {
  display: flex;
  align-items: center;
  gap: 8rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.pickup__details-icon {
  display: inline-flex;
  width: 16rem;
  height: 16rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.pickup__details-icon svg {
  width: 100%;
  height: 100%;
}
.pickup {
  /* Accent "Изменить магазин" button (inside the grey card) */
}
.pickup__change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  align-self: flex-start;
  padding: 16rem 20rem;
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  border-radius: 12rem;
}
.pickup__change svg {
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
}
.pickup__comment {
  margin-top: 0;
}
.pickup {
  /* Plain photo instead of an interactive map */
}
.pickup__map {
  position: relative;
  border-radius: 12rem;
  overflow: hidden;
  background: var(--color-gray, #f1f2f4);
  min-height: 100%;
}
.pickup__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1023px) {
  .pickup {
    grid-template-columns: 1fr;
  }
  .pickup__map {
    min-height: 260rem;
  }
  .pickup__map img {
    min-height: 260rem;
  }
  .page-checkout--pickup [data-recipient]:has([data-recipient-toggle]:checked) .ch-promo {
    width: 100%;
  }
}
@media (max-width: 599px) {
  .recipient-fields {
    gap: 16rem;
  }
  .recipient-fields__row--3, .recipient-fields__row--2 {
    grid-template-columns: 1fr;
  }
  .pickup__change {
    width: 100%;
  }
  .pickup__map {
    min-height: 220rem;
  }
  .pickup__map img {
    min-height: 220rem;
  }
}
/* ====================================================================== */
/* Checkout — success state            Figma node 639:63852                 */
/* ====================================================================== */
.page-checkout-success {
  padding-bottom: 80rem;
}
.page-checkout-success .success {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24rem;
}
.page-checkout-success .success__main {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  width: 1358rem;
  min-width: 0;
}
.page-checkout-success {
  /* group = [content] + [actions], 24rem apart */
}
.page-checkout-success .success__group {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  align-items: flex-start;
}
.page-checkout-success {
  /* content = [intro] + [body], 32rem apart */
}
.page-checkout-success .success__content {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  width: 100%;
}
.page-checkout-success {
  /* intro = [head] + [lead], 24rem apart */
}
.page-checkout-success .success__intro {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  width: 660rem;
  max-width: 100%;
}
.page-checkout-success .success__head {
  display: flex;
  align-items: center;
  gap: 24rem;
}
.page-checkout-success .success__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 64rem;
  height: 64rem;
}
.page-checkout-success .success__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.page-checkout-success .success__title {
  font-size: 48rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
}
.page-checkout-success .success__lead {
  font-size: 20rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}
.page-checkout-success .success__order {
  color: var(--color-accent);
}
.page-checkout-success .success__body {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-checkout-success .success__body p {
  margin: 0;
}
.page-checkout-success .success__body-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-checkout-success .success__actions {
  display: flex;
  align-items: center;
  gap: 12rem;
  flex-wrap: wrap;
}
.page-checkout-success {
  /* Buttons — 61rem tall, 18rem Suisse-style label */
}
.page-checkout-success .success__btn {
  height: 61rem;
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  border-radius: 12rem;
  white-space: nowrap;
}
.page-checkout-success .success__btn.btn--primary {
  padding: 20rem 24rem;
  color: var(--color-white);
}
.page-checkout-success .success__btn.btn--outline {
  padding: 16rem 32rem;
  color: var(--color-dark);
}
.page-checkout-success .success__divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  margin: 0;
}
.page-checkout-success .success__signoff {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  color: var(--color-dark);
}
.page-checkout-success .success__signoff-title {
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
}
.page-checkout-success .success__signoff-body {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  font-size: 16rem;
  line-height: 1.4;
  opacity: 0.88;
}
.page-checkout-success .success__signoff-body p {
  margin: 0;
}
.page-checkout-success {
  /* ---- Order summary (Figma 639:63989) -------------------------------- */
}
.page-checkout-success .order-summary--success {
  position: static;
  top: auto;
  width: 442rem;
  flex-shrink: 0;
  background: #f1f2f4;
  border-radius: 16rem;
  padding: 24rem;
  gap: 24rem;
}
.page-checkout-success .order-summary--success .order-summary__head {
  align-items: baseline;
}
.page-checkout-success .order-summary--success .order-summary__title {
  font-size: 20rem;
  font-weight: 400;
  line-height: 1.16;
}
.page-checkout-success .order-summary--success .order-summary__count {
  font-size: 18rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.64;
}
.page-checkout-success .order-summary--success .order-summary__line {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  margin: 0;
}
.page-checkout-success .order-summary--success .order-summary__rows {
  gap: 12rem;
  padding-top: 0;
  border-top: none;
}
.page-checkout-success .order-summary--success .order-summary__row {
  font-size: 16rem;
  line-height: 1.4;
}
.page-checkout-success .order-summary--success .order-summary__row dt {
  color: var(--color-dark);
  opacity: 0.64;
  font-weight: 400;
}
.page-checkout-success .order-summary--success .order-summary__row dd {
  color: var(--color-dark);
  opacity: 0.88;
  font-weight: 500;
}
.page-checkout-success .order-summary--success .order-summary__total {
  align-items: center;
  padding-top: 0;
  border-top: none;
}
.page-checkout-success .order-summary--success .order-summary__total-label {
  font-size: 24rem;
  font-weight: 400;
  line-height: 1.16;
}
.page-checkout-success .order-summary--success .order-summary__total-value {
  gap: 12rem;
  font-size: 24rem;
  font-weight: 400;
  line-height: 1.16;
}
.page-checkout-success .order-summary--success .order-summary__total-old {
  font-size: 20rem;
  opacity: 0.4;
  color: var(--color-dark);
}
/* ---- Tablet ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .page-checkout-success .success {
    flex-direction: column;
    gap: 24rem;
  }
  .page-checkout-success .success__main {
    width: 100%;
  }
  .page-checkout-success .success__intro {
    width: 100%;
  }
  .page-checkout-success .order-summary--success {
    width: 100%;
  }
  .page-checkout-success .success__title {
    font-size: 36rem;
  }
  .page-checkout-success .success__signoff-title {
    font-size: 28rem;
  }
  .page-checkout-success .success__lead {
    font-size: 18rem;
  }
}
/* ---- Mobile ----------------------------------------------------------- */
@media (max-width: 599px) {
  .page-checkout-success {
    padding-bottom: 64rem;
  }
  .page-checkout-success .success__head {
    align-items: center;
    gap: 16rem;
  }
  .page-checkout-success .success__icon {
    width: 56rem;
    height: 56rem;
  }
  .page-checkout-success .success__title {
    font-size: 28rem;
  }
  .page-checkout-success .success__lead {
    font-size: 16rem;
  }
  .page-checkout-success .success__signoff-title {
    font-size: 24rem;
  }
  .page-checkout-success .success__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .page-checkout-success .success__actions .success__btn {
    width: 100%;
  }
  .page-checkout-success .order-summary__row {
    font-size: 12rem !important;
  }
  .page-checkout-success .order-summary--success .order-summary__title {
    font-size: 16rem;
  }
  .page-checkout-success .order-summary--success .order-summary__total-value {
    font-size: 20rem;
  }
}
/* =================================================================
   Shared light-header variant + account section layout
   ================================================================= */
.site-header--light {
  color: var(--color-dark);
}
.site-header--light a, .site-header--light .site-header__nav-link, .site-header--light .site-header__icon, .site-header--light .site-header__contact, .site-header--light .site-header__logo {
  color: var(--color-dark);
}
.site-header--light .site-header__icon svg [stroke=white] {
  stroke: var(--color-dark);
}
.site-header--light .site-header__icon svg [fill=white] {
  fill: var(--color-dark);
}
.site-header--light .site-header__social {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.site-header--light .site-header__social svg [fill=white] {
  fill: var(--color-dark);
}
.site-header--light .site-header__social svg [stroke=white] {
  stroke: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__social:hover svg [fill=white] {
  fill: var(--color-white);
}
.site-header--light .site-header__social:hover svg [stroke=white] {
  stroke: var(--color-white);
}
.site-header--light .site-header__divider {
  background: rgba(0, 0, 0, 0.16);
}
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
/* Header takes ~100px height; figma puts breadcrumbs at top 132 (a small gap below header) */
.page-account,
.page-account-history,
.page-account-order {
  padding-top: 16rem; /* small breathing space — main inner padding handles the rest */
  background: var(--color-white);
}
/* Footer "light" variant: still dark background, just here to round corners differently if needed */
.site-footer--light {
  margin-top: 0;
}
/* =================================================================
   Account page (dashboard) — generic shell
   ================================================================= */
.page-account__inner {
  padding: 8rem 48rem 80rem;
  display: flex;
  flex-direction: column;
}
.page-account__breadcrumbs {
  font-size: 14rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 32rem;
  padding-top: 10rem;
  color: var(--color-dark);
}
.page-account__breadcrumbs a {
  color: rgba(26, 26, 26, 0.32);
  transition: color 0.2s ease;
}
.page-account__breadcrumbs a:hover {
  color: var(--color-dark);
}
.page-account__breadcrumbs span {
  color: var(--color-dark);
}
.page-account__divider {
  height: 1px;
  background: rgba(26, 26, 26, 0.08);
}
.page-account__layout {
  display: grid;
  grid-template-columns: 447rem 1fr;
  gap: 48rem;
  align-items: stretch;
  /* Vertical divider between sidebar and content */
  position: relative;
}
.page-account__layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 447rem;
  width: 1px;
  min-height: 80vh;
  background: rgba(26, 26, 26, 0.08);
  margin-left: 24rem;
  pointer-events: none;
}
/* =================================================================
   Account sidebar (shared by all account pages)
   ================================================================= */
.account-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  align-self: flex-start;
  /* Stay in view while the (taller) content column scrolls. The header is
     position:absolute and scrolls away, so a small top offset is enough. */
  position: sticky;
  top: 24rem;
  padding-top: 32rem;
  /* Default (main page) — orange profile card */
}
.account-sidebar__profile {
  background: var(--color-accent);
  border-radius: 16rem;
  padding: 24rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.account-sidebar__profile:hover {
  transform: translateY(-2rem);
  box-shadow: 0 12rem 32rem -16rem rgba(244, 169, 0, 0.45);
}
.account-sidebar__profile:hover .account-sidebar__profile-action {
  transform: translate(2rem, -2rem);
}
.account-sidebar__profile:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 4rem;
}
.account-sidebar__profile:active {
  transform: translateY(0);
}
.account-sidebar__profile-main {
  display: flex;
  align-items: center;
  gap: 16rem;
  flex: 1;
  min-width: 0;
}
.account-sidebar__avatar {
  width: 56rem;
  height: 56rem;
  border-radius: 32rem;
  background: var(--color-white);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  flex-shrink: 0;
}
.account-sidebar__profile-text {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  color: var(--color-white);
  min-width: 0;
}
.account-sidebar__profile-name {
  font-size: 16rem;
  line-height: 1.3;
  font-weight: 400;
}
.account-sidebar__profile-phone {
  font-size: 14rem;
  line-height: 1.3;
  font-weight: 500;
}
.account-sidebar__profile-action {
  width: 24rem;
  height: 24rem;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.account-sidebar__profile-action svg {
  width: 100%;
  height: 100%;
}
.account-sidebar {
  /* Subpage variant — grey/quiet profile so the active nav link reads as the focus */
}
.account-sidebar--quiet .account-sidebar__profile {
  background: #f1f2f4;
}
.account-sidebar--quiet .account-sidebar__avatar {
  background: var(--color-dark);
  color: var(--color-white);
}
.account-sidebar--quiet .account-sidebar__profile-text {
  color: var(--color-dark);
}
.account-sidebar--quiet .account-sidebar__profile-action {
  color: var(--color-dark);
}
.account-sidebar__nav {
  display: flex;
  flex-direction: column;
}
.account-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
  padding: 24rem 16rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12rem;
  color: var(--color-dark);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.account-sidebar__link:hover {
  background: rgba(244, 169, 0, 0.06);
}
.account-sidebar__link.is-active {
  background: var(--color-accent);
  color: var(--color-white);
  border-bottom-color: transparent;
}
.account-sidebar__link {
  /* Hide bottom border on the link directly above an active link */
}
.account-sidebar__link.is-active + .account-sidebar__link {
  /* purely defensive */
}
.account-sidebar {
  /* Remove last item's bottom border for cleaner look */
}
.account-sidebar__nav li:last-child .account-sidebar__link {
  border-bottom-color: transparent;
}
.account-sidebar__link-content {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  font-size: 16rem;
  line-height: 1.16;
  font-weight: 400;
  color: inherit;
}
.account-sidebar__link-icon {
  width: 24rem;
  height: 24rem;
  display: inline-flex;
  color: inherit;
}
.account-sidebar__link-icon svg {
  width: 100%;
  height: 100%;
}
.account-sidebar__link-chevron {
  width: 24rem;
  height: 24rem;
  display: inline-flex;
  color: inherit;
  opacity: 0.72;
}
.account-sidebar__link-chevron svg {
  width: 100%;
  height: 100%;
}
/* =================================================================
   Main content area (right column on dashboard)
   ================================================================= */
.account-main {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  /* Compensate for the vertical divider in the layout grid */
  padding-left: 24rem;
  padding-top: 32rem;
}
.account-main__header {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.account-main__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
}
.account-main__subtitle {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.account-main__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  align-items: stretch;
}
/* =================================================================
   Account cards (dashboard widgets)
   ================================================================= */
.account-card {
  background: #f1f2f4;
  border-radius: 12rem;
  padding: 24rem;
  min-height: 324rem;
  display: flex;
  flex-direction: column;
  color: var(--color-dark);
}
.account-card--discount {
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  box-shadow: 0 6.887rem 22.288rem rgba(0, 0, 0, 0.02), 0 55rem 178rem rgba(0, 0, 0, 0.04);
  justify-content: space-between;
  gap: 0;
}
.account-card__label {
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--color-dark);
}
.account-card__discount {
  font-size: 127rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: -2rem;
}
.account-card__hint {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
}
.account-card--orders {
  justify-content: space-between;
  gap: 16rem;
}
.account-card__title {
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.account-card__text {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.64;
  margin-top: 8rem;
}
.account-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.account-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  border-radius: 12rem;
  background: var(--color-accent);
  max-width: 274rem;
  color: var(--color-white);
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  transition: background 0.2s ease, transform 0.2s ease;
  align-self: stretch;
}
.account-card__cta:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.account-card__cta i {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.account-card__cta i svg {
  width: 100%;
  height: 100%;
}
.account-card--profile {
  gap: 16rem;
}
.account-card__rule {
  display: block;
  height: 1px;
  background: rgba(26, 26, 26, 0.08);
}
.account-card__details {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  margin: 0;
}
.account-card__row {
  display: flex;
  gap: 12rem;
  align-items: center;
  font-size: 14rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.account-card__row dt {
  opacity: 0.56;
  white-space: nowrap;
}
.account-card__row dd {
  margin: 0;
}
.account-card__row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  line-height: 1.4;
}
.account-card {
  /* Orders card variant – when there are existing orders */
}
.account-card--orders-active {
  gap: 16rem;
}
.account-card--orders-active .account-card__statuses {
  display: flex;
  flex-wrap: wrap;
  padding-top: 16rem;
  padding-bottom: 16rem;
  gap: 7rem;
}
.account-card--orders-active .account-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 12rem;
  border-radius: 50rem;
  font-size: 14rem;
  line-height: 1.16;
  color: var(--color-white);
  white-space: nowrap;
}
.account-card--orders-active .account-card__status--done {
  background: #4faf7a;
}
.account-card--orders-active .account-card__status--cancelled {
  background: #c84d4d;
}
.account-card--orders-active .account-card__status--processing {
  background: #d89b3c;
}
.account-card__text {
  margin-bottom: 16rem;
}
/* =================================================================
   Responsive — Tablet (≤1023px): sidebar collapses to top nav
   ================================================================= */
@media (max-width: 1023px) {
  .page-account,
  .page-account-history,
  .page-account-order {
    padding-top: 0;
  }
  .page-account__inner {
    padding: 24rem 24rem 64rem;
    gap: 24rem;
    min-width: 0;
  }
  .page-account__layout {
    grid-template-columns: 1fr;
    gap: 24rem;
    min-width: 0;
  }
  .page-account__layout::before {
    display: none;
  }
  .account-sidebar {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    /* Becomes a horizontal top nav on tablet — drop the sticky behaviour. */
    position: static;
    top: auto;
  }
  .account-sidebar__profile {
    padding: 20rem;
  }
  .account-sidebar__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8rem;
    padding-bottom: 4rem;
    min-width: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .account-sidebar__nav::-webkit-scrollbar {
    display: none;
  }
  .account-sidebar__link {
    padding: 14rem 18rem;
    border-bottom: none;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 12rem;
    flex-shrink: 0;
    gap: 8rem;
    white-space: nowrap;
  }
  .account-sidebar__link-chevron {
    display: none;
  }
  .account-sidebar__nav li:last-child .account-sidebar__link {
    border-bottom-color: rgba(26, 26, 26, 0.08);
  }
  .account-main,
  .account-content {
    min-width: 0;
    padding-left: 0;
  }
  .account-main > *,
  .account-content > * {
    min-width: 0;
    max-width: 100%;
  }
  .account-main__title {
    font-size: 36rem;
  }
  .account-main__cards {
    grid-template-columns: 1fr 1fr;
    gap: 16rem;
  }
  .account-card__discount {
    font-size: 96rem;
  }
}
@media (max-width: 599px) {
  .page-account,
  .page-account-history,
  .page-account-order {
    padding-top: 0;
  }
  .page-account__inner {
    padding: 20rem 20rem 48rem;
    gap: 20rem;
  }
  .account-sidebar__profile {
    padding: 16rem;
    gap: 12rem;
  }
  .account-sidebar__avatar {
    width: 44rem;
    height: 44rem;
    font-size: 18rem;
  }
  .account-sidebar__profile-name {
    font-size: 14rem;
  }
  .account-sidebar__profile-phone {
    font-size: 12rem;
  }
  .account-sidebar__link {
    padding: 12rem 14rem;
  }
  .account-sidebar__link-content {
    font-size: 14rem;
    gap: 6rem;
  }
  .account-main {
    gap: 24rem;
  }
  .account-main__title {
    font-size: 28rem;
  }
  .account-main__subtitle {
    font-size: 14rem;
  }
  .account-main__cards {
    grid-template-columns: 1fr;
    gap: 12rem;
  }
  .account-card {
    min-height: auto;
    padding: 20rem;
  }
  .account-card__title {
    font-size: 20rem;
  }
  .account-card__discount {
    font-size: 88rem;
  }
  .account-card__cta {
    padding: 14rem 22rem;
    font-size: 16rem;
  }
}
/* =================================================================
   Account dashboard – orders-active variant
   Most styles are inherited from _account.scss
   (.account-card--orders-active modifier defined there).
   This partial only holds anything page-specific.
   ================================================================= */
/* No extra rules currently needed — placeholder so the import is valid */
.page-account-orders {
  /* alias hook if a future page wrapper class is added */
}
/* =================================================================
   Account – orders history page
   ================================================================= */
.orders-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.orders-history__filters {
  display: flex;
  align-items: center;
  gap: 24rem;
  flex-wrap: wrap;
}
.orders-history__selects {
  display: flex;
  align-items: center;
  gap: 8rem;
  flex-wrap: wrap;
}
.orders-history__reset {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-dark);
  font-size: 16rem;
  line-height: 1.16;
  text-decoration: underline;
  text-underline-offset: 3rem;
  opacity: 0.88;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.orders-history__reset:hover {
  opacity: 0.6;
}
.orders-history__reset.is-visible {
  display: inline-flex;
}
.orders-history__list {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.orders-history__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
  padding-top: 8rem;
}
.orders-history__more {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  padding: 12rem 18rem;
  background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
  color: var(--color-dark);
  font-size: 14rem;
  font-weight: 400;
  line-height: 1.16;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.orders-history__more:hover {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.32);
}
.orders-history__more i {
  width: 20rem;
  height: 20rem;
  display: inline-flex;
}
.orders-history__more i svg {
  width: 100%;
  height: 100%;
}
/* =================================================================
   Custom select (replaces native <select>) — matches Figma 561:49017
   ================================================================= */
.custom-select {
  position: relative;
  user-select: none;
}
.custom-select__head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding: 12rem 16rem;
  background: #F1F2F4;
  border: 1px solid transparent;
  border-radius: 8rem;
  color: var(--color-dark);
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.custom-select__label {
  display: inline-block;
  white-space: nowrap;
  opacity: 0.88;
}
.custom-select__chevron {
  display: inline-flex;
  width: 20rem;
  height: 20rem;
  transition: transform 0.25s ease;
}
.custom-select__chevron svg {
  width: 100%;
  height: 100%;
}
.custom-select {
  /* A value has been chosen (panel closed): white fill, accent outline */
}
.custom-select.has-value:not(.is-open) .custom-select__head {
  background: var(--color-white);
  border-color: var(--color-accent);
}
.custom-select.has-value:not(.is-open) .custom-select__label {
  opacity: 1;
}
.custom-select {
  /* Panel open: solid accent fill, white label, chevron flipped */
}
.custom-select.is-open .custom-select__head {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.custom-select.is-open .custom-select__label {
  opacity: 1;
}
.custom-select.is-open .custom-select__chevron {
  transform: rotate(180deg);
}
.custom-select.is-open .custom-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.custom-select__list {
  position: absolute;
  top: calc(100% + 8rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 12rem;
  padding: 24rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  box-shadow: 0 55rem 89rem rgba(0, 0, 0, 0.08), 0 6.9rem 11.1rem rgba(0, 0, 0, 0.04);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.custom-select__option {
  display: flex;
  align-items: center;
  gap: 16rem;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.custom-select__option:hover {
  color: var(--color-accent);
}
.custom-select__option .custom-select__radio {
  position: relative;
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(26, 26, 26, 0.32);
  border-radius: 50%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.custom-select__option.is-selected {
  color: var(--color-accent);
}
.custom-select__option.is-selected .custom-select__radio {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.custom-select__option.is-selected .custom-select__radio::after {
  content: "";
  position: absolute;
  inset: 3rem;
  background: var(--color-white);
  border-radius: 50%;
}
/* =================================================================
   Single order row
   ================================================================= */
.order-row__sum {
  padding-left: 16rem;
  border-left: 1px solid rgba(26, 26, 26, 0.12);
}
.order-row {
  background: #f1f2f4;
  border-radius: 16rem;
  padding: 24rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 32rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  overflow: hidden;
}
.order-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  flex-wrap: wrap;
  padding-left: 32rem;
  padding-right: 32rem;
}
.order-row__head-info {
  display: flex;
  gap: 16rem;
  flex-wrap: wrap;
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
}
.order-row__head-info p {
  display: inline-flex;
  gap: 6rem;
  color: #1A1A1A;
}
.order-row__head-info p span {
  color: var(--color-dark);
  font-weight: 500;
}
.order-row__details {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  font-size: 16rem;
  line-height: 1.16;
  color: var(--Black, #1A1A1A);
  text-decoration: underline;
  text-underline-offset: 3rem;
  transition: opacity 0.2s ease;
}
.order-row__details:hover {
  opacity: 0.72;
}
.order-row__details i {
  width: 20rem;
  height: 20rem;
  display: inline-flex;
}
.order-row__details i svg {
  width: 100%;
  height: 100%;
}
.order-row__body {
  background: var(--color-white);
  border-radius: 0 0 12rem 12rem;
  padding: 20rem;
  display: flex;
  align-items: center;
  padding-left: 32rem;
  padding-right: 32rem;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.order-row__meta {
  align-items: start;
}
.order-row__meta-block {
  display: flex;
  gap: 6rem;
  margin-top: 8rem;
  align-items: center;
  font-size: 14rem;
}
.order-row__meta-block--track {
  grid-column: 1/-1;
}
.order-row__meta-block_single {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rem;
  margin-bottom: 20rem;
}
.order-row__meta-block_single .order-row__meta-label {
  color: rgb(26, 26, 26);
}
.order-row__meta-label {
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.56);
}
.order-row__meta-value {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.order-row__track {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
}
.order-row__track-value {
  font-family: "Inter", monospace;
  letter-spacing: 0.5rem;
}
.order-row__copy {
  position: relative;
  width: 28rem;
  height: 28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6rem;
  color: rgba(26, 26, 26, 0.6);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.order-row__copy:hover {
  background: rgba(244, 169, 0, 0.12);
  color: var(--color-accent);
}
.order-row__copy svg {
  width: 16rem;
  height: 16rem;
}
.order-row__copy.is-copied .order-row__copy-toast {
  opacity: 1;
  transform: translate(-50%, -4rem);
}
.order-row__copy-toast {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4rem);
  padding: 4rem 10rem;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 12rem;
  line-height: 1.2;
  border-radius: 6rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.order-row__thumbs {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
}
.order-row__thumb {
  width: 132rem;
  height: 100rem;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 8rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.order-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.order-row__thumb--more {
  color: var(--color-dark);
  font-size: 16rem;
  font-weight: 600;
  line-height: 1.16;
}
/* =================================================================
   Order status pills (shared between history and order detail)
   ================================================================= */
.order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 14rem;
  border-radius: 50rem;
  font-size: 13rem;
  line-height: 1.16;
  color: var(--color-white);
  white-space: nowrap;
  align-self: flex-start;
}
.order-status--done {
  background: #4faf7a;
}
.order-status--cancelled {
  background: #c84d4d;
}
.order-status--processing {
  background: #d89b3c;
}
/* =================================================================
   Empty state (account-history-empty)
   ================================================================= */
.orders-empty {
  border-radius: 16rem;
  padding: 80rem 32rem;
  min-height: 480rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16rem;
}
.orders-empty__icon {
  width: 96rem;
  height: 96rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rem;
}
.orders-empty__icon svg {
  width: 100%;
  height: 100%;
}
.orders-empty__title {
  font-size: 28rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.orders-empty__text {
  font-size: 16rem;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.64);
  max-width: 460rem;
}
.orders-empty__cta {
  margin-top: 16rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 12rem;
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  transition: background 0.2s ease, transform 0.2s ease;
}
.orders-empty__cta:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.orders-empty__cta i {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.orders-empty__cta i svg {
  width: 100%;
  height: 100%;
}
/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1023px) {
  /* The (closed) dropdown panel is position:absolute, left:0, width:max-content.
     Anchored under a right-aligned select it extends past the viewport and pushes
     the document scrollWidth even while hidden. Anchor it to the trigger's right
     edge so it opens inward and never overflows. */
  .custom-select__list {
    left: auto;
    right: 0;
    max-width: calc(100vw - 48rem);
  }
  .order-row__body {
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
  }
  .order-row__meta {
    grid-template-columns: 1fr 1fr;
    gap: 16rem 24rem;
  }
  .order-row__thumbs {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
@media (max-width: 599px) {
  .orders-history__head {
    gap: 16rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .orders-history__filters {
    width: 100%;
    gap: 12rem;
  }
  .orders-history__reset {
    align-self: flex-start;
  }
  .orders-history__selects {
    width: 100%;
    gap: 8rem;
  }
  .orders-history__selects .custom-select {
    flex: 1;
  }
  .orders-history__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
  }
  .orders-history__more {
    justify-content: center;
    width: 100%;
  }
  .custom-select__head {
    padding: 10rem 14rem;
    width: 100%;
    justify-content: space-between;
  }
  .custom-select__list {
    left: 0;
    right: auto;
    min-width: 0;
    width: 100%;
  }
  .custom-select__option {
    white-space: normal;
  }
  .order-row {
    padding: 16rem;
  }
  .order-row__head-info {
    flex-direction: column;
    gap: 6rem;
    font-size: 14rem;
  }
  .order-row__meta {
    grid-template-columns: 1fr;
  }
  .order-row__meta-block--track {
    grid-column: auto;
  }
  .order-row__thumb {
    width: 72rem;
    height: 48rem;
  }
  .pager {
    overflow-x: auto;
    max-width: 100%;
    justify-content: center;
  }
  .orders-empty {
    padding: 48rem 20rem;
    min-height: 320rem;
  }
  .orders-empty__title {
    font-size: 22rem;
  }
  .orders-empty__text {
    font-size: 14rem;
  }
}
/* =================================================================
   Account – single order page — matches Figma 549:9288
   ================================================================= */
.order-page__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
}
.order-page__back {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  color: var(--color-dark);
  font-size: 18rem;
  line-height: 1.16;
  transition: opacity 0.2s ease;
}
.order-page__back:hover {
  opacity: 0.7;
}
.order-page__back i {
  width: 20rem;
  height: 20rem;
  display: inline-flex;
}
.order-page__back i svg {
  width: 100%;
  height: 100%;
}
.order-page__title {
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.order-page__body {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
/* =================================================================
   Order summary card (gray header strip + bordered body)
   ================================================================= */
.order-card {
  display: flex;
  flex-direction: column;
}
.order-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rem;
  flex-wrap: wrap;
  padding: 20rem 32rem;
  background: #f1f2f4;
  border-radius: 16rem 16rem 0 0;
}
.order-card__head-info {
  display: flex;
  align-items: center;
  gap: 16rem;
  flex-wrap: wrap;
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
}
.order-card__head-info p {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  color: var(--color-dark);
  font-size: 14rem;
}
.order-card__head-info p span {
  font-size: 16rem;
  font-weight: 500;
}
.order-card__head-info p em {
  font-style: normal;
  font-size: 14rem;
}
.order-card__sum {
  padding-left: 16rem;
  border-left: 1px solid rgba(26, 26, 26, 0.12);
}
.order-card__print {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3rem;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.order-card__print:hover {
  opacity: 0.7;
}
.order-card__body {
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-top: none;
  border-radius: 0 0 16rem 16rem;
  padding: 24rem 32rem;
  display: flex;
  flex-direction: column;
  gap: 24rem;
  background: var(--color-white);
}
.order-card__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.order-card__col {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  width: 277rem;
  max-width: 100%;
}
.order-card__col--right {
  width: auto;
  gap: 12rem;
}
.order-card__status {
  display: flex;
  align-items: center;
  gap: 16rem;
}
.order-card__meta {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.order-card__meta-row {
  display: flex;
  align-items: center;
  gap: 12rem;
  font-size: 14rem;
  line-height: 1.16;
}
.order-card__label {
  font-size: 14rem;
  line-height: 1.16;
  color: rgba(26, 26, 26, 0.56);
  white-space: nowrap;
}
.order-card__value {
  font-size: 14rem;
  line-height: 1.16;
  color: var(--color-dark);
  white-space: nowrap;
}
.order-card__repeat {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 20rem 24rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 12rem;
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.order-card__repeat:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
/* =================================================================
   Order items list
   ================================================================= */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.order-items__title {
  font-size: 24rem;
  line-height: 1.32;
  font-weight: 400;
  color: var(--color-dark);
}
.order-items__list {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.order-items__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  padding: 24rem 32rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  box-shadow: 0 55rem 89rem rgba(0, 0, 0, 0.04), 0 6.9rem 11.1rem rgba(0, 0, 0, 0.02);
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 500;
  color: var(--color-dark);
}
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  padding: 8rem 32rem 8rem 8rem;
  background: #f1f2f4;
  border-radius: 16rem;
}
.order-item__main {
  display: flex;
  align-items: flex-start;
  gap: 24rem;
}
.order-item__thumb {
  flex-shrink: 0;
  width: 258rem;
  height: 172rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.order-item__info {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  padding-top: 16rem;
  width: 234rem;
  max-width: 100%;
}
.order-item__name {
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.order-item__article {
  font-size: 14rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.72);
}
.order-item__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16rem 0;
  flex-shrink: 0;
}
.order-item__price {
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 500;
  color: var(--color-dark);
  white-space: nowrap;
}
.order-item__qty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.order-item__qty span {
  font-size: 16rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.72);
  white-space: nowrap;
}
.order-item__qty-line {
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
}
/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1023px) {
  .order-card__head {
    padding: 16rem 24rem;
  }
  .order-card__body {
    padding: 24rem;
  }
  .order-card__cols {
    flex-direction: column;
    gap: 20rem;
  }
  .order-card__col, .order-card__col--right {
    width: 100%;
  }
  .order-card__value {
    white-space: normal;
  }
  .order-item__thumb {
    width: 200rem;
    height: 132rem;
  }
  .order-item__info {
    width: auto;
    flex: 1;
  }
}
@media (max-width: 599px) {
  .order-page__title {
    font-size: 24rem;
  }
  .order-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
    padding: 16rem;
  }
  .order-card__head-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
  }
  .order-card__sum {
    padding-left: 0;
    border-left: none;
  }
  .order-card__body {
    padding: 16rem;
  }
  .order-card__cols {
    flex-direction: column;
    gap: 24rem;
  }
  .order-card__col {
    width: 100%;
  }
  .order-card__col--right {
    width: 100%;
  }
  .order-card__meta-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .order-card__value {
    white-space: normal;
  }
  .order-card__repeat {
    width: 100%;
  }
  .order-item {
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
    padding: 12rem;
  }
  .order-item__main {
    flex-direction: column;
    gap: 12rem;
  }
  .order-item__thumb {
    width: 100%;
    height: 180rem;
  }
  .order-item__info {
    padding-top: 0;
  }
  .order-item__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
  }
  .order-item__qty {
    align-items: flex-end;
  }
  .order-item__qty-line {
    display: none;
  }
  .order-items__total {
    padding: 16rem 20rem;
    font-size: 20rem;
  }
}
/* =================================================================
   Account — Персональные данные
   Also defines shared .account-content, .account-form, .account-input,
   .account-btn primitives reused by other inner account pages
   (password, addresses, favorites).
   ================================================================= */
/* When a nav item is active, the profile card switches to neutral grey
   (the yellow accent moves to the active link inside the nav).         */
.account-sidebar--nav-active .account-sidebar__profile {
  background: #f1f2f4;
}
.account-sidebar--nav-active .account-sidebar__avatar {
  background: var(--color-dark);
  color: var(--color-white);
}
.account-sidebar--nav-active .account-sidebar__profile-text {
  color: var(--color-dark);
}
.account-sidebar--nav-active .account-sidebar__profile-name,
.account-sidebar--nav-active .account-sidebar__profile-phone {
  color: var(--color-dark);
}
.account-sidebar--nav-active .account-sidebar__profile-phone {
  opacity: 0.64;
}
.account-sidebar--nav-active .account-sidebar__profile-action {
  color: var(--color-dark);
}
/* -----------------------------------------------------------------
   .account-content – right column container shared by inner pages
   ----------------------------------------------------------------- */
.account-content {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  padding-top: 32rem;
  min-width: 0;
}
.account-content__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0;
}
.account-content__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.account-content__back {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  font-size: 18rem;
  line-height: 1.16;
  color: var(--color-dark);
  transition: opacity 0.2s ease;
  margin-bottom: 8rem;
}
.account-content__back svg {
  width: 20rem;
  height: 20rem;
}
.account-content__back:hover {
  opacity: 0.7;
}
.account-content__subtitle {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
/* -----------------------------------------------------------------
   .account-form – common form layout
   ----------------------------------------------------------------- */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.account-form__row {
  display: grid;
  gap: 24rem;
}
.account-form__row--2 {
  grid-template-columns: repeat(2, 1fr);
}
.account-form__row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.account-form__row--4 {
  grid-template-columns: repeat(4, 1fr);
}
.account-form__divider {
  height: 1px;
  background: rgba(26, 26, 26, 0.08);
}
.account-form__actions {
  display: flex;
  gap: 8rem;
  align-items: center;
  width: 423rem;
  max-width: 100%;
}
/* -----------------------------------------------------------------
   .account-field & .account-input
   ----------------------------------------------------------------- */
.account-field {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}
.account-field__label {
  font-size: 12rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
}
.account-field__hint {
  font-size: 12rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.64;
  margin: 0;
}
.account-field {
  /* "На проверке" status under INN / Название компании fields */
}
.account-field__status {
  font-size: 12rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-accent);
  margin: 0;
}
.account-field__error {
  font-size: 12rem;
  font-weight: 500;
  line-height: 1.4;
  color: #e8243d;
  margin: 0;
}
.account-field.has-error .account-input {
  border-color: #e8243d;
}
.account-input {
  display: flex;
  align-items: center;
  gap: 16rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  padding: 16rem;
  transition: border-color 0.2s ease;
}
.account-input:focus-within {
  border-color: rgba(26, 26, 26, 0.5);
}
.account-input__control {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  padding: 0;
}
.account-input__control::placeholder {
  color: rgba(26, 26, 26, 0.48);
  font-weight: 500;
}
.account-input__control--placeholder {
  color: rgba(26, 26, 26, 0.48);
}
.account-input__suffix {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  flex-shrink: 0;
}
.account-input__suffix-divider {
  width: 1px;
  height: 18rem;
  background: rgba(26, 26, 26, 0.16);
}
.account-input__icon-btn {
  width: 18rem;
  height: 18rem;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.account-input__icon-btn svg {
  width: 100%;
  height: 100%;
}
.account-input__icon-btn:hover {
  opacity: 0.7;
}
.account-input__verified {
  width: 18rem;
  height: 18rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.account-input__verified svg {
  width: 100%;
  height: 100%;
}
/* -----------------------------------------------------------------
   .account-btn
   ----------------------------------------------------------------- */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  flex: 1;
  min-width: 0;
  padding: 20rem 24rem;
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  border-radius: 12rem;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  text-align: center;
  cursor: pointer;
}
.account-btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.account-btn--primary:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.account-btn--link {
  background: transparent;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3rem;
}
.account-btn--link:hover {
  opacity: 0.7;
}
.account-btn--fixed {
  flex: none;
}
/* -----------------------------------------------------------------
   Page-specific tweaks
   ----------------------------------------------------------------- */
.page-account-personal .account-content__title {
  /* matches Figma 48px */
}
/* -----------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------- */
@media (max-width: 1279px) {
  .account-form__row--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1023px) {
  .account-sidebar--nav-active .account-sidebar__profile {
    padding: 20rem;
  }
  .account-content {
    gap: 24rem;
  }
  .account-content__title {
    font-size: 36rem;
  }
  .account-form {
    gap: 24rem;
  }
  .account-form__row--3, .account-form__row--4 {
    grid-template-columns: 1fr 1fr;
  }
  .account-form__actions {
    width: 100%;
  }
}
@media (max-width: 599px) {
  .account-content__title {
    font-size: 28rem;
  }
  .account-form__row--2, .account-form__row--3, .account-form__row--4 {
    grid-template-columns: 1fr;
  }
  .account-form__row {
    gap: 16rem;
  }
  .account-form__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12rem;
  }
  .account-input {
    padding: 14rem;
  }
  .account-input__control {
    font-size: 14rem;
  }
  .account-btn {
    padding: 16rem 20rem;
    font-size: 16rem;
  }
}
/* =================================================================
   Shared account modals (Fancybox inline content)
   ================================================================= */
.account-modal {
  background: var(--color-white);
  border-radius: 16rem;
  padding: 32rem;
  width: 687rem;
  max-width: 100%;
}
.account-modal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}
.account-modal__icon {
  width: 80rem;
  height: 80rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rem;
}
.account-modal__icon svg {
  width: 100%;
  height: 100%;
}
.account-modal__title {
  font-family: "Inter", sans-serif;
  font-size: 32rem;
  font-weight: 500;
  line-height: 1.16;
  color: var(--color-dark);
  text-align: center;
  margin: 0;
}
.account-modal__title--center {
  text-align: center;
  width: 100%;
}
.account-modal__text {
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
  text-align: center;
  margin: 0;
}
.account-modal__text--center {
  text-align: center;
}
.account-modal__sub {
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-dark);
  text-align: center;
  margin: 0;
}
.account-modal--form .account-modal__inner, .account-modal--confirm .account-modal__inner {
  align-items: stretch;
  gap: 16rem;
}
/* Address form (inside add / edit modals) */
.address-form {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.address-form__row {
  display: grid;
  gap: 12rem;
}
.address-form__row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.address-form__actions {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 8rem;
}
.address-form__submit {
  padding: 16rem 24rem;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.16;
  border-radius: 12rem;
  background: rgba(26, 26, 26, 0.24);
  color: var(--color-white);
  cursor: not-allowed;
  transition: background 0.2s ease, transform 0.2s ease;
  text-align: center;
}
.address-form__submit--enabled, .address-form__submit:not([disabled]).address-form__submit--enabled {
  background: var(--color-accent);
  cursor: pointer;
}
.address-form__submit--enabled:hover, .address-form__submit:not([disabled]).address-form__submit--enabled:hover {
  background: #d99700;
}
.address-form__cancel {
  padding: 16rem 24rem;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.16;
  border-radius: 12rem;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-align: center;
}
.address-form__cancel:hover {
  background: var(--color-accent);
  color: var(--color-white);
}
.f-button.is-close-button {
  width: 28rem;
  height: 28rem;
  top: -24rem;
  right: -26rem;
  border-radius: 4px;
  line-height: 28rem;
  color: #1A1A1A;
  background: var(--White, #FFF);
}
.f-button.is-close-button svg {
  width: 13rem;
  height: 13rem;
}
/* Fancybox container overrides for our modals */
.fancybox__container {
  --fancybox-bg: rgba(26, 26, 26, 0.48);
}
.fancybox__content {
  padding: 0 !important;
  background: transparent !important;
}
.fancybox__content > .account-modal {
  margin: 0;
}
.fancybox__content > .f-button.is-close-btn {
  top: -40rem;
  right: 0;
  background: var(--color-white);
  color: var(--color-dark);
  width: 32rem;
  height: 32rem;
  border-radius: 8rem;
}
/* Toast alerts (top-right) */
.account-toasts {
  position: fixed;
  top: 100rem;
  right: 48rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12rem;
  pointer-events: none;
}
.account-toast {
  display: inline-flex;
  position: absolute;
  right: 0;
  align-items: center;
  gap: 8rem;
  padding: 10rem 16rem;
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: 12rem;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0;
  transform: translateX(40rem);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.account-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.account-toast__icon {
  width: 20rem;
  height: 20rem;
  display: inline-flex;
  flex-shrink: 0;
}
.account-toast__icon svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 1023px) {
  .account-modal {
    width: 480rem;
    padding: 24rem;
  }
  .account-toasts {
    top: 80rem;
    right: 24rem;
  }
}
@media (max-width: 599px) {
  .account-modal {
    width: calc(100vw - 40rem);
    padding: 20rem;
    border-radius: 16rem;
  }
  .account-modal__title {
    font-size: 20rem;
  }
  .address-form__row--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8rem;
  }
  .account-toasts {
    top: 72rem;
    right: 20rem;
    left: 20rem;
    align-items: flex-end;
  }
  .account-toast {
    font-size: 13rem;
    padding: 8rem 14rem;
  }
}
/* =================================================================
   Account — Изменить пароль
   Relies on shared rules from _account-personal.scss
   ================================================================= */
.page-account-password .account-content__head {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.page-account-password .account-content__title--md {
  font-size: 32rem;
  line-height: 1.16;
  letter-spacing: 0;
  margin-bottom: -16rem;
}
.page-account-password .account-content__subtitle {
  font-size: 16rem;
}
.page-account-password {
  /* Save button is fixed width (~208rem in Figma) and aligned left */
}
.page-account-password .account-form__actions--single {
  width: auto;
}
.page-account-password .account-form__actions--single .account-btn--fixed {
  flex: none;
  width: auto;
  min-width: 208rem;
  padding: 20rem 24rem;
}
/* -----------------------------------------------------------------
   .password-strength — hint card under the password fields
   ----------------------------------------------------------------- */
.password-strength {
  background: #f1f2f4;
  border-radius: 12rem;
  padding: 20rem;
  display: flex;
  align-items: center;
  gap: 12rem;
  flex-wrap: wrap;
}
.password-strength__label {
  font-size: 14rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
  flex-shrink: 0;
}
.password-strength__items {
  display: flex;
  align-items: center;
  gap: 16rem;
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.password-strength__item {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.password-strength__item.is-valid .password-strength__token {
  color: #2ea35a;
}
.password-strength__item.is-valid .password-strength__text {
  opacity: 1;
  color: #2ea35a;
}
.password-strength__token {
  font-weight: 500;
  color: var(--color-dark);
  transition: color 0.2s ease;
}
.password-strength__text {
  opacity: 0.56;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.password-strength__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(26, 26, 26, 0.16);
}
/* Disabled state for "Сохранить" — grey when validation fails. */
.page-account-password .account-btn--primary.is-disabled {
  background: rgba(26, 26, 26, 0.24);
  color: var(--color-white);
  cursor: not-allowed;
}
.page-account-password .account-btn--primary.is-disabled:hover {
  background: rgba(26, 26, 26, 0.24);
  transform: none;
}
/* -----------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------- */
@media (max-width: 1023px) {
  .page-account-password .account-content__title--md {
    font-size: 28rem;
  }
  .page-account-password .account-form__actions--single .account-btn--fixed {
    width: 100%;
    min-width: 0;
  }
  .password-strength {
    padding: 16rem;
    gap: 8rem;
  }
  .password-strength__items {
    gap: 12rem;
  }
  .password-strength__item {
    font-size: 14rem;
  }
  .password-strength__divider {
    display: none;
  }
}
@media (max-width: 599px) {
  .page-account-password .account-content__title--md {
    font-size: 22rem;
  }
  .password-strength {
    flex-direction: column;
    align-items: flex-start;
  }
  .password-strength__items {
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
  }
}
/* =================================================================
   Account — Адреса доставки   (Figma node 561:56244)
   ================================================================= */
.page-account-addresses .account-content {
  gap: 32rem;
}
/* -----------------------------------------------------------------
   .addresses-block — list of cards + "add" button.
   Figma: column, gap 16px, width 1176.
   ----------------------------------------------------------------- */
.addresses-block {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  align-items: flex-start;
  width: 100%;
  max-width: 1176rem;
}
/* -----------------------------------------------------------------
   .addresses-list — two-up grid of address cards (row gap 24px)
   ----------------------------------------------------------------- */
.addresses-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rem;
  align-items: stretch;
  width: 100%;
}
/* -----------------------------------------------------------------
   .address-card — main (radio + text) + edit / delete squares.
   Figma: flex, gap 4px; each part its own #f1f2f4 rounded block.
   ----------------------------------------------------------------- */
.address-card {
  display: flex;
  align-items: stretch;
  gap: 4rem;
  min-width: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.address-card.is-removing {
  opacity: 0;
  transform: translateY(-4rem);
}
.address-card__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12rem;
  background: #f1f2f4;
  border-radius: 12rem;
  padding: 16rem;
  cursor: pointer;
}
.address-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.address-card {
  /* Figma radio: 20px circle.
     - unselected: white fill, 1px stroke rgba(26,26,26,0.16)
     - selected:   accent fill (#f4a900) with a 12px white centre dot
                   (=> a ~4px accent ring around white). */
}
.address-card__radio-visual {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.16);
  position: relative;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.address-card__radio-visual::after {
  content: "";
  position: absolute;
  inset: 4rem; /* 20% of 20px → 12px white dot */
  border-radius: 50%;
  background: var(--color-white);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.address-card__radio:checked + .address-card__radio-visual {
  background: var(--color-accent);
  box-shadow: none;
}
.address-card__radio:checked + .address-card__radio-visual::after {
  transform: scale(1);
}
.address-card__text {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}
.address-card__title {
  font-size: 16rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-dark);
}
.address-card__sub {
  font-size: 14rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.64;
}
.address-card {
  /* Edit / delete squares: padding 24px around a 28px icon. */
}
.address-card__action {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24rem;
  background: #f1f2f4;
  border-radius: 12rem;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.address-card__action svg {
  width: 28rem;
  height: 28rem;
  display: block;
}
.address-card__action:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
/* -----------------------------------------------------------------
   .addresses-add — "Add new address" button
   Figma: accent bg, radius 12, padding 16/32, gap 12, text 18 Book.
   ----------------------------------------------------------------- */
.addresses-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  background: var(--color-accent);
  border-radius: 12rem;
  color: var(--color-white);
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.addresses-add:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.addresses-add i {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.addresses-add i svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* -----------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------- */
@media (max-width: 1023px) {
  .addresses-list {
    grid-template-columns: 1fr;
    gap: 12rem;
  }
  .address-card__action {
    padding: 18rem;
  }
  .address-card__action svg {
    width: 24rem;
    height: 24rem;
  }
  .addresses-add {
    width: 100%;
    align-self: stretch;
  }
}
@media (max-width: 599px) {
  .address-card__main {
    flex: 1 1 auto;
    padding: 14rem;
  }
  .address-card__action {
    padding: 14rem;
  }
  .address-card__action svg {
    width: 22rem;
    height: 22rem;
  }
  .address-card__title {
    font-size: 15rem;
  }
  .address-card__sub {
    font-size: 13rem;
  }
  .addresses-add {
    padding: 16rem 20rem;
    font-size: 16rem;
  }
}
/* =================================================================
   Account → Избранное (with items) — node 561:50080
   Inherits .page-account layout & .account-sidebar from _account.scss
   Inherits .favorites-header & .favorites-grid from _favorites-guest.scss
   Cards reuse .product-card from _category.scss
   ================================================================= */
.page-account-favorites .account-content {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  min-width: 0;
  /* Align the column with the layout divider (24rem gap) and match the
     sidebar's 32rem top padding so the title lines up with the profile. */
  padding-left: 24rem;
  padding-top: 32rem;
}
.page-account-favorites .account-content__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0;
}
.page-account-favorites {
  /* Active favourite bookmark on cards = solid yellow with a white slot.
     Keep the slot white even though .is-active tints the icon (the
     presentation attribute already wins, this is a belt-and-braces guard). */
}
.page-account-favorites .product-card__bookmark.is-active svg {
  fill: var(--color-accent);
}
.page-account-favorites .product-card__bookmark.is-active svg [stroke] {
  stroke: #fff;
}
/* Inside the account layout the favourites grid sits in the right column
   (≈1329rem at 1920) — 3 columns matches Figma 561:50080.
   Scoped under the page root so this beats the guest .favorites-grid
   (repeat(4,1fr)) which is @imported after this file in main.scss. */
.page-account-favorites .favorites-grid--account {
  grid-template-columns: repeat(3, 1fr);
}
/* =================================================================
   Account → Адреса доставки (empty state) — node 561:51035
   New page: account-addresses-empty.html. Same centred empty layout
   as the favourites empty state, with a sad-circle illustration.
   ================================================================= */
.page-account-addresses-empty .account-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 24rem;
  padding-top: 32rem;
}
.page-account-addresses-empty .account-content__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0;
}
.addresses-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  text-align: center;
  margin: auto;
  max-width: 643rem;
}
.addresses-empty__icon {
  display: inline-flex;
  width: 70rem;
  height: 70rem;
  color: var(--color-accent);
}
.addresses-empty__icon svg {
  width: 100%;
  height: 100%;
}
.addresses-empty__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  color: var(--color-dark);
}
.addresses-empty__title {
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  margin: 0;
}
.addresses-empty__subtitle {
  font-size: 16rem;
  line-height: 1.4;
  opacity: 0.88;
  margin: 0;
  max-width: 377rem;
}
.addresses-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  border-radius: 12rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  transition: background 0.2s ease, transform 0.2s ease;
}
.addresses-empty__cta:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.addresses-empty__cta i {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.addresses-empty__cta i svg {
  width: 100%;
  height: 100%;
}
/* Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .page-account-favorites .favorites-grid--account {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-account-favorites .account-content {
    gap: 24rem;
    padding-left: 0;
    padding-top: 0;
  }
  .page-account-favorites .account-content__title {
    font-size: 36rem;
  }
  .page-account-addresses-empty .account-content {
    padding-left: 0;
    padding-top: 0;
  }
  .page-account-addresses-empty .account-content__title {
    font-size: 36rem;
  }
  .addresses-empty {
    margin: 48rem auto;
  }
  .addresses-empty__title {
    font-size: 28rem;
  }
  .addresses-empty__cta {
    padding: 14rem 24rem;
    font-size: 16rem;
  }
}
@media (max-width: 599px) {
  .favorites-grid--account {
    grid-template-columns: 1fr;
  }
  .page-account-favorites .account-content {
    gap: 20rem;
  }
  .page-account-favorites .account-content__title {
    font-size: 28rem;
  }
  .page-account-addresses-empty .account-content__title {
    font-size: 28rem;
  }
  .addresses-empty {
    gap: 20rem;
    margin: 32rem auto;
  }
  .addresses-empty__icon {
    width: 56rem;
    height: 56rem;
  }
  .addresses-empty__title {
    font-size: 22rem;
  }
  .addresses-empty__subtitle {
    font-size: 14rem;
  }
  .addresses-empty__cta {
    width: 100%;
    padding: 14rem 20rem;
  }
}
/* =================================================================
   Account → Избранное (empty state) — node 561:49688
   Inherits .page-account layout & .account-sidebar from _account.scss
   (the vertical divider between sidebar and content is drawn by
   .page-account__layout::before — no extra border needed here)
   ================================================================= */
.page-account-favorites-empty .account-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Compensate for the layout divider that sits 24rem left of the column */
  padding-left: 24rem;
  padding-top: 32rem;
}
.page-account-favorites-empty .account-content__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0;
}
.favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  text-align: center;
  /* Vertically + horizontally centre the block in the space below the title */
  margin: auto;
  max-width: 643rem;
}
.favorites-empty__icon {
  display: inline-flex;
  width: 72rem;
  height: 72rem;
  color: var(--color-accent);
}
.favorites-empty__icon svg {
  width: 100%;
  height: 100%;
}
.favorites-empty__text {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  color: var(--color-dark);
}
.favorites-empty__title {
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  margin: 0;
}
.favorites-empty__subtitle {
  font-size: 16rem;
  line-height: 1.4;
  opacity: 0.88;
  margin: 0;
}
.favorites-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  border-radius: 12rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  transition: background 0.2s ease, transform 0.2s ease;
}
.favorites-empty__cta:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.favorites-empty__cta i {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.favorites-empty__cta i svg {
  width: 100%;
  height: 100%;
}
/* Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .page-account-favorites-empty .account-content {
    padding-left: 0;
    padding-top: 0;
  }
  .page-account-favorites-empty .account-content__title {
    font-size: 36rem;
  }
  .favorites-empty {
    margin: 48rem auto;
  }
  .favorites-empty__title {
    font-size: 28rem;
  }
  .favorites-empty__cta {
    padding: 14rem 24rem;
    font-size: 16rem;
  }
}
@media (max-width: 599px) {
  .page-account-favorites-empty .account-content__title {
    font-size: 28rem;
  }
  .favorites-empty {
    gap: 20rem;
    margin: 32rem auto;
  }
  .favorites-empty__icon {
    width: 56rem;
    height: 56rem;
  }
  .favorites-empty__title {
    font-size: 22rem;
  }
  .favorites-empty__subtitle {
    font-size: 14rem;
  }
  .favorites-empty__cta {
    width: 100%;
    padding: 14rem 20rem;
  }
}
/* ====================================================================== */
/* Light header / footer override (shared across internal info pages)      */
/* ====================================================================== */
.site-header--light {
  color: var(--color-dark);
  position: relative;
  padding-top: 24rem;
}
.site-header--light .site-header__inner {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.site-header--light .site-header__logo {
  color: var(--color-dark);
}
.site-header--light .site-header__divider {
  background: rgba(26, 26, 26, 0.16);
}
.site-header--light .site-header__contact {
  color: var(--color-dark);
}
.site-header--light .site-header__nav-link {
  color: var(--color-dark);
  opacity: 0.88;
}
.site-header--light .site-header__social {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.site-header--light .site-header__social svg path {
  fill: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__social:hover svg path {
  fill: var(--color-white);
}
.site-header--light .site-header__icon {
  color: var(--color-dark);
}
.site-header--light .site-header__icon svg [stroke=white] {
  stroke: var(--color-dark);
}
.site-header--light .site-header__icon svg [fill=white] {
  fill: var(--color-dark);
}
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
@media (max-width: 1023px) {
  .site-header--light .site-header__nav {
    background: var(--color-white);
    color: var(--color-dark);
  }
  .site-header--light .site-header__nav .site-header__nav-link {
    color: var(--color-dark);
  }
  .site-header--light .site-header__nav.is-open {
    background: var(--color-white);
    color: var(--color-dark);
  }
}
/* ====================================================================== */
/* Shared "page-info" layout: breadcrumbs + sidebar + content              */
/* ====================================================================== */
.page-info {
  display: block;
  color: var(--color-text);
  background: var(--color-white);
}
.page-info__inner {
  padding: 0 48rem 26rem;
}
.page-info__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 32rem 0 24rem;
  font-size: 14rem;
  line-height: 1.4;
}
.page-info__crumb {
  color: var(--color-dark);
  transition: opacity 0.25s ease;
}
.page-info__crumb--muted {
  color: rgba(26, 26, 26, 0.32);
}
.page-info__crumb:is(a):hover {
  opacity: 0.7;
}
.page-info__crumb-sep {
  color: rgba(26, 26, 26, 0.32);
}
.page-info {
  /* Sidebar nav + content split by a 1px divider, plus a top divider above it. */
}
.page-info__layout {
  display: grid;
  grid-template-columns: 295rem 1fr;
  column-gap: 50rem;
  align-items: stretch;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  padding-top: 32rem;
  position: relative;
  /* The section dividers (.page-info-block) deliberately bleed past the
     content with negative margins; clip the runaway right edge here so it
     doesn't create a page-wide horizontal scrollbar. `clip` (not `hidden`)
     keeps the sticky sidebar working. */
  overflow-x: clip;
}
.page-info__layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 295rem;
  width: 1px;
  background: rgba(26, 26, 26, 0.12);
  pointer-events: none;
}
.page-info__sidebar {
  position: sticky;
  top: 24rem;
  align-self: flex-start;
}
.page-info__content {
  display: flex;
  flex-direction: column;
  gap: 42rem;
  min-width: 0;
  padding-bottom: 80rem;
}
/* Sidebar nav */
.page-info-nav {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.page-info-nav__item {
  display: block;
}
.page-info-nav__link {
  display: flex;
  align-items: center;
  gap: 12rem;
  color: rgba(26, 26, 26, 0.32);
  font-size: 18rem;
  line-height: 1.16;
  transition: color 0.25s ease;
}
.page-info-nav__link:hover {
  color: rgba(26, 26, 26, 0.72);
}
.page-info-nav__link.is-active {
  color: var(--color-accent);
}
.page-info-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
  color: currentColor;
}
.page-info-nav__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.page-info-nav__icon svg path {
  fill: currentColor;
}
.page-info-nav__text {
  display: inline-block;
}
/* Hero card */
.page-info-hero {
  position: relative;
  border-radius: 24rem;
  overflow: hidden;
  min-height: 274rem;
  display: flex;
  align-items: center;
  isolation: isolate;
  color: var(--color-white);
}
.page-info-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(99.91deg, #504c49 0%, #908f8e 56.12%, #b5b5b5 100%);
}
.page-info-hero__text {
  position: relative;
  z-index: 2;
  padding: 48rem 40rem;
  width: 777rem;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.page-info-hero__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: -0.5rem;
}
.page-info-hero__desc {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-white);
  opacity: 0.88;
  max-width: 625rem;
}
.page-info-hero__image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  pointer-events: none;
}
.page-info-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 30%;
}
/* Article + blocks */
.page-info-article {
  display: flex;
  flex-direction: column;
  gap: 64rem;
  max-width: 1031rem;
}
.page-info-block {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  padding-bottom: 42rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  margin-left: -50rem;
  padding-left: 50rem;
  margin-right: -600rem;
  padding-right: 600rem;
}
.page-info-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.page-info-block__title {
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.25rem;
}
.page-info-block__group {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.page-info-block__subtitle {
  font-size: 20rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.page-info-block__text {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
/* Lists — Figma uses a yellow circular bullet (8px) inside an 8x24 frame.    */
/* The frame's height (24px) matches the text line-height so the dot aligns   */
/* with the first line of text. The bullet is vertically centered within it. */
.page-info-list {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.page-info-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.page-info-list__bullet {
  flex-shrink: 0;
  width: 8rem;
  height: 24rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-info-list__bullet::before {
  content: "";
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.page-info-list__text {
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0.88;
}
.page-info-list__text strong {
  font-weight: 600;
  opacity: 1;
}
/* Callouts (light grey, with circular icon badge) */
.page-info-callouts {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.page-info-callout {
  display: flex;
  align-items: center;
  gap: 12rem;
  padding: 16rem;
  background: #f1f2f4;
  border-radius: 16rem;
}
.page-info-callout--stack {
  align-items: flex-start;
}
.page-info-callout--solo {
  width: 100%;
}
.page-info-callout__icon {
  width: 40rem;
  height: 40rem;
  border-radius: 60rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-white);
}
.page-info-callout__icon svg {
  width: 24rem;
  height: 24rem;
  display: block;
}
.page-info-callout__icon--warn {
  background: #c84d4d;
}
.page-info-callout__text {
  flex: 1 1 auto;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  gap: 12rem;
}
.page-info-callout__text p {
  margin: 0;
}
.page-info-callout__accent {
  color: #c84d4d;
  font-weight: 600;
}
/* ====================================================================== */
/* Responsive                                                              */
/* ====================================================================== */
@media (max-width: 1279px) {
  .page-info__inner {
    padding: 0 32rem 48rem;
  }
  .page-info__layout {
    grid-template-columns: 256rem 1fr;
    column-gap: 36rem;
  }
  .page-info__layout::before {
    left: 256rem;
  }
  .page-info-hero__text {
    padding: 40rem 32rem;
    max-width: 60%;
  }
  .page-info-hero__title {
    font-size: 40rem;
  }
}
@media (max-width: 1023px) {
  .page-info__inner {
    padding: 0 24rem 48rem;
  }
  .page-info__breadcrumbs {
    padding: 20rem 0 24rem;
  }
  .page-info__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: 24rem;
    padding-top: 24rem;
    min-width: 0;
  }
  .page-info__layout::before {
    display: none;
  }
  .page-info__sidebar {
    position: static;
    top: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .page-info__content {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .page-info-nav {
    flex-direction: row;
    gap: 12rem;
    overflow-x: auto;
    padding-bottom: 8rem;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-info-nav::-webkit-scrollbar {
    display: none;
  }
  .page-info-nav__link {
    padding: 12rem 18rem;
    border-radius: 12rem;
    background: rgba(26, 26, 26, 0.04);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 16rem;
    color: rgba(26, 26, 26, 0.56);
  }
  .page-info-nav__link:hover {
    background: rgba(26, 26, 26, 0.07);
    color: rgba(26, 26, 26, 0.85);
  }
  .page-info-nav__link.is-active {
    background: var(--color-accent);
    color: var(--color-white);
  }
  .page-info-hero {
    min-height: 240rem;
  }
  .page-info-hero__text {
    padding: 32rem 24rem;
    max-width: 100%;
    width: 100%;
  }
  .page-info-hero__title {
    font-size: 36rem;
  }
  .page-info-hero__image {
    display: none;
  }
  .page-info-hero__bg {
    background: linear-gradient(150deg, #504c49 0%, #908f8e 56.12%, #b5b5b5 100%);
  }
  .page-info-article {
    gap: 48rem;
  }
  .page-info-block__title {
    font-size: 28rem;
  }
  .page-info-block__subtitle {
    font-size: 18rem;
  }
}
@media (max-width: 599px) {
  .page-info__inner {
    padding: 0 20rem 32rem;
  }
  .page-info__breadcrumbs {
    padding: 16rem 0 20rem;
    font-size: 12rem;
  }
  .page-info-hero {
    min-height: 200rem;
    border-radius: 16rem;
  }
  .page-info-hero__text {
    padding: 24rem 20rem;
    gap: 12rem;
  }
  .page-info-hero__title {
    font-size: 28rem;
    letter-spacing: -0.25rem;
  }
  .page-info-hero__desc {
    font-size: 14rem;
  }
  .page-info-block__title {
    font-size: 24rem;
  }
  .page-info-block__subtitle {
    font-size: 16rem;
  }
  .page-info-block__text {
    font-size: 14rem;
  }
  .page-info-list__item {
    font-size: 14rem;
  }
  .page-info-callout {
    padding: 12rem;
    gap: 10rem;
  }
  .page-info-callout__icon {
    width: 36rem;
    height: 36rem;
  }
  .page-info-callout__icon svg {
    width: 20rem;
    height: 20rem;
  }
  .page-info-callout__text {
    font-size: 14rem;
  }
}
/* ====================================================================== */
/* Delivery page specifics                                                 */
/* ====================================================================== */
.page-info-delivery {
  /* Reserved hook for page-specific tweaks. */
}
/* ====================================================================== */
/* Warranty page — page-specific styles (shared layout lives in            */
/* _info-delivery.scss). Import _info-delivery.scss before this file       */
/* in main.scss so the shared rules are loaded once.                       */
/* ====================================================================== */
.page-info-warranty .page-info-hero__title {
  /* Match Figma layout: two lines of identical leading. */
  line-height: 1.16;
}
.page-info-warranty .page-info-callout__heading {
  font-weight: 500;
  color: var(--color-dark);
  opacity: 1;
}
.page-info-warranty .page-info-block__text--note {
  opacity: 0.88;
  font-size: 16rem;
  margin-top: 0;
}
@media (max-width: 599px) {
  .page-info-warranty .page-info-block__text--note {
    font-size: 14rem;
  }
}
/* ======================================================================
   Loyalty page — extends shared .page-info layout from _info-delivery.scss
   ====================================================================== */
.page-info-loyalty {
  /* -- Sidebar: active loyalty icon tinted orange ----------------------
     The shipped SVGs bake opacity:0.32 inside <g>, so a plain CSS filter
     on the <img> would yield a 32%-opacity orange. We instead replace
     the bitmap with a CSS mask so the active link renders a fully-opaque
     accent-coloured silhouette. */
}
.page-info-loyalty .page-info-nav__link.is-active {
  color: var(--color-accent);
  opacity: 1;
}
.page-info-loyalty .page-info-nav__link.is-active .page-info-nav__icon img {
  display: none;
}
.page-info-loyalty .page-info-nav__link.is-active .page-info-nav__icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20width='100%25'%20height='100%25'%20overflow='visible'%20style='display:%20block;'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='doc%20check'%20opacity='0.32'%20clip-path='url(%23clip0_0_132)'%3e%3cpath%20id='Vector'%20d='M18%2012C14.686%2012%2012%2014.686%2012%2018C12%2021.314%2014.686%2024%2018%2024C21.314%2024%2024%2021.314%2024%2018C24%2014.686%2021.314%2012%2018%2012ZM21.192%2018.202L18.979%2020.326C18.527%2020.772%2017.927%2020.997%2017.326%2020.997C16.725%2020.997%2016.123%2020.772%2015.663%2020.323L14.531%2019.214C14.136%2018.827%2014.131%2018.194%2014.517%2017.8C14.903%2017.404%2015.536%2017.399%2015.931%2017.786L17.062%2018.894C17.206%2019.036%2017.441%2019.033%2017.584%2018.892L19.807%2016.758C20.204%2016.376%2020.838%2016.387%2021.221%2016.787C21.603%2017.185%2021.59%2017.819%2021.192%2018.202ZM10%2018C10%2015.61%2011.048%2013.466%2012.709%2012H5C4.447%2012%204%2011.553%204%2011C4%2010.447%204.447%2010%205%2010H13C13.553%2010%2014%2010.447%2014%2011C14%2011.024%2013.999%2011.048%2013.997%2011.072C15.174%2010.39%2016.541%2010%2018%2010V5C18%202.243%2015.757%200%2013%200H5C2.243%200%200%202.243%200%205V19C0%2021.757%202.243%2024%205%2024H12.709C11.048%2022.534%2010%2020.39%2010%2018ZM5%205H13C13.553%205%2014%205.447%2014%206C14%206.553%2013.553%207%2013%207H5C4.447%207%204%206.553%204%206C4%205.447%204.447%205%205%205ZM7%2017H5C4.447%2017%204%2016.553%204%2016C4%2015.447%204.447%2015%205%2015H7C7.553%2015%208%2015.447%208%2016C8%2016.553%207.553%2017%207%2017Z'%20fill='var(--fill-0,%20%231A1A1A)'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_132'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20width='100%25'%20height='100%25'%20overflow='visible'%20style='display:%20block;'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='doc%20check'%20opacity='0.32'%20clip-path='url(%23clip0_0_132)'%3e%3cpath%20id='Vector'%20d='M18%2012C14.686%2012%2012%2014.686%2012%2018C12%2021.314%2014.686%2024%2018%2024C21.314%2024%2024%2021.314%2024%2018C24%2014.686%2021.314%2012%2018%2012ZM21.192%2018.202L18.979%2020.326C18.527%2020.772%2017.927%2020.997%2017.326%2020.997C16.725%2020.997%2016.123%2020.772%2015.663%2020.323L14.531%2019.214C14.136%2018.827%2014.131%2018.194%2014.517%2017.8C14.903%2017.404%2015.536%2017.399%2015.931%2017.786L17.062%2018.894C17.206%2019.036%2017.441%2019.033%2017.584%2018.892L19.807%2016.758C20.204%2016.376%2020.838%2016.387%2021.221%2016.787C21.603%2017.185%2021.59%2017.819%2021.192%2018.202ZM10%2018C10%2015.61%2011.048%2013.466%2012.709%2012H5C4.447%2012%204%2011.553%204%2011C4%2010.447%204.447%2010%205%2010H13C13.553%2010%2014%2010.447%2014%2011C14%2011.024%2013.999%2011.048%2013.997%2011.072C15.174%2010.39%2016.541%2010%2018%2010V5C18%202.243%2015.757%200%2013%200H5C2.243%200%200%202.243%200%205V19C0%2021.757%202.243%2024%205%2024H12.709C11.048%2022.534%2010%2020.39%2010%2018ZM5%205H13C13.553%205%2014%205.447%2014%206C14%206.553%2013.553%207%2013%207H5C4.447%207%204%206.553%204%206C4%205.447%204.447%205%205%205ZM7%2017H5C4.447%2017%204%2016.553%204%2016C4%2015.447%204.447%2015%205%2015H7C7.553%2015%208%2015.447%208%2016C8%2016.553%207.553%2017%207%2017Z'%20fill='var(--fill-0,%20%231A1A1A)'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_132'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") center/contain no-repeat;
}
.page-info-loyalty {
  /* -- Hero: keep image visible, no cropping --------------------------- */
}
.page-info-loyalty .page-info-hero {
  overflow: hidden;
  align-items: stretch;
}
.page-info-loyalty .page-info-hero__text {
  width: auto;
  max-width: 720rem;
  padding: 40rem;
  gap: 16rem;
  justify-content: flex-start;
}
.page-info-loyalty .page-info-hero__desc-group {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  max-width: 640rem;
}
.page-info-loyalty .page-info-hero__desc {
  max-width: none;
}
.page-info-loyalty .page-info-hero__image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  pointer-events: none;
}
.page-info-loyalty .page-info-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}
.page-info-loyalty {
  /* -- Article: full width within content area ------------------------- */
}
.page-info-loyalty .page-info-article {
  max-width: none;
  width: 100%;
  gap: 48rem;
}
.page-info-loyalty {
  /* -- Block variant without bottom border / padding (used for table & split sections) */
}
.page-info-loyalty .page-info-block--plain {
  border-bottom: none;
  padding-bottom: 0;
  gap: 24rem;
}
.page-info-loyalty .page-info-block__header {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  max-width: 720rem;
}
.page-info-loyalty .page-info-block__lead {
  font-size: 20rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-info-loyalty {
  /* -- Pricing table --------------------------------------------------- */
}
.page-info-loyalty .page-info-table {
  width: 100%;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.page-info-loyalty .page-info-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  width: 100%;
}
.page-info-loyalty .page-info-table__row--head {
  background: var(--color-dark);
  color: var(--color-white);
}
.page-info-loyalty .page-info-table__row--head .page-info-table__cell {
  font-family: inherit;
  font-size: 20rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-white);
  padding: 24rem;
  opacity: 1;
}
.page-info-loyalty .page-info-table__row--head .page-info-table__cell--lead {
  padding: 24rem 32rem;
}
.page-info-loyalty .page-info-table__row--stripe {
  background: #f1f2f4;
}
.page-info-loyalty .page-info-table__cell {
  padding: 24rem;
  font-size: 16rem;
  line-height: 1.24;
  color: var(--color-dark);
  opacity: 0.88;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-info-loyalty .page-info-table__cell--lead {
  justify-content: flex-start;
  text-align: left;
  padding: 24rem 24rem 24rem 32rem;
}
.page-info-loyalty {
  /* -- Two-column section (Доп. условия / Обновление) separated by 1px line */
}
.page-info-loyalty .page-info-loyalty__split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  padding-right: 0;
  margin-right: 0;
  gap: 48rem;
  width: 100%;
}
.page-info-loyalty .page-info-loyalty__col {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  min-width: 0;
}
.page-info-loyalty .page-info-loyalty__divider {
  width: 1px;
  background: rgba(26, 26, 26, 0.12);
  align-self: stretch;
  /* Compensate for parent grid gap to sit centered */
  margin: 0 -24rem;
  pointer-events: none;
}
.page-info-loyalty {
  /* -- Callouts: light grey rounded blocks with white circular badge --- */
}
.page-info-loyalty .page-info-callouts {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-info-loyalty .page-info-callout {
  display: flex;
  align-items: start;
  gap: 12rem;
  padding: 16rem;
  background: #f1f2f4;
  border-radius: 12rem;
  min-height: 92rem;
}
.page-info-loyalty .page-info-callout__icon {
  width: 40rem;
  height: 40rem;
  border-radius: 60rem;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.page-info-loyalty .page-info-callout__icon svg {
  width: 40rem;
  height: 40rem;
  display: block;
}
.page-info-loyalty .page-info-callout__text {
  flex: 1 1 auto;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
/* ======================================================================
   Responsive
   ====================================================================== */
@media (min-width: 600px) and (max-width: 1023px) {
  .page-info-loyalty {
    /* Wrap the table in a horizontal scroller and force a min width so the
       last column isn't cut off on narrow tablets. */
  }
  .page-info-loyalty .page-info-block--plain {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-info-loyalty .page-info-table {
    min-width: 600rem;
  }
}
@media (max-width: 1023px) {
  .page-info-loyalty .page-info-hero__text {
    max-width: 100%;
    width: 100%;
    padding: 32rem 24rem;
  }
  .page-info-loyalty .page-info-hero__desc-group {
    max-width: 100%;
  }
  .page-info-loyalty .page-info-table__row {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .page-info-loyalty .page-info-table__row--head .page-info-table__cell {
    font-size: 16rem;
    padding: 18rem 16rem;
  }
  .page-info-loyalty .page-info-table__row--head .page-info-table__cell--lead {
    padding: 18rem 20rem;
  }
  .page-info-loyalty .page-info-table__cell {
    padding: 18rem 16rem;
    font-size: 15rem;
  }
  .page-info-loyalty .page-info-table__cell--lead {
    padding: 18rem 20rem;
  }
  .page-info-loyalty .page-info-loyalty__split {
    grid-template-columns: 1fr;
    gap: 32rem;
  }
  .page-info-loyalty .page-info-loyalty__divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
}
@media (max-width: 599px) {
  .page-info-loyalty .page-info-article {
    gap: 32rem;
  }
  .page-info-loyalty .page-info-block__lead {
    font-size: 16rem;
  }
  .page-info-loyalty .page-info-block__header {
    gap: 8rem;
  }
  .page-info-loyalty .page-info-table {
    border-radius: 12rem;
  }
  .page-info-loyalty .page-info-table__row {
    grid-template-columns: 1fr;
  }
  .page-info-loyalty .page-info-table__row--head {
    display: none;
  }
  .page-info-loyalty .page-info-table__row {
    padding: 12rem 16rem;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  }
  .page-info-loyalty .page-info-table__row:last-child {
    border-bottom: none;
  }
  .page-info-loyalty .page-info-table__row--stripe {
    background: #f1f2f4;
  }
  .page-info-loyalty .page-info-table__cell {
    padding: 6rem 0;
    justify-content: flex-start;
    text-align: left;
    font-size: 14rem;
    /* Lead cell becomes the card title (the order-sum tier) */
  }
  .page-info-loyalty .page-info-table__cell--lead {
    padding: 0 0 8rem;
    font-size: 16rem;
    font-weight: 500;
    opacity: 1;
  }
  .page-info-loyalty .page-info-table__cell {
    /* Other cells show their column name (from data-label) on the left
       and the value on the right, so the table stays readable without a
       header row on mobile. */
  }
  .page-info-loyalty .page-info-table__cell:not(.page-info-table__cell--lead) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12rem;
  }
  .page-info-loyalty .page-info-table__cell:not(.page-info-table__cell--lead)::before {
    content: attr(data-label);
    color: rgba(26, 26, 26, 0.56);
    font-weight: 400;
  }
  .page-info-loyalty .page-info-callout {
    padding: 12rem;
    min-height: 0;
    gap: 10rem;
  }
  .page-info-loyalty .page-info-callout__icon {
    width: 36rem;
    height: 36rem;
    padding: 0;
  }
  .page-info-loyalty .page-info-callout__icon svg {
    width: 36rem;
    height: 36rem;
  }
  .page-info-loyalty .page-info-callout__text {
    font-size: 14rem;
  }
  .page-info-loyalty .page-info-loyalty__split {
    gap: 24rem;
  }
}
.order-summary--checkout .order-summary__rows {
  border-top: 1px solid rgba(26, 26, 26, 0.1411764706);
  padding-top: 24rem;
  margin-top: 0;
}
/* ======================================================================
   Education listing — extends shared .page-info layout (_info-delivery.scss)
   ====================================================================== */
.page-info-education {
  /* -- Sidebar: active education icon tinted orange ------------------- */
}
.page-info-education .page-info-nav__link.is-active {
  color: var(--color-accent);
  opacity: 1;
}
.page-info-education .page-info-nav__link.is-active .page-info-nav__icon img {
  display: none;
}
.page-info-education .page-info-nav__link.is-active .page-info-nav__icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20width='100%25'%20height='100%25'%20overflow='visible'%20style='display:%20block;'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='free-icon-font-chalkboard-user-10489563%201'%20opacity='0.32'%20clip-path='url(%23clip0_0_134)'%3e%3cpath%20id='Vector'%20d='M14%2023C14%2023.552%2013.552%2024%2013%2024H1C0.448%2024%200%2023.552%200%2023C0%2019.134%203.134%2016%207%2016C10.866%2016%2014%2019.134%2014%2023ZM7%206C4.791%206%203%207.791%203%2010C3%2012.209%204.791%2014%207%2014C9.209%2014%2011%2012.209%2011%2010C11%207.791%209.209%206%207%206ZM24%205V13C24%2015.761%2021.761%2018%2019%2018H14.474C13.529%2016.594%2012.199%2015.467%2010.635%2014.773C12.072%2013.677%2013%2011.947%2013%2010C13%206.686%2010.314%204%207%204C5.916%204%204.898%204.288%204.021%204.791C4.133%202.133%206.315%200%209%200H19C21.761%200%2024%202.239%2024%205ZM20%2015C20%2014.447%2019.552%2014%2019%2014H15.5C14.948%2014%2014.5%2014.447%2014.5%2015C14.5%2015.553%2014.948%2016%2015.5%2016H19C19.552%2016%2020%2015.553%2020%2015Z'%20fill='var(--fill-0,%20black)'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_134'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20width='100%25'%20height='100%25'%20overflow='visible'%20style='display:%20block;'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='free-icon-font-chalkboard-user-10489563%201'%20opacity='0.32'%20clip-path='url(%23clip0_0_134)'%3e%3cpath%20id='Vector'%20d='M14%2023C14%2023.552%2013.552%2024%2013%2024H1C0.448%2024%200%2023.552%200%2023C0%2019.134%203.134%2016%207%2016C10.866%2016%2014%2019.134%2014%2023ZM7%206C4.791%206%203%207.791%203%2010C3%2012.209%204.791%2014%207%2014C9.209%2014%2011%2012.209%2011%2010C11%207.791%209.209%206%207%206ZM24%205V13C24%2015.761%2021.761%2018%2019%2018H14.474C13.529%2016.594%2012.199%2015.467%2010.635%2014.773C12.072%2013.677%2013%2011.947%2013%2010C13%206.686%2010.314%204%207%204C5.916%204%204.898%204.288%204.021%204.791C4.133%202.133%206.315%200%209%200H19C21.761%200%2024%202.239%2024%205ZM20%2015C20%2014.447%2019.552%2014%2019%2014H15.5C14.948%2014%2014.5%2014.447%2014.5%2015C14.5%2015.553%2014.948%2016%2015.5%2016H19C19.552%2016%2020%2015.553%2020%2015Z'%20fill='var(--fill-0,%20black)'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_134'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") center/contain no-repeat;
}
.page-info-education .page-info__content {
  gap: 48rem;
}
.page-info-education {
  /* On tablet/mobile, the active nav link sits on a yellow background — force
     white text and a white-masked icon so it's not orange-on-orange. */
}
@media (max-width: 1023px) {
  .page-info-education .page-info-nav__link.is-active {
    color: var(--color-white) !important;
  }
  .page-info-education .page-info-nav__link.is-active .page-info-nav__icon::after {
    background: var(--color-white);
  }
}
/* ----- Hero card ----- */
.page-info-edu-hero {
  position: relative;
  width: 100%;
  height: 274rem;
  border-radius: 24rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  display: flex;
  align-items: center;
}
.page-info-edu-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(99.91deg, #504c49 0%, #908f8e 56.12%, #b5b5b5 100%);
}
.page-info-edu-hero__text {
  position: relative;
  z-index: 2;
  padding: 0 40rem;
  width: 680rem;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.page-info-edu-hero__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: -0.5rem;
}
.page-info-edu-hero__desc {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-white);
  opacity: 0.88;
}
.page-info-edu-hero__image {
  position: absolute;
  right: -10rem;
  top: -65rem;
  width: 966rem;
  height: 421rem;
  z-index: 1;
  pointer-events: none;
}
.page-info-edu-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ----- Card grid ----- */
.page-info-edu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80rem 40rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.page-info-edu-card__link {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  color: var(--color-dark);
  transition: transform 0.25s ease;
}
.page-info-edu-card__link:hover {
  transform: translateY(-2rem);
}
.page-info-edu-card__link:hover .page-info-edu-card__title {
  color: var(--color-accent);
}
.page-info-edu-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 470/400;
  border-radius: 24rem;
  overflow: hidden;
  background: #f1f2f4;
}
.page-info-edu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-info-edu-card__badges {
  position: absolute;
  left: 16rem;
  top: 16rem;
  right: 16rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8rem;
  z-index: 2;
  pointer-events: none;
}
.page-info-edu-card__date, .page-info-edu-card__read {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding: 4rem 8rem;
  background: var(--color-white);
  border-radius: 40rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  pointer-events: auto;
}
.page-info-edu-card__date img,
.page-info-edu-card__date svg, .page-info-edu-card__read img,
.page-info-edu-card__read svg {
  width: 20rem;
  height: 20rem;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.page-info-edu-card {
  /* Legacy positioning fallback when __date is used directly on __media. */
}
.page-info-edu-card__media > .page-info-edu-card__date {
  position: absolute;
  left: 16rem;
  top: 16rem;
}
.page-info-edu-card__body {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.page-info-edu-card__title {
  font-size: 24rem;
  line-height: 1.32;
  font-weight: 400;
  color: var(--color-dark);
  transition: color 0.25s ease;
}
.page-info-edu-card__desc {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
/* ----- Pagination footer ----- */
.page-info-edu-foot {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}
.page-info-edu-foot__divider {
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.08);
}
.page-info-edu-foot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.page-info-edu-foot__more {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  height: 50rem;
  padding: 0 24rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
  font: inherit;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.page-info-edu-foot__more svg {
  width: 16rem;
  height: 16rem;
}
.page-info-edu-foot__more:hover {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.32);
}
.page-info-edu-pager {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  padding: 4rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
}
.page-info-edu-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42rem;
  height: 42rem;
  padding: 0 14rem;
  background: transparent;
  border: 0;
  border-radius: 30rem;
  font: inherit;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.page-info-edu-pager__page:hover {
  background: rgba(26, 26, 26, 0.04);
}
.page-info-edu-pager__page.is-active {
  background: var(--color-accent);
  color: var(--color-white);
}
.page-info-edu-pager__page.is-active:hover {
  background: var(--color-accent);
}
.page-info-edu-pager__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24rem;
  color: var(--color-dark);
  font-size: 14rem;
  font-weight: 500;
}
.page-info-edu-pager__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68rem;
  height: 42rem;
  background: var(--color-accent);
  border: 0;
  border-radius: 30rem;
  color: var(--color-white);
  cursor: pointer;
  margin-left: 8rem;
  transition: opacity 0.2s ease;
}
.page-info-edu-pager__next svg {
  width: 20rem;
  height: 20rem;
}
.page-info-edu-pager__next:hover {
  opacity: 0.9;
}
/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1279px) {
  .page-info-edu-grid {
    gap: 56rem 24rem;
  }
  .page-info-edu-hero__text {
    padding: 0 32rem;
  }
  .page-info-edu-hero__title {
    font-size: 40rem;
  }
}
@media (max-width: 1023px) {
  .page-info-edu-hero {
    height: auto;
    min-height: 220rem;
    padding: 32rem 24rem;
    align-items: flex-start;
  }
  .page-info-edu-hero__text {
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  .page-info-edu-hero__title {
    font-size: 32rem;
    letter-spacing: -0.25rem;
  }
  .page-info-edu-hero__image {
    display: none;
  }
  .page-info-edu-hero__bg {
    background: linear-gradient(150deg, #504c49 0%, #908f8e 56.12%, #b5b5b5 100%);
  }
  .page-info-edu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40rem 20rem;
  }
  .page-info-edu-card__title {
    font-size: 20rem;
  }
  .page-info-edu-card__desc {
    font-size: 14rem;
  }
  .page-info-edu-foot {
    gap: 24rem;
  }
  .page-info-edu-foot__row {
    gap: 16rem;
  }
}
@media (max-width: 599px) {
  .page-info-edu-hero {
    border-radius: 16rem;
    padding: 24rem 20rem;
    min-height: 180rem;
  }
  .page-info-edu-hero__text {
    gap: 12rem;
  }
  .page-info-edu-hero__title {
    font-size: 26rem;
  }
  .page-info-edu-hero__desc {
    font-size: 14rem;
  }
  .page-info-edu-grid {
    grid-template-columns: 1fr;
    gap: 32rem;
  }
  .page-info-edu-card__media {
    border-radius: 16rem;
  }
  .page-info-edu-card__date {
    font-size: 12rem;
    padding: 4rem 8rem;
  }
  .page-info-edu-card__date img {
    width: 16rem;
    height: 16rem;
  }
  .page-info-edu-card__title {
    font-size: 18rem;
  }
  .page-info-edu-foot__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
  }
  .page-info-edu-foot__more {
    justify-content: center;
    width: 100%;
  }
  .page-info-edu-pager {
    align-self: center;
  }
  .page-info-edu-pager__page {
    min-width: 36rem;
    height: 36rem;
    padding: 0 10rem;
  }
  .page-info-edu-pager__next {
    width: 56rem;
    height: 36rem;
  }
}
/* ====================================================================== */
/* Education lesson page — page-specific tweaks (shared layout lives in    */
/* _info-delivery.scss). Import _info-delivery.scss before this file       */
/* in main.scss so the shared rules are loaded once.                       */
/* ====================================================================== */
.page-info-education-page .page-info-hero {
  min-height: 320rem;
}
.page-info-education-page .page-info-hero__title {
  line-height: 1.16;
  font-size: 44rem;
}
.page-info-education-page .page-info-block__text--note {
  background: rgba(244, 169, 0, 0.08);
  border-left: 3rem solid var(--color-accent);
  padding: 16rem 20rem;
  border-radius: 0 12rem 12rem 0;
  color: var(--color-dark);
  opacity: 0.92;
}
/* Gallery (pair + wide) — reusable on any info page                       */
.page-info-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rem;
  width: 100%;
}
.page-info-gallery__item {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16rem;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.04);
}
.page-info-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-info-gallery--wide {
  grid-template-columns: 1fr;
}
.page-info-gallery--wide img {
  width: 100%;
  max-height: 460rem;
  object-fit: cover;
  border-radius: 16rem;
  display: block;
}
@media (max-width: 1023px) {
  .page-info-education-page .page-info-hero__title {
    font-size: 36rem;
  }
  .page-info-gallery {
    gap: 16rem;
  }
  .page-info-gallery--wide img {
    max-height: 360rem;
  }
}
@media (max-width: 599px) {
  .page-info-education-page .page-info-hero__title {
    font-size: 26rem;
  }
  .page-info-gallery {
    grid-template-columns: 1fr;
  }
  .page-info-gallery--wide img {
    max-height: 260rem;
  }
}
/* ====================================================================== */
/* Site header — light variant (for internal pages)                        */
/* ====================================================================== */
.site-header--light {
  color: var(--color-dark);
}
.site-header--light .site-header__logo,
.site-header--light .site-header__contact,
.site-header--light .site-header__nav-link,
.site-header--light .site-header__social,
.site-header--light .site-header__icon,
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
.site-header--light .site-header__inner {
  border-bottom-color: rgba(26, 26, 26, 0.12);
}
.site-header--light .site-header__divider {
  background: rgba(26, 26, 26, 0.16);
}
.site-header--light .site-header__social {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__contact {
  color: var(--color-dark);
}
.site-header--light .site-header__nav-link svg path,
.site-header--light .site-header__icon svg path,
.site-header--light .site-header__icon svg circle,
.site-header--light .site-header__icon svg ellipse {
  stroke: currentColor;
}
.site-header--light .site-header__social svg path {
  fill: currentColor;
}
/* ====================================================================== */
/* Page: Блог                                                              */
/* ====================================================================== */
.page-blog {
  padding-top: 32rem;
  padding-bottom: 80rem;
  background: var(--color-bg);
  color: var(--color-dark);
}
.page-blog__container {
  padding: 0 48rem;
}
.page-blog__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4rem;
  font-size: 14rem;
  line-height: 1.4;
  margin-bottom: 24rem;
}
.page-blog__breadcrumb-link {
  color: rgba(26, 26, 26, 0.32);
  transition: opacity 0.25s ease;
}
.page-blog__breadcrumb-link:hover {
  opacity: 0.7;
}
.page-blog__breadcrumb-sep,
.page-blog__breadcrumb-current {
  color: var(--color-dark);
}
.page-blog__title {
  font-family: "Inter", sans-serif;
  font-size: 188rem;
  line-height: 0.56;
  letter-spacing: -2rem;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-top: 64rem;
  font-weight: 400;
  padding-left: 10rem;
  margin-bottom: 16rem;
}
.page-blog__divider {
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
  margin-bottom: 24rem;
}
.page-blog__divider--pagination {
  margin: 40rem 0;
}
.page-blog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rem;
  margin-bottom: 40rem;
  padding-bottom: 24rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.page-blog__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12rem 24rem;
  border: 1px solid var(--color-accent);
  border-radius: 48rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  /* Visually hide the actual checkbox but keep it accessible */
}
.page-blog__tag-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.page-blog__tag-label {
  pointer-events: none;
}
.page-blog__tag:hover {
  background: rgba(244, 169, 0, 0.12);
}
.page-blog__tag {
  /* Selected state — applies to any checked checkbox inside the label */
}
.page-blog__tag:has(.page-blog__tag-input:checked) {
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 500;
}
.page-blog__tag {
  /* Keyboard focus state */
}
.page-blog__tag:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.page-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rem;
  margin-bottom: 0;
}
.blog-card {
  display: block;
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease;
}
.blog-card__link:hover {
  transform: translateY(-4rem);
}
.blog-card__media {
  position: relative;
  height: 400rem;
  border-radius: 24rem;
  overflow: hidden;
  background: #ececec;
}
.blog-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__meta {
  position: absolute;
  left: 16rem;
  top: 16rem;
  display: flex;
  gap: 8rem;
  z-index: 2;
}
.blog-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding: 4rem 8rem;
  background: var(--color-white);
  border-radius: 40rem;
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  text-decoration: none;
  opacity: 1;
}
.blog-card__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
}
.blog-card__meta-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  min-height: 164rem;
}
.blog-card__title {
  font-family: "Inter", sans-serif;
  font-size: 24rem;
  line-height: 1.32;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
}
.blog-card__excerpt {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin-top: auto;
  padding-top: 8rem;
}
.blog-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 6rem 12rem;
  border-radius: 8rem;
  background: rgba(244, 169, 0, 0.24);
  border: 1px solid rgba(244, 169, 0, 0.24);
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.page-blog__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.page-blog__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50rem;
  gap: 10rem;
  padding: 0 24rem;
  border-radius: 30rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  background: var(--color-white);
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.page-blog__more:hover {
  background: rgba(244, 169, 0, 0.08);
  border-color: var(--color-accent);
}
/* ----------------------- Tablet (≤1023px) ------------------------------- */
@media (max-width: 1023px) {
  .page-blog {
    padding-top: 100rem;
    padding-bottom: 56rem;
  }
  .page-blog__container {
    padding: 0 24rem;
  }
  .page-blog__title {
    font-size: 120rem;
    letter-spacing: -1.5rem;
  }
  .page-blog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32rem;
  }
  .blog-card__media {
    height: 320rem;
  }
}
/* ----------------------- Mobile (≤599px) ------------------------------- */
@media (max-width: 599px) {
  .page-blog {
    padding-top: 90rem;
    padding-bottom: 40rem;
  }
  .page-blog__container {
    padding: 0 20rem;
  }
  .page-blog__title {
    font-size: 72rem;
    letter-spacing: -1rem;
    margin-bottom: 12rem;
  }
  .page-blog__tags {
    gap: 8rem;
    margin-bottom: 24rem;
  }
  .page-blog__tag {
    padding: 10rem 16rem;
    font-size: 13rem;
  }
  .page-blog__grid {
    grid-template-columns: 1fr;
    gap: 24rem;
  }
  .blog-card__media {
    height: 240rem;
  }
  .blog-card__body {
    min-height: 0;
  }
  .blog-card__title {
    font-size: 20rem;
  }
  .page-blog__pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
  }
  .page-blog__more {
    width: 100%;
  }
}
/* ====================================================================== */
/* Page: Страница публикации                                               */
/* ====================================================================== */
.page-blog-post {
  padding-top: 24rem;
  padding-bottom: 80rem;
  background: var(--color-bg);
  color: var(--color-dark);
}
.page-blog-post__container {
  padding: 0 48rem;
}
.page-blog-post__breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem;
  font-size: 14rem;
  line-height: 1.4;
  margin-bottom: 40rem;
}
.page-blog-post__breadcrumb-link {
  color: rgba(26, 26, 26, 0.32);
  transition: opacity 0.25s ease;
}
.page-blog-post__breadcrumb-link:hover {
  opacity: 0.7;
}
.page-blog-post__breadcrumb-sep {
  color: rgba(26, 26, 26, 0.32);
}
.page-blog-post__breadcrumb-current {
  color: var(--color-dark);
}
.page-blog-post__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  max-width: 1212rem;
  margin: 0 auto 40rem;
  text-align: center;
}
.page-blog-post__meta {
  display: flex;
  gap: 8rem;
  justify-content: center;
}
.page-blog-post__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding: 4rem 8rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 40rem;
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  text-decoration: none;
}
.page-blog-post__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
}
.page-blog-post__meta-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.page-blog-post__title {
  font-family: "Inter", sans-serif;
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0;
  max-width: 1100rem;
}
.page-blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  justify-content: center;
}
.page-blog-post__tag {
  display: inline-flex;
  align-items: center;
  padding: 6rem 12rem;
  border-radius: 8rem;
  background: rgba(244, 169, 0, 0.24);
  border: 1px solid rgba(244, 169, 0, 0.24);
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.page-blog-post__hero {
  margin: 0 0 40rem;
  border-radius: 24rem;
  overflow: hidden;
  background: #d9d9d9;
  aspect-ratio: 1824/633;
  width: 100%;
}
.page-blog-post__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-blog-post__article {
  max-width: 1212rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40rem;
  color: var(--color-dark);
}
.page-blog-post__intro {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.page-blog-post__intro p {
  font-family: "Inter", sans-serif;
  font-size: 20rem;
  line-height: 1.32;
  margin: 0;
  color: var(--color-dark);
}
.page-blog-post__section {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.page-blog-post__section p {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.page-blog-post__heading {
  font-family: "Inter", sans-serif;
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0 0 4rem;
}
.page-blog-post__subheading {
  font-family: "Inter", sans-serif;
  font-size: 20rem !important;
  line-height: 1.32 !important;
  font-weight: 400;
  color: var(--color-dark) !important;
  opacity: 1 !important;
  margin: 8rem 0 0 !important;
}
.page-blog-post__list {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-blog-post__list li {
  position: relative;
  padding-left: 20rem;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-blog-post__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.page-blog-post__list--ordered li {
  padding-left: 0;
  display: flex;
  gap: 8rem;
  align-items: flex-start;
}
.page-blog-post__list--ordered li::before {
  display: none;
}
.page-blog-post__list--ordered li strong {
  font-weight: 500;
  flex-shrink: 0;
}
.page-blog-post__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rem;
  margin: 0;
}
.page-blog-post__gallery img {
  width: 100%;
  height: 415rem;
  object-fit: cover;
  border-radius: 24rem;
  background: #d9d9d9;
  display: block;
}
.page-blog-post__banner {
  margin: 0;
}
.page-blog-post__banner img {
  width: 100%;
  height: 516rem;
  object-fit: cover;
  border-radius: 24rem;
  background: #d9d9d9;
  display: block;
}
.page-blog-post__related {
  margin-top: 80rem;
  padding: 0 48rem;
}
.page-blog-post__related-inner {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.page-blog-post__divider {
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
}
.page-blog-post__related-title {
  font-family: "Inter", sans-serif;
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
}
/* Swiper slider --------------------------------------------------- */
.page-blog-post__related-slider {
  width: 100%;
  overflow: hidden;
}
.page-blog-post__related-slider .swiper-wrapper {
  display: flex;
}
.page-blog-post__related-slider .swiper-slide {
  flex-shrink: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
}
.page-blog-post__related-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rem;
  margin-top: 12rem;
}
.page-blog-post__dots {
  display: flex;
  align-items: center;
  gap: 12rem;
  list-style: none;
  padding: 0;
  margin: 0;
  /* Swiper-generated bullets */
}
.page-blog-post__dots .swiper-pagination-bullet {
  width: 10rem;
  height: 10rem;
  border-radius: 0; /* square shape per design */
  background: rgba(26, 26, 26, 0.16);
  opacity: 1;
  margin: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.page-blog-post__dots .swiper-pagination-bullet:hover {
  background: rgba(26, 26, 26, 0.32);
}
.page-blog-post__dots .swiper-pagination-bullet-active {
  background: var(--color-accent);
  transform: scale(1.1);
}
.page-blog-post__arrow {
  width: 56rem;
  height: 56rem;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.page-blog-post__arrow svg {
  width: 24rem;
  height: 24rem;
}
.page-blog-post__arrow:hover {
  background: rgba(244, 169, 0, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.page-blog-post__arrow--next {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.page-blog-post__arrow--next:hover {
  background: #d99700;
  border-color: #d99700;
  color: var(--color-white);
}
/* ----------------------- Tablet (≤1023px) ------------------------------- */
@media (max-width: 1023px) {
  .page-blog-post {
    padding-top: 24rem;
    padding-bottom: 56rem;
  }
  .page-blog-post__container {
    padding: 0 24rem;
  }
  .page-blog-post__title {
    font-size: 40rem;
  }
  .page-blog-post__hero {
    aspect-ratio: 16/9;
  }
  .page-blog-post__heading {
    font-size: 28rem;
  }
  .page-blog-post__gallery img {
    height: 280rem;
  }
  .page-blog-post__banner img {
    height: 360rem;
  }
  .page-blog-post__related {
    padding: 0 24rem;
  }
  .page-blog-post__arrow {
    width: 48rem;
    height: 48rem;
  }
  .page-blog-post__arrow svg {
    width: 22rem;
    height: 22rem;
  }
}
/* ----------------------- Mobile (≤599px) ------------------------------- */
@media (max-width: 599px) {
  .page-blog-post {
    padding-top: 24rem;
    padding-bottom: 40rem;
  }
  .page-blog-post__container {
    padding: 0 20rem;
  }
  .page-blog-post__title {
    font-size: 28rem;
    letter-spacing: -0.5rem;
  }
  .page-blog-post__intro p {
    font-size: 18rem;
  }
  .page-blog-post__heading {
    font-size: 24rem;
  }
  .page-blog-post__hero {
    border-radius: 16rem;
  }
  .page-blog-post__gallery {
    grid-template-columns: 1fr;
    gap: 12rem;
  }
  .page-blog-post__gallery img {
    height: 240rem;
    border-radius: 16rem;
  }
  .page-blog-post__banner img {
    height: 280rem;
    border-radius: 16rem;
  }
  .page-blog-post__related {
    padding: 0 20rem;
    margin-top: 56rem;
  }
  .page-blog-post__related-title {
    font-size: 24rem;
  }
  .page-blog-post__arrow {
    width: 44rem;
    height: 44rem;
  }
  .page-blog-post__arrow svg {
    width: 20rem;
    height: 20rem;
  }
  .page-blog-post__related-controls {
    gap: 16rem;
  }
}
/* ====================================================================== */
/* Search modal + redesigned search results page                          */
/* ====================================================================== */
/* ----------------------------------------------------------------- */
/*  Header transformation when body.is-search-active                  */
/* ----------------------------------------------------------------- */
body.is-search-active {
  overflow: hidden;
  /* Header sits on top of the dim overlay and switches to a white card. */
}
body.is-search-active .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  padding-top: 0;
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: 0 6.9rem 22.3rem rgba(0, 0, 0, 0.04), 0 55rem 178rem rgba(0, 0, 0, 0.08);
  border-bottom-left-radius: 24rem;
  border-bottom-right-radius: 24rem;
  height: 100rem;
}
body.is-search-active .site-header__inner {
  height: 100rem;
  padding: 24rem 48rem;
  border-bottom: none;
  gap: 32rem;
}
body.is-search-active .site-header {
  /* Hide what shouldn't appear in search mode */
}
body.is-search-active .site-header__nav, body.is-search-active .site-header__socials, body.is-search-active .site-header__icon[aria-label*=оиск] {
  display: none !important;
}
body.is-search-active .site-header {
  /* Logo + contacts stay; switch to dark variant */
}
body.is-search-active .site-header__logo .site-header__logo-white {
  display: none;
}
body.is-search-active .site-header__logo .site-header__logo-dark {
  display: block;
}
body.is-search-active .site-header__contact, body.is-search-active .site-header__nav-link, body.is-search-active .site-header__icon, body.is-search-active .site-header__social, body.is-search-active .site-header__burger {
  color: var(--color-dark);
}
body.is-search-active .site-header__divider {
  background: rgba(26, 26, 26, 0.16);
}
body.is-search-active .site-header__icon svg circle, body.is-search-active .site-header__icon svg path, body.is-search-active .site-header__icon svg ellipse {
  stroke: var(--color-dark);
}
body.is-search-active .site-header__right {
  gap: 24rem;
}
body.is-search-active .site-header__icons {
  gap: 20rem;
}
/* The injected search bar inside the header --------------------------- */
.site-header__search {
  display: flex;
  gap: 12rem;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-left: auto;
  margin-right: 32rem;
}
.site-header__search-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12rem;
  flex: 1;
  min-width: 0;
  height: 52rem;
  padding: 0 16rem;
  border-radius: 8rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: rgba(26, 26, 26, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header__search-input:focus-within {
  border-color: var(--color-accent);
  background: var(--color-white);
}
.site-header__search-icon {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
  color: var(--color-dark);
  opacity: 0.48;
  flex-shrink: 0;
}
.site-header__search-icon svg {
  width: 100%;
  height: 100%;
}
.site-header__search-field {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
}
.site-header__search-field::placeholder {
  color: rgba(26, 26, 26, 0.48);
}
.site-header__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 20rem;
  padding: 0;
  border: none;
  border-radius: 4rem;
  background: var(--color-accent);
  color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.site-header__search-clear svg {
  width: 14rem;
  height: 14rem;
}
.site-header__search-clear:hover {
  background: #d99700;
  transform: scale(1.05);
}
.site-header__search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52rem;
  padding: 0 32rem;
  border-radius: 12rem;
  border: none;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: inherit;
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.site-header__search-submit:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
/* ----------------------------------------------------------------- */
/*  Search-modal panel + backdrop                                     */
/* ----------------------------------------------------------------- */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.search-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.search-modal {
  /* Dimmed overlay over the page results behind the panel.
     The panel does not cover the full viewport, so the lower part of
     this backdrop shows the dimmed page beneath. */
}
.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.56);
  border: none;
  padding: 0;
  cursor: pointer;
}
.search-modal__panel {
  position: absolute;
  top: 100rem; /* sits right below header */
  left: 0;
  right: 0;
  max-height: calc(100vh - 100rem - 86rem);
  background: var(--color-white);
  box-shadow: 0 6.9rem 22.3rem rgba(0, 0, 0, 0.04), 0 55rem 178rem rgba(0, 0, 0, 0.08);
  border-bottom-left-radius: 24rem;
  border-bottom-right-radius: 24rem;
  transform: translateY(-12rem);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.search-modal.is-open .search-modal__panel {
  transform: translateY(0);
  opacity: 1;
}
.search-modal__panel-inner {
  display: flex;
  align-items: stretch;
  gap: 32rem;
  padding: 24rem 48rem 40rem;
  max-height: calc(100vh - 100rem - 86rem);
  box-sizing: border-box;
}
.search-modal {
  /* Left side ------------------------------------------------------ */
}
.search-modal__aside {
  width: 274rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.search-modal__h2 {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 20rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
}
.search-modal__tags {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  align-items: flex-start;
}
.search-modal__tag {
  display: inline-flex;
  align-items: center;
  padding: 10rem 12rem;
  border-radius: 8rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: var(--color-white);
  color: rgba(26, 26, 26, 0.88);
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  width: max-content;
  max-width: 100%;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.search-modal__tag:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.search-modal {
  /* Vertical divider ---------------------------------------------- */
}
.search-modal__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(26, 26, 26, 0.12);
}
.search-modal {
  /* Right side ---------------------------------------------------- */
}
.search-modal__results {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.search-modal__state {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32rem;
  width: 100%;
  min-height: 0;
}
.search-modal__state[hidden] {
  display: none;
}
.search-modal {
  /* Category chips row -------------------------------------------- */
}
.search-modal__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 16rem;
}
.search-modal {
  /* Horizontal divider under the chips ---------------------------- */
}
.search-modal__hr {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
}
.search-modal {
  /* Scrollable product area + scroll indicator -------------------- */
}
.search-modal__scrollrow {
  display: flex;
  align-items: stretch;
  gap: 24rem;
  min-height: 0;
  flex: 1;
}
.search-modal__scrollbar {
  flex-shrink: 0;
  align-self: flex-start;
  width: 4rem;
  height: 100rem;
  border-radius: 4rem;
  background: var(--color-dark);
  opacity: 0.24;
}
.search-modal {
  /* Product grid: 3 columns, matching Figma --------------------- */
}
.search-modal__products {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48rem;
  row-gap: 32rem;
  overflow-y: auto;
  padding-right: 4rem;
  scrollbar-width: none;
}
.search-modal__products::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.search-modal {
  /* Show-all outlined button -------------------------------------- */
}
.search-modal__showall {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52rem;
  padding: 16rem 32rem;
  border: 1px solid var(--color-accent);
  border-radius: 12rem;
  background: var(--color-white);
  color: var(--color-accent);
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.16;
  font-weight: 400;
  transition: background 0.25s ease, color 0.25s ease;
}
.search-modal__showall:hover {
  background: var(--color-accent);
  color: var(--color-white);
}
/* Category chip ("Категория: … (12952)") ------------------------- */
.search-cat {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  padding: 12rem;
  border-radius: 12rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: var(--color-white);
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.search-cat__label {
  color: rgba(26, 26, 26, 0.48);
  opacity: 0.88;
}
.search-cat__value {
  color: var(--color-dark);
  opacity: 0.88;
}
.search-cat__count {
  color: rgba(26, 26, 26, 0.48);
}
.search-cat:hover {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.24);
}
/* Search product card (compact horizontal) ----------------------- */
.search-product {
  display: flex;
  gap: 18rem;
  align-items: center;
  color: var(--color-dark);
  transition: opacity 0.2s ease;
}
.search-product:hover {
  opacity: 0.84;
}
.search-product__media {
  position: relative;
  flex-shrink: 0;
  width: 198rem;
  height: 155rem;
  border-radius: 12rem;
  overflow: hidden;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: var(--color-white);
}
.search-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-product__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.search-product__sku {
  font-family: "Inter", sans-serif;
  font-size: 12rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
}
.search-product__info {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.search-product__head {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.search-product__name {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.search-product__stock {
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.72;
  padding-bottom: 6rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.search-product__price {
  display: inline-flex;
  align-items: baseline;
  gap: 12rem;
  font-family: "Suisse Intl", "Inter", sans-serif;
}
.search-product__price-now {
  font-size: 24rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
}
.search-product__price-old {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  opacity: 0.4;
  text-decoration: line-through;
}
.search-product__badge {
  position: absolute;
  top: 6rem;
  left: 6rem;
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  padding: 6rem 12rem;
  border-radius: 8rem;
  color: var(--color-white);
  font-family: "Inter", sans-serif;
  font-size: 12rem;
  line-height: 1.4;
  font-weight: 500;
}
.search-product__badge svg {
  width: 14rem;
  height: 14rem;
  flex-shrink: 0;
}
.search-product__badge--new {
  background: #4faf7a;
}
.search-product__badge--hit {
  background: #d89b3c;
}
.search-product__badge--sale {
  background: #c84d4d;
}
/* Empty state ----------------------------------------------------- */
.search-modal__empty {
  display: flex;
  align-items: flex-start;
  gap: 16rem;
  padding: 12rem 0;
}
.search-modal__empty-icon {
  flex-shrink: 0;
  width: 32rem;
  height: 32rem;
  display: inline-flex;
}
.search-modal__empty-icon svg {
  width: 100%;
  height: 100%;
}
.search-modal__empty-text {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.search-modal__empty-title {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 20rem;
  line-height: 1.16;
  color: var(--color-dark);
}
.search-modal__empty-sub {
  font-family: "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.64;
}
/* ----------------------------------------------------------------- */
/*  Responsive — search modal                                         */
/* ----------------------------------------------------------------- */
@media (max-width: 1279px) {
  .search-modal__panel-inner {
    padding: 20rem 32rem 32rem;
  }
  .search-modal__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32rem;
    row-gap: 24rem;
  }
}
@media (max-width: 1023px) {
  body.is-search-active .site-header {
    height: auto;
  }
  body.is-search-active .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 16rem 24rem;
    gap: 12rem;
  }
  body.is-search-active .site-header__left {
    justify-content: space-between;
  }
  .site-header__search {
    margin: 0;
    width: 100%;
  }
  .site-header__search-submit {
    padding: 0 18rem;
    font-size: 16rem;
  }
  .search-modal__panel {
    top: 160rem;
    max-height: calc(100vh - 160rem - 48rem);
    border-bottom-left-radius: 16rem;
    border-bottom-right-radius: 16rem;
  }
  .search-modal__panel-inner {
    flex-direction: column;
    gap: 24rem;
    padding: 24rem;
    max-height: calc(100vh - 160rem - 48rem);
    overflow-y: auto;
  }
  .search-modal__aside {
    width: 100%;
  }
  .search-modal__tags {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .search-modal__divider {
    width: auto;
    height: 1px;
  }
  /* On stacked layout the whole inner scrolls; the product grid no
     longer needs its own scroll region or scroll indicator. */
  .search-modal__scrollrow {
    flex-direction: column;
  }
  .search-modal__scrollbar {
    display: none;
  }
  .search-modal__products {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16rem;
    overflow: visible;
    padding-right: 0;
  }
}
@media (max-width: 599px) {
  .site-header__search-submit {
    padding: 0 12rem;
    font-size: 14rem;
  }
  .site-header__search-field {
    font-size: 13rem;
  }
  .search-modal__panel-inner {
    padding: 16rem 20rem;
  }
  .search-product__media {
    width: 110rem;
    height: 110rem;
  }
  .search-product__name {
    font-size: 14rem;
  }
  .search-product__price-now {
    font-size: 18rem;
  }
  .search-cat {
    white-space: normal;
  }
}
/* ====================================================================== */
/* Search results landing page (search.html) — products tab               */
/* Reuses .filter-block, .filter-accordion, .product-grid, .product-card, */
/* .pager, .sort-radios from _category.scss (already imported)             */
/* ====================================================================== */
.page-search {
  display: block;
  color: var(--color-text);
  padding-top: 32rem;
  padding-bottom: 80rem;
}
.page-search__container {
  padding: 0 48rem;
}
.page-search {
  /* Breadcrumbs sit directly under the header --------------------- */
}
.page-search__breadcrumbs {
  padding: 0 0 32rem;
}
.page-search {
  /* Head — replaces the hero from category page ------------------- */
}
.page-search__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24rem;
  margin-bottom: 32rem;
}
.page-search__title {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  /* Highlighted query — dimmed, no fill (per Figma) ----------- */
}
.page-search__title .page-search__title-query {
  color: var(--color-dark);
  opacity: 0.56;
}
.page-search {
  /* Body grid mirrors category page ------------------------------- */
}
.page-search__body {
  display: grid;
  grid-template-columns: 378rem 1fr;
  gap: 80rem;
  align-items: flex-start;
}
.page-search__filters {
  display: flex;
  flex-direction: column;
}
.page-search__results {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.page-search__sort {
  display: flex;
  align-items: center;
  gap: 24rem;
  flex-wrap: wrap;
}
.page-search__sort-label {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  font-weight: 500;
}
.page-search__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  margin-top: 24rem;
  flex-wrap: wrap;
}
.page-search__more {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  height: 50rem;
  padding: 0 24rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  background: var(--color-white);
  color: var(--color-dark);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.page-search__more svg {
  width: 16rem;
  height: 16rem;
  transition: transform 0.25s ease;
}
.page-search__more:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.page-search__more:hover svg {
  transform: translateY(2rem);
}
/* ----------------------------------------------------------------- */
/*  Shared Товары / Статьи tab switcher (search results pages)        */
/*  Figma: a single rounded pill holding two segments                 */
/* ----------------------------------------------------------------- */
.search-tabs {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 8rem;
  background: rgba(26, 26, 26, 0.08);
}
.search-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 16rem;
  border-radius: 8rem;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.56;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}
.search-tabs__tab.is-active {
  background: var(--color-accent);
  color: var(--color-white);
  opacity: 1;
}
.search-tabs__tab:hover:not(.is-active) {
  opacity: 0.8;
}
/* ----------------------------------------------------------------- */
/*  No-results state (search-no-results.html) — Figma 685:23937       */
/* ----------------------------------------------------------------- */
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 24rem;
  padding: 120rem 24rem 0;
}
.search-empty__icon {
  width: 70rem;
  height: 70rem;
  color: var(--color-accent);
}
.search-empty__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.search-empty__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  width: 100%;
}
.search-empty__title {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 32rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  /* Query — dimmed, no fill (per Figma) ---------------------- */
}
.search-empty__title .search-empty__query {
  color: var(--color-dark);
  opacity: 0.56;
}
.search-empty__text {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  max-width: 419rem;
  margin: 12rem 0 0;
}
.search-empty__cta {
  margin-top: 0;
}
@media (max-width: 1279px) {
  .page-search__container {
    padding: 0 32rem;
  }
  .page-search__body {
    grid-template-columns: 280rem 1fr;
    gap: 40rem;
  }
  .page-search__title {
    font-size: 40rem;
  }
}
/* Mobile filter-drawer controls — hidden on desktop (filter stays a sidebar) */
.page-search__filter-toggle,
.page-search__filter-close,
.page-search__filter-foot,
.page-search__filter-backdrop {
  display: none;
}
@media (max-width: 1023px) {
  .page-search {
    padding-top: 24rem;
  }
  .page-search__container {
    padding: 0 24rem;
  }
  .page-search__head {
    gap: 16rem;
  }
  .page-search__title {
    font-size: 32rem;
  }
  .page-search__body {
    grid-template-columns: 1fr;
    gap: 32rem;
  }
  .page-search__pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .page-search__more {
    justify-content: center;
  }
  .search-tabs {
    width: 100%;
  }
  .search-tabs__tab {
    flex: 1;
  }
  .search-empty {
    padding-top: 80rem;
  }
  /* ---- Filter becomes a slide-in drawer on mobile (same as category) ---- */
  body.is-filter-open {
    overflow: hidden;
  }
  .page-search__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
    align-self: flex-start;
    min-height: 44rem;
    padding: 11rem 18rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.16);
    border-radius: 30rem;
    font-family: "Inter", sans-serif;
    font-size: 15rem;
    font-weight: 500;
    color: var(--color-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .page-search__filter-toggle:hover {
    border-color: rgba(26, 26, 26, 0.32);
  }
  .page-search__filter-toggle svg {
    width: 20rem;
    height: 20rem;
  }
  .page-search__filters {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: min(420rem, 88vw);
    max-width: 88vw;
    height: 100dvh;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20rem 20rem 0;
    box-shadow: 0 0 60rem rgba(26, 26, 26, 0.25);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.is-filter-open .page-search__filters {
    transform: translateX(0);
  }
  .page-search__filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(26, 26, 26, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  body.is-filter-open .page-search__filter-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .page-search__filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: -8rem;
    width: 44rem;
    height: 44rem;
    background: transparent;
    border: none;
    color: var(--color-dark);
    cursor: pointer;
  }
  .page-search__filter-close svg {
    width: 24rem;
    height: 24rem;
  }
  .page-search__filter-foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin: 24rem -20rem 0;
    padding: 16rem 20rem;
    background: #fff;
    border-top: 1px solid rgba(26, 26, 26, 0.12);
  }
  .page-search__filter-apply {
    width: 100%;
    min-height: 50rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 12rem;
    font-family: "Inter", sans-serif;
    font-size: 16rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .page-search__filter-apply:hover {
    background: #d99700;
  }
}
@media (max-width: 599px) {
  .page-search__container {
    padding: 0 20rem;
  }
  .page-search__title {
    font-size: 26rem;
  }
  .page-search__sort {
    gap: 12rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .search-empty {
    padding-top: 56rem;
  }
  .search-empty__title {
    font-size: 24rem;
  }
  .search-empty__text {
    font-size: 14rem;
  }
}
/* ====================================================================== */
/* Search results — products tab                                            */
/* All product-tab styling is shared with search.html and lives in          */
/* _search.scss (`.page-search`, `.product-grid`, `.pager`, filters).       */
/* This file is intentionally empty as a placeholder; keeping the @import   */
/* in main.scss valid in case page-specific overrides are added later.      */
/* ====================================================================== */
/* ====================================================================== */
/* Search results — articles tab (Figma 685:22803)                          */
/* Reuses .blog-card from _blog.scss, .pager from _category.scss,           */
/* .breadcrumbs from _404.scss and the shared .search-tabs from _search.scss */
/* ====================================================================== */
.page-search-articles {
  display: block;
  color: var(--color-dark);
  padding-top: 32rem;
  padding-bottom: 80rem;
  background: var(--color-bg);
}
.page-search-articles__container {
  padding: 0 48rem;
}
.page-search-articles {
  /* Breadcrumbs sit directly under the header --------------------- */
}
.page-search-articles__breadcrumbs {
  padding: 0 0 32rem;
}
.page-search-articles {
  /* Head — query heading + tabs --------------------------------- */
}
.page-search-articles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24rem;
  margin-bottom: 32rem;
}
.page-search-articles__title {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
}
.page-search-articles {
  /* Highlighted query inside the H1 — dimmed, no fill (per Figma) - */
}
.page-search-articles__query {
  color: var(--color-dark);
  opacity: 0.56;
}
.page-search-articles {
  /* Grid of article cards — 3 columns -------------------------- */
}
.page-search-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80rem 40rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-search-articles {
  /* Pagination row — "Показать еще" + pager -------------------- */
}
.page-search-articles__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  margin-top: 80rem;
  padding-top: 40rem;
  border-top: 1px solid rgba(26, 26, 26, 0.16);
  flex-wrap: wrap;
}
.page-search-articles__more {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  height: 50rem;
  padding: 0 24rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 30rem;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.4;
  background: var(--color-white);
  color: var(--color-dark);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.page-search-articles__more svg {
  width: 16rem;
  height: 16rem;
  transition: transform 0.25s ease;
}
.page-search-articles__more:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.page-search-articles__more:hover svg {
  transform: translateY(2rem);
}
/* Responsive --------------------------------------------------- */
@media (max-width: 1279px) {
  .page-search-articles__container {
    padding: 0 32rem;
  }
  .page-search-articles__title {
    font-size: 40rem;
  }
  .page-search-articles__grid {
    gap: 56rem 32rem;
  }
}
@media (max-width: 1023px) {
  .page-search-articles {
    padding-top: 24rem;
  }
  .page-search-articles__container {
    padding: 0 24rem;
  }
  .page-search-articles__title {
    font-size: 32rem;
  }
  .page-search-articles__head {
    gap: 16rem;
    flex-wrap: wrap;
  }
  .page-search-articles__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40rem 24rem;
  }
  .page-search-articles__pagination {
    margin-top: 56rem;
  }
}
@media (max-width: 599px) {
  .page-search-articles__container {
    padding: 0 20rem;
  }
  .page-search-articles__title {
    font-size: 26rem;
  }
  .page-search-articles__grid {
    grid-template-columns: 1fr;
    gap: 32rem;
  }
  .page-search-articles__pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .page-search-articles__more {
    justify-content: center;
  }
}
/* ====================================================================== */
/* О компании                                                              */
/* ====================================================================== */
.page-about {
  padding-top: 32rem;
  padding-bottom: 0;
  background: var(--color-bg);
  color: var(--color-dark);
}
.page-about .t-yellow {
  color: var(--color-accent);
}
.page-about .t-strong {
  color: var(--color-dark);
}
.page-about .t-soft {
  color: rgba(26, 26, 26, 0.48);
}
.page-about {
  /* Breadcrumbs ----------------------------------------------------- */
}
.page-about__crumbs {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 0 48rem;
  font-size: 14rem;
  line-height: 1.4;
  margin-bottom: 8rem;
}
.page-about__crumbs a {
  color: rgba(26, 26, 26, 0.32);
  transition: opacity 0.25s ease;
}
.page-about__crumbs a:hover {
  opacity: 0.7;
}
.page-about__crumbs-sep {
  color: var(--color-dark);
}
.page-about__crumbs > span:last-child {
  color: var(--color-dark);
}
.page-about {
  /* Section 1: Hero -------------------------------------------------- */
}
.page-about__hero {
  padding: 0 48rem;
}
.page-about__hero-grid {
  position: relative;
  height: 464rem;
  /* two full-width dividers bracket the lower title/text band;
     the glasses image overlaps them */
}
.page-about__hero-image {
  position: absolute;
  top: -60rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.page-about__hero-image img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-about__hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: "Inter", sans-serif;
  font-size: 150rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -4rem;
  color: rgba(26, 26, 26, 0.08);
  pointer-events: none;
  white-space: nowrap;
}
.page-about__hero-title {
  position: absolute;
  left: 0;
  top: 249rem;
  width: 448rem;
  margin: 0;
  z-index: 2;
  font-family: "Inter", sans-serif;
  font-size: 35rem;
  line-height: 1.24;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-dark);
}
.page-about__hero-text {
  position: absolute;
  right: 0;
  top: 264rem;
  width: 449rem;
  margin: 0;
  z-index: 2;
  font-family: "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-about {
  /* Section 2: Intro ------------------------------------------------- */
}
.page-about__intro {
  padding: 0 48rem;
  padding-top: 108rem;
  margin-bottom: -13rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48rem;
}
.page-about__intro-line {
  width: 1px;
  height: 120rem;
  background: rgba(26, 26, 26, 0.12);
  display: block;
}
.page-about__intro-inner {
  width: 1382rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  text-align: center;
}
.page-about__intro-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  opacity: 0.4;
  color: var(--color-dark);
  margin: 0;
}
.page-about__intro-thumbs {
  display: flex;
  gap: 12rem;
}
.page-about__intro-thumb {
  width: 100rem;
  height: 100rem;
  display: block;
  border-radius: 12rem;
  overflow: hidden;
  background: #f1f2f4;
}
.page-about__intro-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about__intro-text {
  font-family: "Inter", sans-serif;
  font-size: 32rem;
  line-height: 1.32;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
}
.page-about {
  /* Section 3: Why ---------------------------------------------------- */
}
.page-about__why {
  background: #f1f2f4;
  border-radius: 24rem;
  padding: 100rem 48rem;
  margin-top: 12rem;
}
.page-about__why-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rem;
}
.page-about__why-head {
  display: flex;
  align-items: center;
  gap: 24rem;
}
.page-about__why-bar {
  display: block;
  width: 8rem;
  height: 184rem;
  flex-shrink: 0;
}
.page-about__why-bar img {
  width: 8rem;
  height: 184rem;
  display: block;
}
.page-about__why-title {
  font-family: "Inter", sans-serif;
  font-size: 48rem;
  line-height: 1.24;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-dark);
  width: 464rem;
  margin: 0;
}
.page-about__why-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.page-about__why-card {
  position: relative;
  width: 456rem;
  height: 456rem;
  flex-shrink: 0;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 32rem;
}
.page-about__why-num {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.64);
}
.page-about__why-body {
  width: 280rem;
  margin-top: 91rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}
.page-about__why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
}
.page-about__why-icon img {
  width: 40rem;
  height: 40rem;
  display: block;
}
.page-about__why-card h3 {
  font-family: "Inter", sans-serif;
  font-size: 24rem;
  line-height: 1.32;
  font-weight: 400;
  margin: 0 0 12rem;
  color: var(--color-dark);
}
.page-about__why-card p {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.page-about {
  /* Section 4: Partner ---------------------------------------------- */
}
.page-about__partner {
  padding: 96rem 48rem 0;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.page-about__partner-card {
  position: relative;
  height: 474rem;
  background: url("data:image/svg+xml,%3csvg%20width='1824'%20height='474'%20viewBox='0%200%201824%20474'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20opacity='0.12'%20x1='-4.37114e-08'%20y1='140.5'%20x2='397'%20y2='140.5'%20stroke='%231A1A1A'/%3e%3cline%20opacity='0.12'%20x1='-4.37114e-08'%20y1='308.5'%20x2='330'%20y2='308.5'%20stroke='%231A1A1A'/%3e%3cline%20opacity='0.12'%20x1='87'%20y1='224.5'%20x2='652'%20y2='224.5'%20stroke='%231A1A1A'/%3e%3cline%20opacity='0.12'%20x1='652.5'%20y1='-2.18557e-08'%20x2='652.5'%20y2='474'%20stroke='%231A1A1A'/%3e%3cline%20opacity='0.12'%20x1='1172.5'%20y1='-2.18557e-08'%20x2='1172.5'%20y2='474'%20stroke='%231A1A1A'/%3e%3cpath%20opacity='0.12'%20d='M1172%20474C1172%20330.406%201055.59%20214%20912%20214C768.406%20214%20652%20330.406%20652%20474'%20stroke='%231A1A1A'/%3e%3c/svg%3e") no-repeat center center, linear-gradient(0.95deg, #f1f2f4 3%, #e1e2e4 97%);
  border-radius: 24rem;
  overflow: visible;
}
.page-about__partner-image {
  position: absolute;
  top: -40rem;
  left: 652rem;
  width: 511rem;
  height: 514rem;
  pointer-events: none;
  z-index: 1;
}
.page-about__partner-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-about__partner-text {
  position: absolute;
  left: 80rem;
  top: 72rem;
  width: 534rem;
  z-index: 2;
}
.page-about__partner-text h2 {
  font-family: "Inter", sans-serif;
  font-size: 72rem;
  line-height: 1.16;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 12rem;
  color: var(--color-dark);
}
.page-about__partner-text p {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.page-about__partner-form {
  position: absolute;
  right: 66rem;
  top: 72rem;
  width: 520rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.page-about__field {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  padding: 0 16rem;
}
.page-about__field input {
  width: 100%;
  height: 54rem;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16rem;
  color: var(--color-dark);
}
.page-about__field input::placeholder {
  opacity: 0.48;
  color: var(--color-dark);
}
.page-about__field-req {
  position: absolute;
  top: 50%;
  right: 16rem;
  transform: translateY(-50%);
  opacity: 0.48;
  color: var(--color-dark);
  font-size: 16rem;
}
.page-about__check {
  display: grid;
  grid-template-columns: 14rem 1fr;
  align-items: start;
  gap: 12rem;
  cursor: pointer;
  margin-top: 16rem;
}
.page-about__check input {
  display: none;
}
.page-about__check input:checked + .page-about__check-box::after {
  opacity: 1;
}
.page-about__check-box {
  position: relative;
  width: 14rem;
  height: 14rem;
  border: 1px solid rgba(26, 26, 26, 0.24);
  border-radius: 4rem;
  background: rgba(26, 26, 26, 0.06);
  margin-top: 2rem;
}
.page-about__check-box::after {
  content: "";
  position: absolute;
  inset: 2rem;
  background: var(--color-dark);
  border-radius: 2rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page-about__check span:last-child {
  font-family: "Inter", sans-serif;
  font-size: 12rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.84;
}
.page-about__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  width: 100%;
  padding: 16rem 20rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12rem;
  font-family: "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.16;
  margin-top: 12rem;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.page-about__btn:hover {
  transform: translateY(-2rem);
  opacity: 0.92;
}
.page-about__btn svg {
  width: 24rem;
  height: 24rem;
}
.page-about__brands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-about__brands li {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 16rem;
  height: 148rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}
.page-about__brands li:hover {
  background: #f6f6f6;
}
.page-about__brands li img {
  max-height: 84rem;
  max-width: 70%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.page-about__brands li:first-child img {
  opacity: 0.56;
}
.page-about {
  /* Section 5: Documents -------------------------------------------- */
}
.page-about__docs {
  padding: 120rem 48rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32rem;
}
.page-about__docs-head {
  width: 906rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.page-about__docs-head h2 {
  font-family: "Inter", sans-serif;
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
}
.page-about__docs-head p {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
  max-width: 475rem;
}
.page-about__docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.page-about {
  /* Each document is an accordion: a clickable head + a collapsible panel. */
}
.page-about__doc {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  display: flex;
  flex-direction: column;
}
.page-about__doc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24rem;
  padding: 24rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-dark);
  font: inherit;
  transition: color 0.25s ease;
}
.page-about__doc-head:hover .page-about__doc-name {
  color: var(--color-accent);
}
.page-about__doc-num {
  /* Left gutter: pushes the title into the right 906rem column so it lines
     up with the section heading/intro and the open-state description. */
  flex: 0 0 calc(100% - 930rem);
  min-width: 0;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.64);
}
.page-about__doc-name {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 24rem;
  line-height: 1.32;
  font-weight: 400;
  transition: color 0.25s ease;
}
.page-about__doc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
  color: var(--color-dark);
  transition: transform 0.3s ease, color 0.25s ease;
}
.page-about__doc-arrow svg {
  width: 24rem;
  height: 24rem;
}
.page-about {
  /* Collapsible panel — animates open via grid-template-rows 0fr → 1fr. */
}
.page-about__doc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.page-about__doc-panel-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 318rem;
}
.page-about {
  /* Open state */
}
.page-about__doc--open .page-about__doc-name {
  color: var(--color-accent);
}
.page-about__doc--open .page-about__doc-arrow {
  transform: rotate(90deg);
}
.page-about__doc--open .page-about__doc-panel {
  grid-template-rows: 1fr;
}
.page-about__doc--open .page-about__doc-panel-inner {
  padding-bottom: 0;
}
.page-about__doc-preview {
  width: 294rem;
  height: 246rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 12rem 12rem 0 0;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.page-about__doc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.page-about__doc-content {
  flex: 0 0 906rem;
  width: 906rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.page-about__doc-desc {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  max-width: 475rem;
  margin: 0;
}
.page-about__doc-view {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  padding: 8rem 12rem;
  background: #f1f2f4;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 50rem;
  color: var(--color-dark);
  font-family: "Inter", sans-serif;
  font-size: 14rem;
  cursor: pointer;
  transition: background 0.25s ease;
}
.page-about__doc-view:hover {
  background: #e2e3e5;
}
.page-about__doc-view svg {
  width: 24rem;
  height: 24rem;
}
.page-about {
  /* Section 6: Approach --------------------------------------------- */
}
.page-about__approach {
  padding: 80rem 48rem;
}
.page-about__approach-grid {
  position: relative;
  display: grid;
  grid-template-columns: 447rem 1fr 447rem;
  grid-template-rows: 1fr 1fr;
  column-gap: 48rem;
  row-gap: 96rem;
  background: url("data:image/svg+xml,%3csvg%20width='1824'%20height='652'%20viewBox='0%200%201824%20652'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='4.37114e-08'%20y1='325.497'%20x2='1824'%20y2='325.497'%20stroke='%23F4A900'/%3e%3cline%20x1='616.353'%20y1='23.643'%20x2='1220.35'%20y2='627.643'%20stroke='%23F4A900'/%3e%3cpath%20d='M912%200.5C1091.21%200.5%201236.5%20146.23%201236.5%20326C1236.5%20505.77%201091.21%20651.5%20912%20651.5C732.785%20651.5%20587.5%20505.77%20587.5%20326C587.5%20146.23%20732.785%200.5%20912%200.5Z'%20fill='white'%20stroke='%23F4A900'/%3e%3cellipse%20cx='912'%20cy='326'%20rx='285'%20ry='286'%20fill='white'/%3e%3cpath%20d='M912%2040.5C1069.12%2040.5%201196.5%20168.321%201196.5%20326C1196.5%20483.679%201069.12%20611.5%20912%20611.5C754.877%20611.5%20627.5%20483.679%20627.5%20326C627.5%20168.321%20754.877%2040.5%20912%2040.5Z'%20stroke='%231A1A1A'%20stroke-opacity='0.12'/%3e%3ccircle%20cx='685'%20cy='93'%20r='4'%20fill='%23F4A900'/%3e%3ccircle%20cx='1145'%20cy='552'%20r='4'%20fill='%23F4A900'/%3e%3ccircle%20cx='1236'%20cy='326'%20r='4'%20fill='%23F4A900'/%3e%3ccircle%20cx='587'%20cy='326'%20r='4'%20fill='%23F4A900'/%3e%3c/svg%3e") center no-repeat;
  background-size: cover;
  min-height: 652rem;
}
.page-about__approach-item {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.page-about__approach-item--01 {
  grid-column: 1;
  grid-row: 1;
}
.page-about__approach-item--02 {
  grid-column: 1;
  grid-row: 2;
}
.page-about__approach-item--03 {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  align-items: flex-end;
}
.page-about__approach-item--04 {
  grid-column: 3;
  grid-row: 2;
  text-align: right;
  align-items: flex-end;
}
.page-about__approach-num {
  font-family: "Inter", sans-serif;
  font-size: 72rem;
  line-height: 1.16;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-accent);
}
.page-about__approach-itembody {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.page-about__approach-itembody h3 {
  font-family: "Inter", sans-serif;
  font-size: 24rem;
  line-height: 1.32;
  font-weight: 400;
  margin: 0;
  color: var(--color-dark);
}
.page-about__approach-itembody p {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.page-about__approach-center {
  grid-column: 2;
  grid-row: 1/span 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.page-about__approach-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 854rem;
  height: 1px;
  background: rgba(26, 26, 26, 0.16);
  transform: translate(-50%, -50%) rotate(45deg);
}
.page-about__approach-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.page-about__approach-ring--outer {
  width: 650rem;
  height: 650rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
}
.page-about__approach-ring--inner {
  width: 570rem;
  height: 570rem;
  border: 1px solid var(--color-accent);
}
.page-about__approach-dot {
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: var(--color-accent);
  border-radius: 50%;
  /* dots sit on the outer ring: top-left & bottom-right on the 45° line,
     plus left (9 o'clock) and right (3 o'clock) */
}
.page-about__approach-dot--tl {
  top: calc(50% - 240rem);
  left: calc(50% - 234rem);
}
.page-about__approach-dot--br {
  top: calc(50% + 223rem);
  left: calc(50% + 225rem);
}
.page-about__approach-dot--l {
  top: 50%;
  left: calc(50% - 329rem);
  transform: translateY(-50%);
}
.page-about__approach-dot--r {
  top: 50%;
  left: calc(50% + 316rem);
  transform: translateY(-50%);
}
.page-about__approach-title {
  font-family: "Inter", sans-serif;
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  text-align: center;
  color: var(--color-dark);
  margin: 0;
  position: relative;
  z-index: 2;
}
.page-about {
  /* Section 7: Banner ----------------------------------------------- */
}
.page-about__banner {
  padding: 0 48rem 0;
  position: relative;
  z-index: 1;
}
.page-about__banner-frame {
  position: relative;
  height: 586rem;
  border-radius: 24rem;
  overflow: hidden;
}
.page-about__banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-about__banner-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 360rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  mix-blend-mode: overlay;
  letter-spacing: -8rem;
  pointer-events: none;
}
.page-about__banner-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 196rem;
  height: 196rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
}
.page-about__banner-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(0, 0, 0);
  transition: transform 0.35s ease;
}
.page-about__banner-play-circle {
  position: relative;
  width: 164rem;
  height: 164rem;
  padding-bottom: 50rem;
  background: #1a1a1a;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-about__banner-play-circle svg {
  width: 51rem;
  height: 62rem;
  margin-left: 8rem;
}
.page-about__banner-play-label {
  position: absolute;
  bottom: 42rem;
  left: 50%;
  transform: translateX(-50%);
  width: 99rem;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.1;
  color: #fff;
  text-align: center;
}
.page-about__banner-play:hover .page-about__banner-play-ring {
  transform: scale(1.06);
}
/* Tablet -------------------------------------------------------------- */
@media (max-width: 1279px) {
  .page-about__hero-grid {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24rem;
    padding: 24rem 0 32rem;
  }
  .page-about__hero-grid::after {
    display: none;
  }
  .page-about__hero-image {
    position: static;
    transform: none;
    width: 100%;
    height: 320rem;
    order: -1;
  }
  .page-about__hero-watermark {
    font-size: 120rem;
  }
  .page-about__hero-title {
    position: static;
    width: 100%;
    font-size: 32rem;
  }
  .page-about__hero-text {
    position: static;
    width: 100%;
  }
  .page-about__intro-inner {
    width: 100%;
  }
  .page-about__intro-text {
    font-size: 22rem;
  }
  .page-about__why {
    padding: 64rem 24rem;
  }
  .page-about__why-title {
    font-size: 36rem;
    width: auto;
  }
  .page-about__why-bar {
    height: 120rem;
  }
  .page-about__why-bar img {
    height: 120rem;
  }
  .page-about__why-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24rem;
  }
  .page-about__why-card {
    width: 330rem;
    height: 330rem;
    padding-top: 28rem;
  }
  .page-about__why-body {
    margin-top: 32rem;
    width: 240rem;
    gap: 12rem;
  }
  .page-about__why-card h3 {
    font-size: 22rem;
    margin-bottom: 8rem;
  }
  .page-about__why-card p {
    font-size: 15rem;
  }
  .page-about__partner {
    padding: 64rem 24rem 0;
  }
  .page-about {
    /* Unstack the absolute desktop layout into a clean vertical card:
       image (visual) → heading/text → form. */
  }
  .page-about__partner-card {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32rem;
    padding: 48rem 40rem;
    background-size: cover, cover;
  }
  .page-about__partner-image {
    position: static;
    order: -1;
    width: 100%;
    max-width: 420rem;
    height: auto;
    margin: 0 auto;
  }
  .page-about__partner-image img {
    height: auto;
  }
  .page-about__partner-text {
    position: static;
    width: 100%;
  }
  .page-about__partner-text h2 {
    font-size: 56rem;
  }
  .page-about__partner-form {
    position: static;
    width: 100%;
  }
  .page-about__brands {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-about__docs {
    padding: 80rem 24rem 0;
    align-items: stretch;
  }
  .page-about__docs-head {
    width: 100%;
  }
  .page-about__docs-head h2 {
    font-size: 36rem;
  }
  .page-about__doc-num {
    flex: 0 0 auto;
  }
  .page-about__doc-panel-inner {
    gap: 32rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .page-about__doc-content {
    width: 100%;
    flex: 1 1 320rem;
  }
  .page-about__approach-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 32rem;
    min-height: 0;
  }
  .page-about__approach-item--01 {
    grid-column: 1;
    grid-row: 1;
  }
  .page-about__approach-item--02 {
    grid-column: 1;
    grid-row: 2;
  }
  .page-about__approach-item--03 {
    grid-column: 1;
    grid-row: 4;
    text-align: left;
    align-items: flex-start;
  }
  .page-about__approach-item--04 {
    grid-column: 1;
    grid-row: 5;
    text-align: left;
    align-items: flex-start;
  }
  .page-about__approach-center {
    grid-column: 1;
    grid-row: 3;
    height: 360rem;
  }
  .page-about__approach-line {
    width: 480rem;
  }
  .page-about__approach-ring--outer {
    width: 360rem;
    height: 360rem;
  }
  .page-about__approach-ring--inner {
    width: 300rem;
    height: 300rem;
  }
  .page-about__approach-dot--tl {
    top: calc(50% - 135rem);
    left: calc(50% - 130rem);
  }
  .page-about__approach-dot--br {
    top: calc(50% + 122rem);
    left: calc(50% + 122rem);
  }
  .page-about__approach-dot--l {
    top: 50%;
    left: calc(50% - 184rem);
  }
  .page-about__approach-dot--r {
    top: 50%;
    left: calc(50% + 176rem);
  }
  .page-about__approach-title {
    font-size: 32rem;
  }
  .page-about__banner {
    padding: 0 24rem;
  }
  .page-about__banner-frame {
    height: 420rem;
  }
  .page-about__banner-text {
    font-size: 220rem;
  }
}
@media (max-width: 1024px) {
  .page-account__divider {
    display: none;
  }
  .page-account__inner {
    gap: 0;
  }
  .page-account__breadcrumbs {
    margin-bottom: 15rem;
  }
}
/* Mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-about__doc-content {
    padding-bottom: 30rem;
  }
  .page-about__approach-grid {
    background: none;
  }
  .page-about__banner-image {
    display: none;
  }
  .page-about {
    padding-top: 30rem;
  }
  .page-about__crumbs {
    padding: 0 16rem;
  }
  .page-about__hero {
    padding: 0 16rem;
  }
  .page-about__hero-title h1, .page-about__hero-title {
    font-size: 28rem;
  }
  .page-about__hero-image {
    height: 240rem;
  }
  .page-about__hero-watermark {
    font-size: 72rem;
    letter-spacing: -2rem;
  }
  .page-about__intro {
    padding: 0 16rem;
  }
  .page-about__intro-line {
    height: 64rem;
  }
  .page-about__intro-text {
    font-size: 18rem;
  }
  .page-about__why {
    padding: 56rem 16rem;
  }
  .page-about__why-title {
    font-size: 26rem;
  }
  .page-about__why-bar {
    height: 80rem;
  }
  .page-about__why-bar img {
    height: 80rem;
  }
  .page-about__why-grid {
    flex-direction: column;
    align-items: center;
  }
  .page-about__why-card {
    width: 100%;
    max-width: 360rem;
    height: auto;
    border-radius: 24rem;
    padding: 32rem 24rem;
  }
  .page-about__why-body {
    margin-top: 24rem;
  }
  .page-about__partner {
    padding: 40rem 16rem 0;
  }
  .page-about__partner-card {
    padding: 32rem 20rem;
    gap: 24rem;
  }
  .page-about__partner-image {
    max-width: 300rem;
  }
  .page-about__partner-text h2 {
    font-size: 40rem;
  }
  .page-about__brands {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-about__brands li {
    height: 96rem;
  }
  .page-about__docs {
    padding: 56rem 16rem 0;
  }
  .page-about__docs-head h2 {
    font-size: 28rem;
  }
  .page-about__doc-name {
    font-size: 18rem;
  }
  .page-about__doc-preview {
    width: 100%;
    height: 240rem;
  }
  .page-about__approach {
    padding: 56rem 16rem;
    padding-bottom: 30rem;
  }
  .page-about__approach-num {
    font-size: 56rem;
  }
  .page-about__approach-center {
    height: 200rem;
  }
  .page-about__approach-line {
    width: 360rem;
  }
  .page-about__approach-ring--outer {
    width: 280rem;
    height: 280rem;
  }
  .page-about__approach-ring--inner {
    width: 220rem;
    height: 220rem;
  }
  .page-about__approach-dot--tl {
    top: calc(50% - 105rem);
    left: calc(50% - 100rem);
  }
  .page-about__approach-dot--br {
    top: calc(50% + 92rem);
    left: calc(50% + 92rem);
  }
  .page-about__approach-dot--l {
    top: 50%;
    left: calc(50% - 144rem);
  }
  .page-about__approach-dot--r {
    top: 50%;
    left: calc(50% + 136rem);
  }
  .page-about__approach-title {
    font-size: 28rem;
  }
  .page-about__banner {
    padding: 0 16rem;
  }
  .page-about__banner-frame {
    height: 320rem;
  }
  .page-about__banner-text {
    font-size: 140rem;
  }
  .page-about__banner-play {
    width: 232rem;
    height: 232rem;
  }
  .page-about__banner-play-circle {
    width: 208rem;
    height: 208rem;
  }
  .page-about__banner-play-circle svg {
    width: 54rem;
    height: 51rem;
  }
  .page-about__banner-play-label {
    bottom: 29rem;
    font-size: 13rem;
  }
  .error-screen__content {
    padding-left: 15rem;
    padding-right: 15rem;
  }
  .page-account__divider {
    display: none;
  }
  .page-account__inner {
    gap: 0;
  }
  .page-account__breadcrumbs {
    margin-bottom: 10rem;
  }
  .address-card {
    flex-wrap: wrap;
  }
  .address-card__main {
    width: 100%;
  }
  .address-card__action {
    width: 49%;
  }
  .address-form__row--3 {
    display: flex;
    flex-direction: column;
  }
  .page-account-favorites .favorites-grid--account {
    grid-template-columns: repeat(1, 1fr);
  }
  .order-row__head-info p {
    border: none;
  }
  .order-row__head {
    justify-content: center;
  }
  .order-row__body {
    padding: 10rem;
    border-radius: 12rem;
  }
  .order-card__meta-row {
    align-items: center;
  }
  .page-blog {
    padding-top: 30px;
  }
  .page-contacts {
    padding-top: 30px;
  }
}
.page-contacts {
  padding-top: 100rem;
  padding-bottom: 120rem;
  background: var(--color-bg);
  color: var(--color-dark);
}
.page-contacts__container {
  padding: 0 48rem;
  max-width: 1920rem;
  margin: 0 auto;
}
.page-contacts__breadcrumbs {
  display: flex;
  gap: 6rem;
  font-size: 14rem;
  line-height: 1.4;
  margin-bottom: 32rem;
}
.page-contacts__breadcrumbs a {
  color: rgba(26, 26, 26, 0.32);
  transition: opacity 0.25s ease;
}
.page-contacts__breadcrumbs a:hover {
  opacity: 0.7;
}
.page-contacts__breadcrumbs span {
  color: var(--color-dark);
}
.page-contacts__title {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 188rem;
  line-height: 0.06;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 130rem;
  text-align: center;
  margin-bottom: 64rem;
  letter-spacing: -2rem;
}
.page-contacts__main {
  display: grid;
  grid-template-columns: 872rem 1fr;
  gap: 44rem;
  align-items: start;
  border-top: 1rem solid rgba(26, 26, 26, 0.12);
}
.page-contacts {
  /* ---------------- FORM CARD ---------------- */
}
.page-contacts__form-card {
  background: #f1f2f4;
  border-radius: 24rem;
  padding: 40rem;
  width: 100%;
  max-width: 872rem;
  /* Sticky form sidebar — stays in view while the taller info column
     scrolls past (per the note in the Figma macet). The header is
     position:absolute and scrolls away, so a small top offset is enough. */
  position: sticky;
  top: 24rem;
  align-self: start;
}
.page-contacts__form-head {
  margin-bottom: 16rem;
}
.page-contacts__form-title {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 40rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 12rem;
}
.page-contacts__form-lead {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-contacts__form {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.page-contacts__form-card {
  margin-top: 64rem;
}
.page-contacts__form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
}
.page-contacts__form-col {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.page-contacts__input {
  position: relative;
  background: #fff;
  border: 1rem solid rgba(26, 26, 26, 0.12);
  border-radius: 8rem;
  padding: 16rem;
}
.page-contacts__input input,
.page-contacts__input textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  padding-right: 16rem;
  resize: none;
}
.page-contacts__input input::placeholder,
.page-contacts__input textarea::placeholder {
  color: rgba(26, 26, 26, 0.48);
}
.page-contacts__input--textarea {
  align-self: stretch;
}
.page-contacts__input--textarea textarea {
  min-height: 100%;
  height: 100%;
}
.page-contacts__input-required {
  position: absolute;
  right: 16rem;
  top: 16rem;
  color: rgba(26, 26, 26, 0.48);
  font-size: 16rem;
  line-height: 1.24;
}
.page-contacts__agree {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
  cursor: pointer;
  font-size: 13rem;
  line-height: 1.4;
  color: var(--color-dark);
  margin-top: 12rem;
  user-select: none;
}
.page-contacts__agree-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-contacts__agree-input:focus-visible + .page-contacts__agree-box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2rem;
}
.page-contacts__agree-box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 20rem;
  border: 1.5rem solid rgba(26, 26, 26, 0.28);
  border-radius: 6rem;
  background: var(--color-white);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  margin-top: 1rem;
}
.page-contacts__agree-box svg {
  width: 14rem;
  height: 10rem;
  color: var(--color-white);
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-contacts__agree:hover .page-contacts__agree-box {
  border-color: var(--color-accent);
}
.page-contacts__agree-input:checked + .page-contacts__agree-box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.page-contacts__agree-input:checked + .page-contacts__agree-box svg {
  stroke-dashoffset: 0;
}
.page-contacts__agree:active .page-contacts__agree-box {
  transform: scale(0.94);
}
.page-contacts__agree-text {
  flex: 1;
  opacity: 0.84;
}
.page-contacts__agree-text a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2rem;
  transition: color 0.2s ease;
}
.page-contacts__agree-text a:hover {
  color: var(--color-accent);
}
.page-contacts__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  width: max-content;
  padding: 16rem 20rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 12rem;
  border: 0;
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.16;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
  margin-top: 8rem;
}
.page-contacts__submit:hover {
  opacity: 0.92;
  transform: translateY(-2rem);
}
.page-contacts__submit svg {
  width: 24rem;
  height: 24rem;
}
.page-contacts {
  /* ---------------- INFO COLUMN ---------------- */
}
.page-contacts__info {
  display: flex;
  flex-direction: column;
  gap: 64rem;
  width: 100%;
  max-width: 919rem;
  padding-bottom: 80rem;
  padding-top: 56rem;
  padding-left: 40rem;
  border-left: 1px solid rgba(26, 26, 26, 0.12);
}
.page-contacts__info-block {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.page-contacts__info-label {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.56;
}
.page-contacts__info-big {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 40rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  word-break: break-word;
}
.page-contacts__info-big--link {
  text-decoration: underline;
  text-underline-offset: 4rem;
  transition: opacity 0.25s ease;
}
.page-contacts__info-big--link:hover {
  opacity: 0.75;
}
.page-contacts__map-link {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
  margin-top: 16rem;
  color: var(--color-dark);
  text-decoration: none;
}
.page-contacts__map-link-icon {
  transition: opacity 0.25s ease;
}
.page-contacts__map-link-icon svg {
  width: 40rem;
  height: 40rem;
}
.page-contacts__map-link span:last-child {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 20rem;
  line-height: 1.32;
  opacity: 0.88;
}
.page-contacts__map-link:hover .page-contacts__map-link-icon {
  opacity: 0.85;
}
.page-contacts__socials {
  display: flex;
  gap: 12rem;
  flex-wrap: wrap;
  margin-top: 8rem;
}
.page-contacts__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
  border: 1rem solid var(--color-dark);
  border-radius: 12rem;
  color: var(--color-dark);
  transition: background 0.25s ease, color 0.25s ease;
}
.page-contacts__social svg {
  width: 24rem;
  height: 24rem;
}
.page-contacts__social:hover {
  background: var(--color-dark);
  color: #fff;
}
.page-contacts__legal-name {
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 20rem;
  line-height: 1.32;
  color: var(--color-dark);
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.page-contacts__legal-row {
  display: flex;
  gap: 12rem;
  align-items: flex-start;
}
.page-contacts__legal-cell {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}
.page-contacts__legal-cell-label {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-contacts__legal-cell-value {
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
}
.page-contacts__legal-divider {
  width: 1rem;
  align-self: stretch;
  background: rgba(26, 26, 26, 0.12);
}
.page-contacts__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  max-width: 719rem;
  width: 100%;
  padding: 16rem 20rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 12rem;
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.16;
  margin-top: 16rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}
.page-contacts__download:hover {
  opacity: 0.92;
  transform: translateY(-2rem);
}
.page-contacts {
  /* ---------------- MAP ---------------- */
}
.page-contacts__map {
  position: relative;
  border-radius: 24rem;
  overflow: hidden;
  border: 1rem solid rgba(26, 26, 26, 0.12);
  height: 540rem;
}
.page-contacts__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.page-contacts__map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78rem;
  height: 94rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 94'><path d='M39 0C17.5 0 0 17 0 38c0 26 39 56 39 56s39-30 39-56C78 17 60.5 0 39 0z' fill='%231a1a1a'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.page-contacts__map-pin img {
  width: 46rem;
  height: auto;
  margin-bottom: 18rem;
  filter: brightness(0) invert(1);
}
/* ---------------- 1023px ---------------- */
@media (max-width: 1023px) {
  .page-contacts {
    padding-top: 80rem;
  }
  .page-contacts__container {
    padding: 0 24rem;
  }
  .page-contacts__title {
    font-size: 96rem;
    margin-bottom: 40rem;
  }
  .page-contacts__main {
    grid-template-columns: 1fr;
    gap: 48rem;
    min-width: 0;
  }
  .page-contacts {
    /* Single-column layout on tablet/mobile — drop the sticky behaviour. */
  }
  .page-contacts__form-card {
    max-width: none;
    padding: 32rem 24rem;
    min-width: 0;
    position: static;
  }
  .page-contacts__form-title {
    font-size: 32rem;
  }
  .page-contacts__form-fields {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .page-contacts__form-field, .page-contacts__form-fields input, .page-contacts__form-fields textarea, .page-contacts__form-fields select {
    min-width: 0;
    width: 100%;
  }
  .page-contacts__info {
    max-width: none;
    gap: 40rem;
    min-width: 0;
  }
  .page-contacts__info-big {
    font-size: 28rem;
  }
  .page-contacts__legal-row {
    gap: 8rem;
  }
  .page-contacts__legal-divider {
    display: none;
  }
  .page-contacts__legal-cell {
    flex: 1 1 100%;
  }
  .page-contacts__map {
    height: 400rem;
  }
}
/* ---------------- 599px ---------------- */
@media (max-width: 599px) {
  .page-contacts__title {
    margin-top: 80rem;
  }
  .page-contacts {
    padding-top: 30rem;
    /* The oversized display heading bleeds a few px past the viewport on
       narrow phones; clip the horizontal overflow (no real content is wider). */
    overflow-x: clip;
  }
  .page-contacts__container {
    padding: 0 16rem;
  }
  .page-contacts__title {
    font-size: 56rem;
    letter-spacing: -1rem;
    margin-bottom: 24rem;
  }
  .page-contacts__form-card {
    padding: 24rem 16rem;
    border-radius: 16rem;
  }
  .page-contacts__form-title {
    font-size: 26rem;
  }
  .page-contacts__info-big {
    font-size: 22rem;
  }
  .page-contacts__info {
    gap: 32rem;
    padding-left: 0;
    padding-top: 0;
    border: none;
  }
  .page-contacts__map {
    height: 320rem;
  }
  .page-contacts__legal-row {
    flex-direction: column;
  }
}
/* =================================================================
   Favorites — guest (no sidebar) — node 565:60392
   Uses .product-card from _category.scss for the items.
   ================================================================= */
.page-favorites {
  padding-top: 0;
  background: var(--color-white);
  color: var(--color-dark);
}
.page-favorites__inner {
  padding: 32rem 48rem 80rem;
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
.page-favorites__breadcrumbs {
  font-size: 14rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
}
.page-favorites__breadcrumbs a {
  color: rgba(26, 26, 26, 0.32);
  transition: color 0.2s ease;
}
.page-favorites__breadcrumbs a:hover {
  color: var(--color-dark);
}
.page-favorites__breadcrumbs span {
  color: var(--color-dark);
}
.page-favorites__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
}
.page-favorites__empty-title {
  color: var(--Black, #1A1A1A);
  text-align: center;
  font-size: 32rem;
  font-style: normal;
  margin-bottom: -12rem;
  font-weight: 400;
  line-height: 116%; /* 37.12rem */
}
.page-favorites__empty-subtitle {
  color: var(--Black, #1A1A1A);
  text-align: center;
  font-size: 16rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4rem */
}
.page-favorites__empty-cta {
  opacity: 1;
  align-items: center;
  padding: 17rem 32rem;
  width: auto;
}
.page-favorites__empty-cta:hover {
  transform: none !important;
}
.page-favorites__empty-cta i {
  display: flex;
  align-items: center;
}
.page-favorites__empty-cta i svg {
  width: 24rem;
}
.page-favorites__empty-cta {
  font-size: 18rem;
}
.page-favorites__empty-icon svg {
  width: 72rem;
}
/* =================================================================
   Favorites header (title + meta) – shared by guest & account
   ================================================================= */
.favorites-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24rem;
  flex-wrap: wrap;
}
.favorites-header__title {
  font-size: 48rem;
  line-height: 1.16;
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0;
}
.favorites-header__meta {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
}
.favorites-header__count {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
}
.favorites-header__divider {
  width: 1px;
  height: 19rem;
  background: rgba(26, 26, 26, 0.16);
}
.favorites-header__clear {
  font-size: 16rem;
  line-height: 1.16;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3rem;
  opacity: 0.88;
  cursor: pointer;
  transition: opacity 0.2s ease;
  background: none;
  border: none;
  padding: 0;
}
.favorites-header__clear:hover {
  opacity: 1;
  color: var(--color-accent);
}
/* =================================================================
   Favorites grid – 4 columns (matches Figma)
   Overrides default 3-col .product-grid from _category.scss
   ================================================================= */
.favorites-grid {
  grid-template-columns: repeat(4, 1fr);
}
/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1023px) {
  .page-favorites {
    padding-top: 30rem;
  }
  .page-favorites__inner {
    padding: 24rem 24rem 64rem;
    gap: 24rem;
  }
  .favorites-header__title {
    font-size: 36rem;
  }
  .favorites-header__count, .favorites-header__clear {
    font-size: 14rem;
  }
  .favorites-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .page-favorites {
    padding-top: 30rem;
  }
  .page-favorites__inner {
    padding: 20rem 20rem 48rem;
    gap: 20rem;
  }
  .favorites-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12rem;
  }
  .favorites-header__title {
    font-size: 28rem;
  }
  .favorites-header__meta {
    flex-wrap: wrap;
  }
  .favorites-grid {
    grid-template-columns: 1fr;
  }
  .page-info__breadcrumbs {
    flex-wrap: wrap;
  }
  .page-info-block {
    padding-left: 0;
    margin-left: 0;
  }
  .page-product__shelf--plain .product-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.order-summary__total_checkout {
  padding-top: 24rem;
  border-top: 1px solid rgba(26, 26, 26, 0.1411764706);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1411764706);
  padding-bottom: 156rem;
}
span.breadcrumbs__link {
  color: #000 !important;
}
/* ====================================================================== */
/* 404 — Страница не найдена                                                */
/* ====================================================================== */
/* Light-variant header overrides (shared with other internal pages) */
.site-header--light {
  color: var(--color-dark);
}
.site-header--light .site-header__inner {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.site-header--light .site-header__logo,
.site-header--light .site-header__contact,
.site-header--light .site-header__nav-link,
.site-header--light .site-header__icon,
.site-header--light .site-header__social,
.site-header--light .site-header__burger {
  color: var(--color-dark);
}
.site-header--light .site-header__divider {
  background: rgba(26, 26, 26, 0.16);
}
.site-header--light .site-header__social {
  border-color: var(--color-dark);
}
.site-header--light .site-header__social svg path {
  fill: var(--color-dark);
}
.site-header--light .site-header__social:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header--light .site-header__social:hover svg path {
  fill: var(--color-white);
}
.site-header--light .site-header__icon svg circle,
.site-header--light .site-header__icon svg path,
.site-header--light .site-header__icon svg ellipse {
  stroke: var(--color-dark);
}
.site-header--light .site-header__icon svg circle[fill],
.site-header--light .site-header__icon svg path[fill=white] {
  fill: var(--color-dark);
}
/* Breadcrumbs (shared) */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--color-dark);
}
.breadcrumbs__link {
  color: rgba(26, 26, 26, 0.32);
  transition: opacity 0.25s ease;
}
.breadcrumbs__link:hover {
  opacity: 0.7;
}
.breadcrumbs__sep {
  color: rgba(26, 26, 26, 0.32);
}
.breadcrumbs__current {
  color: var(--color-dark);
}
/* Shared button styles (used across internal pages) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  padding: 16rem 32rem;
  border-radius: 12rem;
  font-size: 18rem;
  font-weight: 400;
  line-height: 1.16;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn__icon {
  display: inline-flex;
  width: 24rem;
  height: 24rem;
}
.btn__icon svg {
  width: 100%;
  height: 100%;
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover {
  background: #d99700;
  transform: translateY(-2rem);
}
.btn--ghost {
  background: var(--color-white);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 15rem 31rem;
}
.btn--ghost:hover {
  background: var(--color-accent);
  color: var(--color-white);
}
/* 404 page ------------------------------------------------------ */
/* Figma node 685:24653 — 1920-wide frame. The "404 group" (354,100)→
   (1566,827). Reproduced 1:1 as an absolutely-positioned stage. */
.page-404 {
  position: relative;
  padding-top: 100rem; /* group top y=100 (header sits absolute above) */
  padding-bottom: 100rem; /* gap from group bottom (827) to footer top (927) */
  background: var(--color-white);
}
.error-screen {
  display: flex;
  justify-content: center;
  /* Stage = the full "404 group": 1212 wide, 727 tall. */
}
.error-screen__stage {
  position: relative;
  width: 1212rem;
  max-width: 100%;
  height: 727rem;
}
.error-screen {
  /* Decorative frame lines — #1A1A1A @ 12% opacity, 1px. */
}
.error-screen__line {
  position: absolute;
  background: rgba(26, 26, 26, 0.12);
  pointer-events: none;
}
.error-screen__line--v {
  top: 0;
  width: 1px;
  height: 410rem;
}
.error-screen__line--left {
  left: 113rem;
}
.error-screen { /* x=467 - 354 */ }
.error-screen__line--right {
  left: 1099rem;
}
.error-screen { /* x=1453 - 354 */ }
.error-screen__line--h {
  left: 0;
  top: 411rem; /* y=511 - 100 */
  width: 1212rem;
  height: 1px;
}
.error-screen {
  /* Giant "404" watermark (906×354, opacity baked into the SVG = 12%). */
}
.error-screen__digits {
  position: absolute;
  left: 153rem; /* x=507 - 354 */
  top: 56rem; /* y=156 - 100 */
  width: 906rem;
  height: 354rem;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.error-screen {
  /* Glasses + copy column (Figma frame 795:14324: 742 wide, at x=235,y=223). */
}
.error-screen__content {
  position: absolute;
  left: 235rem; /* x=589 - 354 */
  top: 223rem; /* y=323 - 100 */
  width: 742rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
}
.error-screen {
  /* Glasses image box: 742×318, image overflows and is clipped (Figma). */
}
.error-screen__image {
  position: relative;
  width: 100%;
  height: 318rem;
  overflow: hidden;
}
.error-screen__image img {
  position: absolute;
  top: 0;
  left: 0.4%;
  width: 99.19%;
  height: auto;
}
.error-screen__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
}
.error-screen__text-group {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}
.error-screen__title {
  font-family: "Inter", sans-serif;
  font-size: 48rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
}
.error-screen__text {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  opacity: 0.88;
  margin: 0;
}
.error-screen__actions {
  display: flex;
  gap: 16rem;
  align-items: center;
  justify-content: center;
}
/* Tablet --------------------------------------------------------- */
@media (max-width: 1023px) {
  .page-404 {
    padding-top: 80rem;
    padding-bottom: 80rem;
  }
  .error-screen__stage {
    width: 100%;
    height: auto;
    min-height: 560rem;
  }
  .error-screen {
    /* Lines span the available width / fixed vertical run. */
  }
  .error-screen__line--v {
    height: 320rem;
  }
  .error-screen__line--left {
    left: 8%;
  }
  .error-screen__line--right {
    left: 92%;
  }
  .error-screen__line--h {
    top: 360rem;
    width: 100%;
  }
  .error-screen__digits {
    left: 50%;
    top: 40rem;
    transform: translateX(-50%);
    width: 78%;
    max-width: 720rem;
    height: auto;
  }
  .error-screen__content {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 640rem;
    margin: 200rem auto 0;
  }
  .error-screen__image {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .error-screen__image img {
    position: static;
    width: 100%;
  }
  .error-screen__title {
    font-size: 40rem;
  }
  .error-screen__text {
    font-size: 16rem;
  }
}
/* Mobile --------------------------------------------------------- */
@media (max-width: 599px) {
  .page-404 {
    padding-top: 64rem;
    padding-bottom: 56rem;
  }
  .error-screen__stage {
    min-height: 460rem;
  }
  .error-screen__line--v {
    height: 240rem;
  }
  .error-screen__line--h {
    top: 268rem;
  }
  .error-screen__digits {
    top: 24rem;
    width: 92%;
  }
  .error-screen__content {
    margin-top: 130rem;
    gap: 8rem;
  }
  .error-screen__copy {
    gap: 20rem;
  }
  .error-screen__title {
    font-size: 28rem;
  }
  .error-screen__text {
    font-size: 14rem;
  }
  .error-screen__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    width: 100%;
    padding: 14rem 20rem;
    font-size: 16rem;
  }
  .btn--ghost {
    padding: 13rem 19rem;
  }
}
/* ====================================================================== */
/* Privacy policy                                                           */
/* ====================================================================== */
.page-privacy {
  padding-bottom: 80rem;
  background: var(--color-white);
}
.page-privacy__inner {
  padding: 32rem 48rem 0;
  max-width: 1920rem;
  margin: 0 auto;
}
.privacy {
  width: 1212rem;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48rem;
  padding: 32rem 0 0;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.privacy__title {
  font-family: "Inter", sans-serif;
  font-size: 48rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-dark);
  letter-spacing: -0.5rem;
  margin: 0 0 8rem;
}
.privacy__section {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding-bottom: 32rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.privacy__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.privacy__heading {
  font-family: "Inter", sans-serif;
  font-size: 28rem;
  font-weight: 500;
  line-height: 1.16;
  color: var(--color-dark);
  margin: 0;
}
.privacy__body {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.5;
  color: var(--color-dark);
}
.privacy__body p {
  opacity: 0.88;
  max-width: 76ch;
  margin: 0;
}
.privacy__list {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding-left: 4rem;
  margin: 0;
}
.privacy__list li {
  position: relative;
  padding-left: 22rem;
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.5;
  opacity: 0.88;
}
.privacy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateY(-50%);
}
/* Responsive --------------------------------------------------- */
@media (max-width: 1023px) {
  .page-privacy {
    padding-bottom: 56rem;
  }
  .page-privacy__inner {
    padding: 20rem 24rem 0;
  }
  .privacy {
    gap: 40rem;
    padding-top: 24rem;
  }
  .privacy__title {
    font-size: 40rem;
  }
  .privacy__heading {
    font-size: 22rem;
  }
  .privacy__section {
    padding-bottom: 24rem;
  }
}
@media (max-width: 599px) {
  .page-privacy {
    padding-bottom: 48rem;
  }
  .page-privacy__inner {
    padding: 16rem 20rem 0;
  }
  .privacy {
    gap: 32rem;
    padding-top: 24rem;
  }
  .privacy__title {
    font-size: 30rem;
  }
  .privacy__heading {
    font-size: 20rem;
  }
  .privacy__body, .privacy__list li {
    font-size: 15rem;
  }
}
/* ====================================================================== */
/* Global UI — catalog mega-menu, header count badges, cookie banner       */
/* ====================================================================== */
/* Count badges on favorites / cart icons */
.site-header__icon, .site-header__micon {
  position: relative;
}
.site-header__badge {
  position: absolute;
  top: -6rem;
  right: -8rem;
  min-width: 18rem;
  height: 18rem;
  padding: 0 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 11rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 50rem;
  pointer-events: none;
}
.site-header__micon .site-header__badge {
  top: 4rem;
  right: 4rem;
}
/* Catalog mega-menu under "Каталог" */
.catalog-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 20rem;
  z-index: 200;
  background: #fff;
  border-radius: 16rem;
  padding: 16rem;
  box-shadow: 0 30rem 60rem rgba(26, 26, 26, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.catalog-menu__grid {
  display: flex;
  gap: 16rem;
}
.catalog-menu__card {
  width: 220rem;
  display: flex;
  flex-direction: column;
  gap: 12rem;
  text-decoration: none;
  color: var(--color-dark);
}
.catalog-menu__media {
  position: relative;
  height: 180rem;
  border-radius: 12rem;
  overflow: hidden;
  background: #f1f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-menu__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.catalog-menu__arrow {
  position: absolute;
  top: 12rem;
  left: 12rem;
  width: 36rem;
  height: 36rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: 8rem;
}
.catalog-menu__arrow svg {
  width: 20rem;
  height: 20rem;
}
.catalog-menu__label {
  font-family: "Inter", sans-serif;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--color-dark);
  transition: color 0.2s ease;
}
.catalog-menu__card:hover .catalog-menu__label {
  color: var(--color-accent);
}
.site-header__nav-item--dropdown.is-open .catalog-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.site-header__nav-item--dropdown.is-open .site-header__nav-chevron {
  transform: rotate(180deg);
}
/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 40rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 24rem;
  padding: 8rem 8rem 8rem 12rem;
  background: rgba(26, 26, 26, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(16rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.cookie-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.cookie-banner__text {
  font-family: "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
.cookie-banner__accept {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  padding: 16rem 20rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12rem;
  font-family: "Suisse Intl", "Inter", sans-serif;
  font-size: 18rem;
  line-height: 1.16;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.cookie-banner__accept:hover {
  background: #d99700;
}
.cookie-banner__accept svg {
  width: 24rem;
  height: 24rem;
}
@media (max-width: 1023px) {
  /* Dropdown becomes a full-width accordion: toggle on top, list stacked
     below. (Desktop lays it out as a row, which left the list floating to
     the right of "Каталог" inside the burger menu.) */
  .site-header__nav-item--dropdown {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .site-header__nav-item--dropdown .site-header__nav-link {
    width: 100%;
    justify-content: space-between;
  }
  /* Catalog menu collapses into an inline list inside the burger menu */
  .catalog-menu {
    position: static;
    display: none;
    margin-top: 12rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .catalog-menu__grid {
    flex-direction: column;
    gap: 0;
  }
  .catalog-menu__card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 12rem 0;
    color: inherit;
  }
  .catalog-menu__media, .catalog-menu__arrow {
    display: none;
  }
  .catalog-menu__label {
    color: inherit;
    font-size: 15rem;
    opacity: 0.88;
  }
  .site-header__nav-item--dropdown.is-open .catalog-menu {
    display: block;
  }
}
@media (max-width: 599px) {
  .cookie-banner {
    left: 16rem;
    right: 16rem;
    bottom: 16rem;
    flex-direction: column;
    align-items: stretch;
    gap: 12rem;
    transform: translateY(16rem);
  }
  .cookie-banner.is-visible {
    transform: translateY(0);
  }
  .cookie-banner__text {
    white-space: normal;
    text-align: center;
  }
  .cookie-banner__accept {
    justify-content: center;
  }
}
/* End */
/* /local/templates/seemo/assets/css/main.css?1782895251445473 */