/* Start:/assets/css/vendor/reboot.min.css?177936222710257*/
/*!
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]),h5:not([class]),h6:not([class]){margin-bottom:.5rem}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}section{width:100%}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
/* End */
/* Start:/assets/css/vendor/swiper-bundle.min.css?177936222718454*/
/**
* Swiper 11.2.10
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 28, 2025
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}: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;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}.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);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(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-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .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)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.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, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet: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-pagination-vertical.swiper-pagination-bullets,.swiper-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-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .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 .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* End */
/* Start:/assets/css/base/fonts.css?17793622275347*/
/* Onest — self-hosted (Google Fonts v9, woff2, variable) */
/* cyrillic-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/onest/onest-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/onest/onest-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* End */
/* Start:/assets/css/components/icon.css?178047690631569*/
/* ===========================
ICON (.icon) — mask-image
=========================== */
.icon {
display: inline-block;
width: 24px;
height: 24px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: 0.15s ease;
}
/* --- Sizes --- */
.icon--8 { width: 8px; height: 8px; }
.icon--10 { width: 10px; height: 10px; }
.icon--12 { width: 12px; height: 12px; }
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--28 { width: 28px; height: 28px; }
.icon--32 { width: 32px; height: 32px; }
.icon--48 { width: 48px; height: 48px; }
/* --- Responsive sizes (475px+) --- */
@media (min-width: 475px) {
.icon-xs-8 { width: 8px; height: 8px; }
.icon-xs-10 { width: 10px; height: 10px; }
.icon-xs-12 { width: 12px; height: 12px; }
.icon-xs-16 { width: 16px; height: 16px; }
.icon-xs-20 { width: 20px; height: 20px; }
.icon-xs-24 { width: 24px; height: 24px; }
.icon-xs-28 { width: 28px; height: 28px; }
.icon-xs-32 { width: 32px; height: 32px; }
.icon-xs-48 { width: 48px; height: 48px; }
}
/* --- Responsive sizes (769px+) --- */
@media (min-width: 769px) {
.icon-md-8 { width: 8px; height: 8px; }
.icon-md-10 { width: 10px; height: 10px; }
.icon-md-12 { width: 12px; height: 12px; }
.icon-md-16 { width: 16px; height: 16px; }
.icon-md-20 { width: 20px; height: 20px; }
.icon-md-24 { width: 24px; height: 24px; }
.icon-md-28 { width: 28px; height: 28px; }
.icon-md-32 { width: 32px; height: 32px; }
.icon-md-48 { width: 48px; height: 48px; }
}
/* --- Responsive sizes (1025px+) --- */
@media (min-width: 1025px) {
.icon-tb-8 { width: 8px; height: 8px; }
.icon-tb-10 { width: 10px; height: 10px; }
.icon-tb-12 { width: 12px; height: 12px; }
.icon-tb-16 { width: 16px; height: 16px; }
.icon-tb-20 { width: 20px; height: 20px; }
.icon-tb-24 { width: 24px; height: 24px; }
.icon-tb-28 { width: 28px; height: 28px; }
.icon-tb-32 { width: 32px; height: 32px; }
.icon-tb-48 { width: 48px; height: 48px; }
}
/* --- Responsive sizes (1281px+) --- */
@media (min-width: 1281px) {
.icon-lg-8 { width: 8px; height: 8px; }
.icon-lg-10 { width: 10px; height: 10px; }
.icon-lg-12 { width: 12px; height: 12px; }
.icon-lg-16 { width: 16px; height: 16px; }
.icon-lg-20 { width: 20px; height: 20px; }
.icon-lg-24 { width: 24px; height: 24px; }
.icon-lg-28 { width: 28px; height: 28px; }
.icon-lg-32 { width: 32px; height: 32px; }
.icon-lg-48 { width: 48px; height: 48px; }
}
/* --- Responsive sizes (1441px+) --- */
@media (min-width: 1441px) {
.icon-xl-8 { width: 8px; height: 8px; }
.icon-xl-12 { width: 12px; height: 12px; }
.icon-xl-16 { width: 16px; height: 16px; }
.icon-xl-20 { width: 20px; height: 20px; }
.icon-xl-24 { width: 24px; height: 24px; }
.icon-xl-28 { width: 28px; height: 28px; }
.icon-xl-32 { width: 32px; height: 32px; }
.icon-xl-48 { width: 48px; height: 48px; }
}
/* --- Icon definitions ---
Usage:
Add new icons below:
.icon-name { --icon: url('/img/icons/name.svg'); }
=========================== */
.icon-cart {
--icon: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00016 18.25H18.6342C19.7425 18.25 20.2967 18.25 20.7483 18.0498C21.1465 17.8733 21.4873 17.5888 21.7322 17.2286C22.01 16.8201 22.1091 16.2749 22.3074 15.1845L23.8833 6.51696C23.952 6.13904 23.9863 5.95008 23.9333 5.80253C23.8867 5.67308 23.7959 5.56426 23.6768 5.49529C23.5412 5.41667 23.3491 5.41667 22.965 5.41667H4.25016M0.75 0.75H2.28581C2.56894 0.75 2.71051 0.75 2.825 0.801716C2.92592 0.847298 3.01178 0.920662 3.07254 1.01323C3.14148 1.11826 3.16356 1.2581 3.20772 1.53777L6.45895 22.1289C6.50311 22.4086 6.52519 22.5484 6.59413 22.6534C6.65489 22.746 6.74075 22.8194 6.84166 22.865C6.95616 22.9167 7.09772 22.9167 7.38086 22.9167H20.5833' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-cart2 {
--icon: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.58366 19.8333H20.2177C21.326 19.8333 21.8802 19.8333 22.3318 19.633C22.73 19.4565 23.0708 19.1721 23.3157 18.8119C23.5935 18.4034 23.6926 17.8582 23.8909 16.7678L25.4668 8.10021C25.5355 7.72229 25.5698 7.53333 25.5168 7.38578C25.4702 7.25634 25.3794 7.14751 25.2603 7.07854C25.1247 6.99992 24.9326 6.99992 24.5485 6.99992H5.83366M2.3335 2.33325H3.8693C4.15244 2.33325 4.29401 2.33325 4.4085 2.38497C4.50942 2.43055 4.59527 2.50391 4.65604 2.59649C4.72498 2.70151 4.74706 2.84135 4.79121 3.12102L8.04244 23.7122C8.0866 23.9918 8.10868 24.1317 8.17762 24.2367C8.23839 24.3293 8.32424 24.4026 8.42516 24.4482C8.53965 24.4999 8.68122 24.4999 8.96436 24.4999H22.1668' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-heart {
--icon: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5531 9.99828C16.9893 9.22316 17.3531 8.52372 17.5774 7.99137C18.6668 5.40633 17.5896 2.43285 14.9564 1.21993C12.3231 0.00701105 9.67891 1.2647 8.51844 3.69303C6.29927 2.17027 3.33898 2.39391 1.70647 4.77023C0.0739636 7.14655 0.586319 10.251 2.82228 11.945C3.83706 12.7138 5.84403 13.8469 7.73355 14.8551M17.43 12.1269C16.9376 9.48095 14.6862 7.54584 11.8515 8.0718C9.01685 8.59775 7.18396 11.1552 7.56718 13.9341C7.87506 16.1668 9.57452 21.4051 10.2307 23.3783C10.3203 23.6475 10.3651 23.7822 10.4537 23.876C10.5309 23.9578 10.6336 24.0171 10.7431 24.0431C10.8687 24.0729 11.0077 24.0444 11.2856 23.9873C13.3225 23.5691 18.7088 22.4216 20.7963 21.572C23.3945 20.5144 24.7354 17.6501 23.731 14.9304C22.7267 12.2108 19.9677 11.2304 17.43 12.1269Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-heart2 {
--icon: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.1366 11.5796C18.5729 10.8045 18.9366 10.105 19.161 9.57267C20.2504 6.98763 19.1732 4.01415 16.5399 2.80123C13.9067 1.58831 11.2625 2.846 10.102 5.27433C7.88282 3.75157 4.92254 3.97521 3.29003 6.35153C1.65752 8.72785 2.16988 11.8323 4.40583 13.5263C5.42062 14.2951 7.42758 15.4282 9.31711 16.4364M19.0135 13.7082C18.5211 11.0622 16.2697 9.12714 13.4351 9.6531C10.6004 10.1791 8.76752 12.7365 9.15073 15.5154C9.45862 17.7481 11.1581 22.9864 11.8143 24.9596C11.9039 25.2288 11.9486 25.3635 12.0373 25.4573C12.1145 25.5391 12.2172 25.5984 12.3266 25.6244C12.4523 25.6542 12.5912 25.6257 12.8692 25.5686C14.9061 25.1504 20.2924 24.0029 22.3798 23.1533C24.9781 22.0957 26.3189 19.2314 25.3146 16.5117C24.3103 13.7921 21.5512 12.8117 19.0135 13.7082Z' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-compare {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 15V14.8498C22 14.5333 22 14.3751 21.9758 14.2209C21.9543 14.084 21.9186 13.9497 21.8694 13.8202C21.8139 13.6743 21.7354 13.5369 21.5784 13.2622L18 7L6 9L2.42162 15.2622C2.2646 15.5369 2.18609 15.6743 2.13061 15.8202C2.08136 15.9497 2.0457 16.084 2.02421 16.2209C2 16.3751 2 16.5333 2 16.8498V17M2 17C2 19.2091 3.79086 21 6 21C8.20914 21 10 19.2091 10 17M2 17V16.8C2 16.52 2 16.38 2.0545 16.273C2.10243 16.1789 2.17892 16.1024 2.273 16.0545C2.37996 16 2.51997 16 2.8 16H9.2C9.48003 16 9.62004 16 9.727 16.0545C9.82108 16.1024 9.89757 16.1789 9.9455 16.273C10 16.38 10 16.52 10 16.8V17M6 9L9.57838 15.2622C9.7354 15.5369 9.81391 15.6743 9.86939 15.8202C9.91864 15.9497 9.9543 16.084 9.97579 16.2209C10 16.3751 10 16.5333 10 16.8498V17M14 15V14.8498C14 14.5333 14 14.3751 14.0242 14.2209C14.0457 14.084 14.0814 13.9497 14.1306 13.8202C14.1861 13.6743 14.2646 13.5369 14.4216 13.2622L18 7M14 15C14 17.2091 15.7909 19 18 19C20.2091 19 22 17.2091 22 15M14 15V14.8C14 14.52 14 14.38 14.0545 14.273C14.1024 14.1789 14.1789 14.1024 14.273 14.0545C14.38 14 14.52 14 14.8 14H21.2C21.48 14 21.62 14 21.727 14.0545C21.8211 14.1024 21.8976 14.1789 21.9455 14.273C22 14.38 22 14.52 22 14.8V15M12 3V8' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-compare2 {
--icon:url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.33301 19.8333V19.6581C2.33301 19.2889 2.33301 19.1042 2.36125 18.9244C2.38632 18.7647 2.42793 18.608 2.48539 18.4569C2.55011 18.2867 2.64171 18.1264 2.8249 17.8059L6.99967 10.5M2.33301 19.8333C2.33301 22.4107 4.42235 24.5 6.99967 24.5C9.577 24.5 11.6663 22.4107 11.6663 19.8333M2.33301 19.8333V19.6C2.33301 19.2733 2.33301 19.11 2.39659 18.9852C2.45251 18.8754 2.54175 18.7862 2.65151 18.7302C2.7763 18.6667 2.93964 18.6667 3.26634 18.6667H10.733C11.0597 18.6667 11.2231 18.6667 11.3478 18.7302C11.4576 18.7862 11.5468 18.8754 11.6028 18.9852C11.6663 19.11 11.6663 19.2733 11.6663 19.6V19.8333M6.99967 10.5L11.1744 17.8059C11.3576 18.1264 11.4492 18.2867 11.514 18.4569C11.5714 18.608 11.613 18.7647 11.6381 18.9244C11.6663 19.1042 11.6663 19.2889 11.6663 19.6581V19.8333M6.99967 10.5L20.9997 8.16667M16.333 17.5V17.3248C16.333 16.9555 16.333 16.7709 16.3612 16.591C16.3863 16.4313 16.4279 16.2747 16.4854 16.1236C16.5501 15.9534 16.6417 15.7931 16.8249 15.4725L20.9997 8.16667M16.333 17.5C16.333 20.0773 18.4223 22.1667 20.9997 22.1667C23.577 22.1667 25.6663 20.0773 25.6663 17.5M16.333 17.5V17.2667C16.333 16.94 16.333 16.7766 16.3966 16.6518C16.4525 16.5421 16.5418 16.4528 16.6515 16.3969C16.7763 16.3333 16.9396 16.3333 17.2663 16.3333H24.733C25.0597 16.3333 25.2231 16.3333 25.3478 16.3969C25.4576 16.4528 25.5468 16.5421 25.6028 16.6518C25.6663 16.7766 25.6663 16.94 25.6663 17.2667V17.5M20.9997 8.16667L25.1744 15.4725C25.3576 15.7931 25.4492 15.9534 25.514 16.1236C25.5714 16.2747 25.613 16.4313 25.6381 16.591C25.6663 16.7709 25.6663 16.9555 25.6663 17.3248V17.5M13.9997 3.5V9.33333' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-copy {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.333 5.333V3.467c0-.747 0-1.12.146-1.406a1.333 1.333 0 0 1 .583-.582C6.347 1.333 6.72 1.333 7.467 1.333h5.066c.747 0 1.12 0 1.406.146.25.128.454.332.583.582.145.286.145.66.145 1.406v5.066c0 .747 0 1.12-.145 1.406a1.333 1.333 0 0 1-.583.583c-.286.145-.66.145-1.406.145h-1.866M3.467 14.667h5.066c.747 0 1.12 0 1.406-.146.25-.128.454-.332.583-.582.145-.286.145-.66.145-1.406V7.467c0-.747 0-1.12-.145-1.406a1.333 1.333 0 0 0-.583-.583c-.286-.145-.66-.145-1.406-.145H3.467c-.747 0-1.12 0-1.406.145a1.333 1.333 0 0 0-.582.583C1.333 6.347 1.333 6.72 1.333 7.467v5.066c0 .747 0 1.12.146 1.406.128.25.332.454.582.582.286.146.66.146 1.406.146Z' stroke='currentColor' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-tg {
--icon: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.958561 5.1755C4.71589 3.48736 7.21719 2.36563 8.47321 1.82142C12.048 0.277656 12.7995 0.0111062 13.2826 0C13.3899 0 13.6261 0.0222126 13.7871 0.155487C13.916 0.26655 13.9482 0.410931 13.9696 0.521993C13.9911 0.633055 14.0126 0.866286 13.9911 1.04399C13.7979 3.15417 12.9605 8.27414 12.5311 10.6287C12.3486 11.6282 11.9944 11.9614 11.6508 11.9947C10.8994 12.0614 10.3304 11.4838 9.61114 10.9952C8.47321 10.2288 7.83983 9.75127 6.7341 8.99604C5.45661 8.12976 6.28323 7.65219 7.01322 6.87475C7.20645 6.67484 10.5022 3.5651 10.5666 3.28744C10.5773 3.25412 10.5773 3.12085 10.5022 3.05421C10.427 2.98757 10.3197 3.00979 10.2338 3.032C10.1157 3.05421 8.31218 4.29811 4.80177 6.75259C4.28648 7.11909 3.82486 7.29679 3.40619 7.28569C2.94458 7.27458 2.06429 7.01913 1.39871 6.79701C0.593565 6.53046 -0.0505481 6.38608 0.00312793 5.91962C0.0353336 5.67528 0.35739 5.43094 0.958561 5.1755Z' fill='%23239BD5'/%3E%3C/svg%3E%0A");
background-color: #239BD5;
}
.icon-mail {
--icon: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500061 2.5L5.94334 6.3103C6.38412 6.61884 6.60451 6.77312 6.84424 6.83287C7.05599 6.88566 7.27746 6.88566 7.48922 6.83287C7.72894 6.77312 7.94933 6.61884 8.39011 6.3103L13.8334 2.5M3.70006 11.1667H10.6334C11.7535 11.1667 12.3136 11.1667 12.7414 10.9487C13.1177 10.7569 13.4237 10.451 13.6154 10.0746C13.8334 9.64682 13.8334 9.08677 13.8334 7.96667V3.7C13.8334 2.5799 13.8334 2.01984 13.6154 1.59202C13.4237 1.21569 13.1177 0.909734 12.7414 0.717987C12.3136 0.5 11.7535 0.5 10.6334 0.5H3.70006C2.57996 0.5 2.0199 0.5 1.59208 0.717987C1.21576 0.909734 0.909795 1.21569 0.718048 1.59202C0.500061 2.01984 0.500061 2.5799 0.500061 3.7V7.96667C0.500061 9.08677 0.500061 9.64682 0.718048 10.0746C0.909795 10.451 1.21576 10.7569 1.59208 10.9487C2.0199 11.1667 2.57996 11.1667 3.70006 11.1667Z' stroke='%23969696' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-color: var(--gray-400);
}
.icon-search {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z' stroke='%235D5D5D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");;
}
.icon-menu {
--icon:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12H15M3 6H21M3 18H21' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-chevron-down {
--icon: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L4.5 4.5L8.5 0.5' stroke='%23969696' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-chevron-down2 {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7L8 11L12 7' stroke='%23969696' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-close {
--icon: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6504 0.649902L0.650391 10.6499M0.650391 0.649902L10.6504 10.6499' stroke='%233961DB' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");;
}
.icon-close2 {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.modal .icon-close,
.modal .icon-close2 {
background-color:var(--black) ;
}
.modal .icon-close:hover,
.modal .icon-close2:hover {
background-color:var(--gray-400) ;
}
.icon-trash {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5' stroke='%23969696' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-star {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3316_25663)'%3E%3Cpath d='M7.5335 1.10836C7.82838 0.967764 8.17123 0.96781 8.46612 1.10836C8.72418 1.2314 8.8647 1.44386 8.93194 1.55367C9.00544 1.67372 9.08053 1.82754 9.15069 1.96968L10.5579 4.82024L13.7064 5.28117C13.8631 5.30408 14.0324 5.32837 14.1692 5.36125C14.2787 5.38758 14.4809 5.44297 14.6614 5.59562L14.7366 5.66691L14.8157 5.75968C14.9858 5.9853 15.0621 6.2703 15.0247 6.55362C14.9872 6.8371 14.8281 7.03692 14.7444 7.13467C14.6529 7.24158 14.5297 7.36012 14.4163 7.4706L12.139 9.68738L12.6761 12.8211C12.7029 12.9774 12.7333 13.1456 12.7444 13.286C12.7546 13.4143 12.7657 13.6694 12.6292 13.9207C12.4732 14.2078 12.1955 14.409 11.8743 14.4686C11.5932 14.5205 11.3544 14.431 11.2357 14.3817C11.1057 14.3277 10.955 14.2474 10.8148 14.1737L7.99932 12.6932L5.18585 14.1737C5.04546 14.2475 4.89407 14.3277 4.76397 14.3817C4.64507 14.431 4.40652 14.5207 4.1253 14.4686C3.80407 14.409 3.52637 14.2078 3.37042 13.9207C3.23393 13.6694 3.24601 13.4143 3.25616 13.286C3.2673 13.1457 3.29676 12.9773 3.32355 12.8211L3.86065 9.68738L1.58331 7.4706C1.46982 7.36006 1.34669 7.2416 1.25519 7.13467C1.17155 7.03692 1.01336 6.83712 0.97589 6.55362C0.933167 6.22986 1.03845 5.90402 1.263 5.66691L1.33917 5.59562C1.51954 5.44328 1.72091 5.38758 1.83038 5.36125C1.96722 5.32834 2.13648 5.30409 2.29327 5.28117L5.44171 4.82024L6.84893 1.96968C6.91909 1.82755 6.99418 1.67374 7.06768 1.55367C7.13486 1.44396 7.27555 1.23148 7.5335 1.10836Z' fill='%23FFA723'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3316_25663'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.icon-check {
--icon: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-check-circle {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8L7 10L11 6M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-ui {
--icon: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.08789 5.75C3.81694 2.76099 7.04866 0.75 10.7501 0.75C16.2729 0.75 20.7501 5.22715 20.7501 10.75C20.7501 16.2728 16.2729 20.75 10.7501 20.75C7.04866 20.75 3.81694 18.739 2.08789 15.75M10.75 14.75L14.75 10.75M14.75 10.75L10.75 6.75M14.75 10.75H0.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-robot {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2V5M17 8H7C5.89543 8 5 8.89543 5 10V16C5 17.1046 5.89543 18 7 18H17C18.1046 18 19 17.1046 19 16V10C19 8.89543 18.1046 8 17 8ZM10 13H10.01M14 13H14.01M9 18V21M15 18V21M3 13H5M19 13H21' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-arrow-right {
--icon:url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.31087 6.58333C4.32809 3.09616 8.09843 0.75 12.4167 0.75C18.8601 0.75 24.0834 5.97334 24.0834 12.4167C24.0834 18.86 18.8601 24.0833 12.4167 24.0833C8.09843 24.0833 4.32809 21.7372 2.31087 18.25M12.4167 17.0833L17.0833 12.4167M17.0833 12.4167L12.4167 7.75M17.0833 12.4167H0.75' stroke='%233961DB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-arrow-circle {
--icon:url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.31087 6.58333C4.32809 3.09616 8.09843 0.75 12.4167 0.75C18.8601 0.75 24.0834 5.97334 24.0834 12.4167C24.0834 18.86 18.8601 24.0833 12.4167 24.0833C8.09843 24.0833 4.32809 21.7372 2.31087 18.25M12.4167 17.0833L17.0833 12.4167M17.0833 12.4167L12.4167 7.75M17.0833 12.4167H0.75' stroke='%233961DB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-arrow-sm-right {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.333 8h9.334M8.667 4l4 4-4 4' stroke='%235D5D5D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-chevron-right {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23969696' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-chevron-right2 {
--icon:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23969696' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-phone {
--icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.19206 5.89891C5.77206 7.10693 6.56271 8.23913 7.56403 9.24044C8.56535 10.2418 9.69755 11.0324 10.9056 11.6124C11.0095 11.6623 11.0614 11.6872 11.1272 11.7064C11.3608 11.7745 11.6477 11.7256 11.8455 11.5839C11.9012 11.5441 11.9488 11.4964 12.0441 11.4012C12.3354 11.1098 12.4811 10.9642 12.6276 10.8689C13.18 10.5098 13.8922 10.5098 14.4446 10.8689C14.591 10.9642 14.7367 11.1098 15.0281 11.4012L15.1904 11.5636C15.6333 12.0064 15.8547 12.2279 15.975 12.4657C16.2143 12.9386 16.2143 13.4972 15.975 13.9702C15.8547 14.208 15.6333 14.4294 15.1904 14.8723L15.0591 15.0036C14.6177 15.445 14.397 15.6657 14.097 15.8342C13.7641 16.0212 13.247 16.1557 12.8652 16.1546C12.5211 16.1535 12.2859 16.0868 11.8155 15.9533C9.28766 15.2358 6.90236 13.8821 4.91238 11.8921C2.9224 9.90211 1.56867 7.51681 0.851192 4.98898C0.717687 4.51861 0.650933 4.28342 0.649909 3.9393C0.648773 3.55745 0.783241 3.04037 0.970259 2.70745C1.1388 2.40742 1.35947 2.18675 1.80083 1.7454L1.93219 1.61403C2.37506 1.17116 2.59649 0.94973 2.83431 0.829443C3.30728 0.590218 3.86583 0.590218 4.3388 0.829443C4.57662 0.94973 4.79805 1.17116 5.24092 1.61403L5.40331 1.77642C5.69465 2.06776 5.84032 2.21343 5.93556 2.35991C6.29472 2.91232 6.29472 3.62447 5.93556 4.17688C5.84032 4.32336 5.69465 4.46903 5.40331 4.76037C5.30805 4.85563 5.26042 4.90326 5.22055 4.95894C5.07888 5.1568 5.02996 5.44368 5.09806 5.67731C5.11723 5.74305 5.14217 5.795 5.19206 5.89891Z' stroke='%233961DB' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-marker-pin {
--icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3166 9.29539C15.2597 9.87406 17.3166 11.1956 17.3166 12.7334C17.3166 14.8044 13.5856 16.4834 8.98324 16.4834C4.38086 16.4834 0.649902 14.8044 0.649902 12.7334C0.649902 11.1956 2.70673 9.87406 5.6499 9.29539M8.98324 12.3167V5.65002M8.98324 5.65002C10.3639 5.65002 11.4832 4.53074 11.4832 3.15002C11.4832 1.76931 10.3639 0.650024 8.98324 0.650024C7.60252 0.650024 6.48324 1.76931 6.48324 3.15002C6.48324 4.53074 7.60252 5.65002 8.98324 5.65002Z' stroke='%233961DB' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-home {
--icon: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6491 1.16378C10.2977 0.890526 10.1221 0.7539 9.92809 0.701381C9.75694 0.655041 9.57655 0.655041 9.4054 0.701381C9.21143 0.7539 9.03577 0.890526 8.68444 1.16378L1.90214 6.43891C1.44877 6.79153 1.22208 6.96784 1.05878 7.18864C0.914114 7.38422 0.80635 7.60456 0.740775 7.83883C0.666748 8.1033 0.666748 8.39048 0.666748 8.96483V16.1998C0.666748 17.3199 0.666748 17.8799 0.884735 18.3077C1.07648 18.6841 1.38244 18.99 1.75877 19.1818C2.18659 19.3998 2.74664 19.3998 3.86675 19.3998H5.86675C6.14677 19.3998 6.28679 19.3998 6.39374 19.3453C6.48782 19.2973 6.56431 19.2208 6.61225 19.1268C6.66675 19.0198 6.66675 18.8798 6.66675 18.5998V11.9998C6.66675 11.4397 6.66675 11.1597 6.77574 10.9458C6.87161 10.7576 7.0246 10.6046 7.21276 10.5088C7.42667 10.3998 7.7067 10.3998 8.26675 10.3998H11.0667C11.6268 10.3998 11.9068 10.3998 12.1207 10.5088C12.3089 10.6046 12.4619 10.7576 12.5578 10.9458C12.6667 11.1597 12.6667 11.4397 12.6667 11.9998V18.5998C12.6667 18.8798 12.6667 19.0198 12.7212 19.1268C12.7692 19.2208 12.8457 19.2973 12.9398 19.3453C13.0467 19.3998 13.1867 19.3998 13.4667 19.3998H15.4667C16.5869 19.3998 17.1469 19.3998 17.5747 19.1818C17.9511 18.99 18.257 18.6841 18.4488 18.3077C18.6667 17.8799 18.6667 17.3199 18.6667 16.1998V8.96483C18.6667 8.39048 18.6667 8.1033 18.5927 7.83883C18.5271 7.60456 18.4194 7.38422 18.2747 7.18864C18.1114 6.96784 17.8847 6.79153 17.4314 6.43891L10.6491 1.16378Z' stroke='currentColor' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");;
}
.icon-catalog {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4h12M2 8h8M2 12h12' stroke='currentColor' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon-banner {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L4 4M22 2L20 4M22 22L20 20M2 22L4 20M2 16H3.5M8 2V3.5M22 8H20.5M16 22V20.5M18 16H21.5M16 2V6M2 8H6M8 22V18M11.4343 7.56569L7.56569 11.4343C7.36768 11.6323 7.26867 11.7313 7.23158 11.8455C7.19895 11.9459 7.19895 12.0541 7.23158 12.1545C7.26867 12.2687 7.36768 12.3677 7.56569 12.5657L11.4343 16.4343C11.6323 16.6323 11.7313 16.7313 11.8455 16.7684C11.9459 16.8011 12.0541 16.8011 12.1545 16.7684C12.2687 16.7313 12.3677 16.6323 12.5657 16.4343L16.4343 12.5657C16.6323 12.3677 16.7313 12.2687 16.7684 12.1545C16.8011 12.0541 16.8011 11.9459 16.7684 11.8455C16.7313 11.7313 16.6323 11.6323 16.4343 11.4343L12.5657 7.56569C12.3677 7.36768 12.2687 7.26867 12.1545 7.23158C12.0541 7.19895 11.9459 7.19895 11.8455 7.23158C11.7313 7.26867 11.6323 7.36768 11.4343 7.56569Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-settings-04 {
--icon: url("data:image/svg+xml,%3Csvg width='17' height='13' viewBox='0 0 17 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.650391 3.1499L10.6504 3.1499M10.6504 3.1499C10.6504 4.53061 11.7697 5.6499 13.1504 5.6499C14.5311 5.6499 15.6504 4.53061 15.6504 3.1499C15.6504 1.76919 14.5311 0.649902 13.1504 0.649902C11.7697 0.649902 10.6504 1.76919 10.6504 3.1499ZM5.65039 9.81657L15.6504 9.81657M5.65039 9.81657C5.65039 11.1973 4.5311 12.3166 3.15039 12.3166C1.76968 12.3166 0.650391 11.1973 0.650391 9.81657C0.650391 8.43586 1.76968 7.31657 3.15039 7.31657C4.5311 7.31657 5.65039 8.43586 5.65039 9.81657Z' stroke='%23045793' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-filter-lines {
--icon: url("data:image/svg+xml,%3Csvg width='17' height='12' viewBox='0 0 17 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.15039 5.6499H13.1504M0.650391 0.649902H15.6504M5.65039 10.6499H10.6504' stroke='%230A0A0A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-info {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23C24E15' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");;
}
.icon-sort {
--icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.83333 3.33325V16.6666M5.83333 16.6666L2.5 13.3333M5.83333 16.6666L9.16667 13.3333M14.1667 16.6666V3.33325M14.1667 3.33325L10.8333 6.66659M14.1667 3.33325L17.5 6.66659' stroke='%23969696' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");;
}
.icon-sort-asc {
--icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.6666V3.33325M10 3.33325L5 8.33325M10 3.33325L15 8.33325' stroke='currentColor' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-sort-desc {
--icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.33325V16.6666M10 16.6666L15 11.6666M10 16.6666L5 11.6666' stroke='currentColor' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-solo-hear {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.89982 14.6651 9.84977 19.1041 11.4721 20.5408C11.6536 20.7016 11.7444 20.7819 11.8502 20.8135C11.9426 20.8411 12.0437 20.8411 12.1361 20.8135C12.2419 20.7819 12.3327 20.7016 12.5142 20.5408C14.1365 19.1041 19.0865 14.6651 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-minus {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.333 8h9.334' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-plus {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3.333v9.334M3.333 8h9.334' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* --- Non-square sizes --- */
.icon--12x16 { width: 12px; height: 16px; }
.icon--14x7 { width: 14px; height: 7px; }
.icon--6x12 { width: 6px; height: 12px; }
/* --- Padding utilities (--icon-pad) --- */
.icon-p-0 { --icon-pad: 0px; }
.icon-p-1 { --icon-pad: 1px; }
.icon-p-2 { --icon-pad: 2px; }
.icon-p-3 { --icon-pad: 3px; }
.icon-p-4 { --icon-pad: 4px; }
.icon-p-6 { --icon-pad: 6px; }
.icon-p-8 { --icon-pad: 8px; }
.icon-primary-color {
background-color: var(--fg-accent);
}
.icon-gray-color {
background-color: var(--gray-400);
}
/* End */
/* Start:/assets/css/components/buttons.css?177936222714706*/
/* ===========================
BUTTON (.btn)
=========================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
font-family: var(--font-base);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
text-decoration: none;
border: none;
outline: none;
border-radius: var(--btn-radius);
width: fit-content;
height: fit-content;
}
.btn svg,
.btn .icon {
flex-shrink: 0;
transition: background-color 0.15s ease;
}
.btn__label {
padding: 0 var(--space-4);
}
/* --- Button sizes --- */
.btn--lg {
--btn-radius: var(--radius-96);
padding: var(--space-16) var(--space-24);
font-size: var(--text-16);
line-height: var(--lh-24);
}
.btn--md {
--btn-radius: var(--radius-12);
padding: var(--space-12) var(--space-16);
font-size: var(--text-16);
line-height: var(--lh-24);
min-width: 48px;
min-height: 48px;
}
.btn--md svg {
width: 16px;
height: 16px;
}
.btn--sm {
--btn-radius: var(--radius-8);
padding: var(--space-8) var(--space-12);
font-size: var(--text-14);
line-height: var(--lh-20);
}
.btn--sm svg {
width: 16px;
height: 16px;
}
/* --- Accent Primary --- */
.btn--accent-primary {
background: var(--bg-accent-primary);
color: var(--fg-inverse);
}
.btn--accent-primary:hover,
.btn--accent-primary.is-hover {
background: var(--bg-accent-primary-dark);
}
.btn--accent-primary:active,
.btn--accent-primary.is-active {
background: var(--bg-accent-primary-darkest);
}
.btn--accent-primary.btn--lg {
box-shadow: 0 0 25px #839EED;
}
.btn--accent-primary.btn--lg:hover,
.btn--accent-primary.btn--lg.is-hover {
box-shadow: 0 0 25px #6B8AE8;
}
/* --- Accent Secondary --- */
.btn--accent-secondary {
background: var(--bg-accent-secondary);
color: var(--fg-accent);
}
.btn--accent-secondary:hover,
.btn--accent-secondary.is-hover {
background: var(--bg-accent-secondary-dark);
}
.btn--accent-secondary:active,
.btn--accent-secondary.is-active {
background: var(--bg-accent-secondary-darker);
}
.btn--accent-secondary.btn--sm {
--btn-radius: var(--radius-96);
}
/* --- Accent Tertiary --- */
.btn--accent-tertiary {
--btn-radius: var(--radius-12);
background: var(--bg-accent-primary);
color: var(--fg-inverse);
box-shadow: 0 0 16px rgba(113, 113, 113, 0.1), 0 16px 16px rgba(113, 113, 113, 0.1);
position: relative;
}
.btn--accent-tertiary:before {
content: '';
mask-image: url("data:image/svg+xml,%3Csvg width='8' height='16' viewBox='0 0 8 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16L8 -9.53674e-07L0.351472 7.11807C-0.117157 7.60515 -0.117157 8.39485 0.351472 8.88192L8 16Z' fill='%233E6BF2'/%3E%3C/svg%3E%0A");
width: 8px;
height: 16px;
position: absolute;
left: -8px;
background: var(--bg-accent-primary);
transition: background-color 0.15s ease;
}
.btn--accent-tertiary.is-hover:before,
.btn--accent-tertiary:hover:before,
.btn--accent-tertiary:hover,
.btn--accent-tertiary.is-hover {
background: var(--bg-accent-primary-dark);
}
.btn--accent-tertiary.is-active:before,
.btn--accent-tertiary:active:before,
.btn--accent-tertiary:active,
.btn--accent-tertiary.is-active {
background: var(--bg-accent-primary-darkest);
}
/* --- Neutral Primary --- */
.btn--neutral-primary {
background: var(--white);
color: var(--fg-primary);
}
.btn--neutral-primary:hover,
.btn--neutral-primary.is-hover {
background: var(--bg-accent-secondary);
color: var(--fg-accent);
}
.btn--neutral-primary:active,
.btn--neutral-primary.is-active {
background: var(--bg-accent-secondary-dark);
}
.btn--neutral-primary.btn--lg {
box-shadow: 0 0 25px #839EED;
}
/* --- Neutral Secondary --- */
.btn--neutral-secondary {
background: var(--white);
color: var(--fg-primary);
}
.btn--neutral-secondary:hover,
.btn--neutral-secondary.is-hover {
background: var(--bg-accent-secondary);
color: var(--fg-accent);
}
.btn--neutral-secondary:active,
.btn--neutral-secondary.is-active {
background: var(--bg-accent-secondary-dark);
}
/* --- Error --- */
.btn--error {
background: var(--bg-status-5);
color: var(--fg-inverse);
}
.btn--error:hover,
.btn--error.is-hover {
background: var(--bg-status-5-dark);
}
.btn--error:active,
.btn--error.is-active {
background: var(--red-800);
}
/* --- Disabled state --- */
.btn--accent-tertiary.btn--disabled:before,
.btn--accent-tertiary:disabled:before,
.btn:disabled,
.btn--disabled {
background: var(--gray-10);
color: var(--gray-200);
cursor: not-allowed;
box-shadow: none;
pointer-events: none;
}
/* ===========================
TEXT BUTTON (.text-btn)
=========================== */
.text-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
font-family: var(--font-base);
cursor: pointer;
background: none;
border: none;
padding: 0;
transition: color 0.15s ease;
position: relative;
}
.text-btn:hover .icon {
background-color: currentColor;
}
.text-btn:hover {
color: var(--fg-accent);
}
/* Расширение зоны нажатия до 40px без изменения layout */
.text-btn::after {
content: '';
position: absolute;
inset: 50% 0;
transform: translateY(-50%);
min-height: 40px;
}
.text-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.text-btn .icon {
flex-shrink: 0;
transition: background-color 0.15s ease;
}
/* Sizes */
.text-btn--lg {
gap: var(--space-8);
font-size: var(--text-20);
line-height: var(--lh-28);
font-weight: 500;
min-width: 28px;
}
.text-btn--md {
font-size: var(--text-16);
line-height: var(--lh-24);
font-weight: 500;
min-width: 24px;
}
.text-btn--sm {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
min-width: 20px;
}
.text-btn--xs {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
min-width: 16px;
}
/* Responsive text-btn sizes (475px+) */
@media (min-width: 475px) {
.text-btn-xs--lg { gap: var(--space-8); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; min-width: 28px; }
.text-btn-xs--md { font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; min-width: 24px; }
.text-btn-xs--sm { font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; min-width: 20px; }
.text-btn-xs--xs { font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; min-width: 16px; }
}
/* Responsive text-btn sizes (769px+) */
@media (min-width: 769px) {
.text-btn-md--lg { gap: var(--space-8); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; min-width: 28px; }
.text-btn-md--md { font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; min-width: 24px; }
.text-btn-md--sm { font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; min-width: 20px; }
.text-btn-md--xs { font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; min-width: 16px; }
}
/* Responsive text-btn sizes (1025px+) */
@media (min-width: 1025px) {
.text-btn-tb--lg { gap: var(--space-8); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; min-width: 28px; }
.text-btn-tb--md { font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; min-width: 24px; }
.text-btn-tb--sm { font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; min-width: 20px; }
.text-btn-tb--xs { font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; min-width: 16px; }
}
/* Responsive text-btn sizes (1281px+) */
@media (min-width: 1281px) {
.text-btn-lg--lg { gap: var(--space-8); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; min-width: 28px; }
.text-btn-lg--md { font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; min-width: 24px; }
.text-btn-lg--sm { font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; min-width: 20px; }
.text-btn-lg--xs { font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; min-width: 16px; }
}
/* Responsive text-btn sizes (1441px+) */
@media (min-width: 1441px) {
.text-btn-xl--lg { gap: var(--space-8); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; min-width: 28px; }
.text-btn-xl--md { font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; min-width: 24px; }
.text-btn-xl--sm { font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; min-width: 20px; }
.text-btn-xl--xs { font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; min-width: 16px; }
}
/* Styles */
.text-btn--accent {
color: var(--fg-accent);
}
.text-btn--accent:hover,
.text-btn--accent.is-hover {
color: var(--fg-accent-dark);
}
.text-btn--accent:active,
.text-btn--accent.is-active {
color: var(--blue-800);
}
.text-btn--neutral {
color: var(--fg-primary);
}
.text-btn--neutral:hover,
.text-btn--neutral.is-hover {
color: var(--fg-accent);
}
.text-btn--neutral:active,
.text-btn--neutral.is-active {
color: var(--blue-800);
}
.text-btn--neutral-secondary {
color: var(--fg-secondary);
}
.text-btn--neutral-secondary:hover,
.text-btn--neutral-secondary.is-hover {
color: var(--fg-accent);
}
.text-btn--neutral-secondary:active,
.text-btn--neutral-secondary.is-active {
color: var(--blue-800);
}
.text-btn--error {
color: var(--fg-status-5);
}
.text-btn--error:hover,
.text-btn--error.is-hover {
color: var(--red-700);
}
.text-btn--error:active,
.text-btn--error.is-active {
color: var(--red-800);
}
.text-btn:disabled,
.text-btn--disabled {
color: var(--gray-200);
cursor: not-allowed;
pointer-events: none;
}
/* ===========================
FILLED ICON BUTTON (.filled-icon-btn)
=========================== */
.filled-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
transition: background-color 0.15s ease;
}
.filled-icon-btn svg,
.filled-icon-btn .icon {
flex-shrink: 0;
transition: background-color 0.15s ease;
}
/* Sizes */
.filled-icon-btn--md {
border-radius: var(--radius-12);
min-width: 48px;
min-height: 48px;
}
.filled-icon-btn--md svg {
width: 20px;
height: 20px;
}
.filled-icon-btn--sm {
padding: var(--space-8);
border-radius: var(--radius-8);
min-width: 36px;
min-height: 36px;
}
.filled-icon-btn--sm svg {
width: 16px;
height: 16px;
}
/* Accent Primary */
.filled-icon-btn--accent-primary {
background: var(--bg-accent-secondary);
color: var(--fg-accent);
}
.filled-icon-btn--accent-primary:hover,
.filled-icon-btn--accent-primary.is-hover {
background: var(--bg-accent-secondary-dark);
}
.filled-icon-btn--accent-primary:active,
.filled-icon-btn--accent-primary.is-active {
background: var(--bg-accent-secondary-darker);
}
/* Accent Secondary */
.filled-icon-btn--accent-secondary {
background: var(--bg-accent-secondary-dark);
color: var(--fg-accent);
}
.filled-icon-btn--accent-secondary:hover,
.filled-icon-btn--accent-secondary.is-hover {
background: var(--bg-accent-secondary-dark);
}
.filled-icon-btn--accent-secondary:active,
.filled-icon-btn--accent-secondary.is-active {
background: var(--blue-100);
}
/* Accent Tertiary (solid blue) */
.filled-icon-btn--accent-tertiary {
background: var(--bg-accent-primary);
color: var(--fg-inverse);
}
.filled-icon-btn--accent-tertiary:hover,
.filled-icon-btn--accent-tertiary.is-hover {
background: var(--bg-accent-primary-dark);
}
.filled-icon-btn--accent-tertiary:active,
.filled-icon-btn--accent-tertiary.is-active {
background: var(--bg-accent-primary-darkest);
}
/* Neutral */
.filled-icon-btn--neutral {
background: var(--white);
color: var(--fg-primary);
}
.filled-icon-btn--neutral:hover,
.filled-icon-btn--neutral.is-hover {
background: var(--bg-accent-secondary);
}
.filled-icon-btn--neutral:active,
.filled-icon-btn--neutral.is-active {
background: var(--bg-accent-secondary-dark);
}
.filled-icon-btn--neutral.filled-icon-btn--md {
border-radius: var(--radius-96);
}
/* Neutral Secondary */
.filled-icon-btn--neutral-secondary.filled-icon-btn--md {
border-radius: var(--radius-96);
}
.filled-icon-btn--neutral-secondary {
background: var(--white);
color: var(--fg-primary);
}
.filled-icon-btn--neutral-secondary:hover,
.filled-icon-btn--neutral-secondary.is-hover {
background: var(--bg-accent-secondary);
}
.filled-icon-btn--neutral-secondary:active,
.filled-icon-btn--neutral-secondary.is-active {
background: var(--bg-accent-secondary-dark);
}
.filled-icon-btn:disabled,
.filled-icon-btn--disabled {
background: var(--gray-10);
color: var(--gray-200);
cursor: not-allowed;
pointer-events: none;
}
/* ===========================
ICON BUTTON (.icon-btn)
=========================== */
.icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--fg-primary);
transition: color 0.15s ease;
}
.icon-btn::after {
content: '';
position: absolute;
inset: 50% 0;
transform: translateY(-50%);
min-height: 48px;
}
.icon-btn:hover,
.icon-btn.is-hover {
color: var(--fg-accent);
}
.icon-btn:active,
.icon-btn.is-active {
color: var(--fg-accent-dark);
}
.icon-btn--lg svg { width: 28px; height: 28px; }
.icon-btn--md svg { width: 24px; height: 24px; }
.icon-btn--sm svg { width: 20px; height: 20px; }
.icon-btn svg,
.icon-btn .icon {
flex-shrink: 0;
}
.icon-btn--secondary {
color: var(--fg-secondary);
}
.icon-btn--secondary:hover,
.icon-btn--secondary.is-hover {
color: var(--fg-accent);
}
.icon-btn--secondary:active,
.icon-btn--secondary.is-active {
color: var(--fg-accent-dark);
}
.icon-btn--inverse {
color: var(--fg-inverse);
}
.icon-btn--inverse:hover,
.icon-btn--inverse.is-hover {
color: var(--gray-25);
}
.icon-btn--inverse:active,
.icon-btn--inverse.is-active {
color: var(--gray-50);
}
/* Counter badge */
.icon-btn__counter {
position: absolute;
top: -10px;
left: 40%;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 0 var(--space-4);
border-radius: var(--radius-6);
background: var(--bg-status-5);
border: var(--stroke-w-2) solid var(--white);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
color: var(--white);
}
.icon-btn__counter:empty {
display: none;
}
.icon-btn:disabled,
.icon-btn--disabled {
color: var(--gray-200);
cursor: not-allowed;
pointer-events: none;
}
/* End */
/* Start:/assets/css/components/inputs.css?177936222710320*/
/* ===========================
INPUT MAIN (.input)
=========================== */
.input {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
min-width: 200px;
}
.input__label {
color: var(--gray-700);
}
.input__field {
display: flex;
align-items: flex-start;
gap: var(--space-4);
width: 100%;
padding: var(--space-12);
border-radius: var(--radius-12);
background: var(--white);
border: var(--stroke-w-1) solid var(--stroke-default);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input__field:hover {
border-color: var(--stroke-accent);
}
.input__field:focus-within {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
.input__content {
display: flex;
flex: 1;
align-items: center;
gap: var(--space-4);
min-width: 0;
}
.input__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--fg-secondary);
}
.input__control {
flex: 1;
font-family: var(--font-base);
font-size: var(--text-16);
line-height: var(--lh-24);
font-weight: 400;
color: var(--fg-primary);
padding: 0 var(--space-4);
border: none;
outline: none;
background: transparent;
min-width: 0;
}
.input__control::placeholder {
color: var(--fg-secondary);
}
.input__clear {
display: none;
align-items: center;
justify-content: center;
align-self: center;
cursor: pointer;
color: var(--gray-400);
background: none;
border: none;
padding: 0;
}
.input__clear.is-visible {
display: inline-flex;
}
.input__hint {
display: flex;
justify-content: space-between;
width: 100%;
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
color: var(--fg-tertiary);
transition: color 0.2s ease;
}
/* Validated forms — smooth hint expand (collapse hints without counter) */
[data-validate] .input__hint:not(:has(.input__counter)) {
max-height: 0;
overflow: hidden;
margin-top: calc(-1 * var(--space-8));
transition: max-height 0.3s ease, margin-top 0.3s ease, color 0.2s ease;
}
.input--error > .input__hint:not(:has(.input__counter)) {
max-height: 24px;
margin-top: 0;
}
/* Error text — fade + slide in */
.input__error-text {
display: inline-block;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease 0.08s, transform 0.2s ease 0.08s;
}
.input--error .input__error-text {
opacity: 1;
transform: translateY(0);
}
.input__counter {
text-align: right;
}
/* Filled state */
.input__field.is-filled {
border-color: var(--stroke-accent);
}
/* Error state (overrides filled) */
.input--error .input__field {
border-color: var(--bg-status-5);
box-shadow: inset 0 0 0 1px var(--bg-status-5);
}
.input--error .input__hint {
color: var(--red-700);
}
/* Disabled state */
.input--disabled .input__control {
color: var(--gray-200);
}
.input--disabled .input__control::placeholder {
color: var(--gray-200);
}
.input--disabled .input__field {
pointer-events: none;
}
.input--disabled .input__icon {
color: var(--gray-200);
}
.input--disabled .input__clear {
color: var(--gray-200);
}
/* Forced states */
.input__field.is-hover {
border-color: var(--stroke-accent);
}
.input__field.is-focus {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
/* On-dark variant */
.input--on-dark .input__label {
color: var(--white);
}
.input--on-dark .input__field {
background: var(--opacity-light-27);
border: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.input--on-dark .input__field:hover {
border-color: var(--white);
}
.input--on-dark .input__field:focus-within {
border-color: var(--white);
box-shadow: inset 0 0 0 1px var(--white);
}
.input--on-dark .input__control {
color: var(--white);
}
.input--on-dark .input__control::placeholder {
color: var(--gray-100);
}
.input--on-dark .input__hint {
color: var(--gray-100);
}
.input--on-dark.input--error .input__field {
border-color: var(--red-500);
box-shadow: inset 0 0 0 1px var(--red-500);
}
.input--on-dark.input--error .input__hint {
color: var(--red-500);
}
/* ===========================
INPUT CALC (.input-calc)
=========================== */
.input-calc {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
}
.input-calc__label {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
color: var(--fg-primary);
}
.input-calc__field {
display: flex;
align-items: flex-start;
gap: var(--space-4);
width: 100%;
padding: var(--space-12);
border-radius: var(--radius-12);
background: var(--white);
border: var(--stroke-w-1) solid var(--stroke-default);
transition: border-color 0.15s ease;
}
.input-calc__field:hover {
border-color: var(--stroke-accent);
}
.input-calc__field:focus-within {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
.input-calc__prefix {
font-size: var(--text-16);
line-height: var(--lh-24);
color: var(--fg-secondary);
flex-shrink: 0;
}
.input-calc__control {
flex: 1;
font-family: var(--font-base);
font-size: var(--text-16);
line-height: var(--lh-24);
font-weight: 400;
color: var(--fg-primary);
padding: 0 var(--space-4);
border: none;
outline: none;
background: transparent;
min-width: 0;
}
.input-calc__control::placeholder {
color: var(--fg-primary);
}
.input-calc__suffix {
font-size: var(--text-16);
line-height: var(--lh-24);
color: var(--fg-secondary);
flex-shrink: 0;
text-align: right;
}
.input-calc__hint {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
color: var(--fg-tertiary);
}
/* Filled state */
.input-calc__field.is-filled {
border-color: var(--stroke-accent);
}
/* Error state (overrides filled) */
.input-calc--error .input-calc__field {
border-color: var(--bg-status-5);
box-shadow: inset 0 0 0 1px var(--bg-status-5);
}
.input-calc--error .input-calc__hint {
color: var(--red-700);
}
.input-calc--disabled .input-calc__control {
color: var(--gray-200);
}
.input-calc--disabled .input-calc__control::placeholder {
color: var(--gray-200);
}
.input-calc--disabled .input-calc__prefix,
.input-calc--disabled .input-calc__suffix {
color: var(--gray-200);
}
.input-calc--disabled .input-calc__field {
pointer-events: none;
}
/* Forced states */
.input-calc__field.is-hover {
border-color: var(--stroke-accent);
}
.input-calc__field.is-focus {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
/* ===========================
INPUT SEARCH (.input-search)
=========================== */
.input-search {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
}
.input-search__label {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
color: var(--gray-800);
}
.input-search__field {
display: flex;
align-items: flex-start;
gap: var(--space-4);
width: 100%;
padding: var(--space-11);
border-radius: var(--radius-12);
background: var(--white);
border: var(--stroke-w-2) solid var(--stroke-accent);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-search__field:hover,
.input-search__field:focus-within {
box-shadow: 0 0 0 4px var(--blue-50);
}
.input-search__content {
display: flex;
flex: 1;
align-items: center;
gap: var(--space-4);
min-width: 0;
}
.input-search__icon {
flex-shrink: 0;
color: var(--gray-700);
}
.input-search__control {
flex: 1;
font-family: var(--font-base);
font-size: var(--text-16);
line-height: var(--lh-24);
font-weight: 400;
color: var(--fg-primary);
padding: 0 var(--space-4);
border: none;
outline: none;
background: transparent;
min-width: 0;
}
.input-search__control::placeholder {
color: var(--fg-secondary);
}
.input-search__clear {
display: none;
align-items: center;
justify-content: center;
align-self: center;
cursor: pointer;
color: var(--fg-secondary);
background: none;
border: none;
padding: 0;
}
.input-search__clear.is-visible {
display: inline-flex;
}
/* Hide native search clear button */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.input-search__hint {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
color: var(--fg-tertiary);
}
/* Secondary variant */
.input-search--secondary .input-search__field {
border: var(--stroke-w-1) solid var(--stroke-default);
}
.input-search--secondary .input-search__field:hover {
border-color: var(--stroke-accent);
box-shadow: none;
}
.input-search--secondary .input-search__field:focus-within {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
.input-search--secondary .input-search__icon {
color: var(--fg-secondary);
}
/* Filled state */
.input-search--secondary .input-search__field.is-filled {
border-color: var(--stroke-accent);
}
/* Error state (overrides filled) */
.input-search--error .input-search__field {
border-color: var(--bg-status-5);
box-shadow: none;
}
.input-search--secondary.input-search--error .input-search__field {
box-shadow: inset 0 0 0 1px var(--bg-status-5);
}
.input-search--error .input-search__hint {
color: var(--red-700);
}
/* Disabled */
.input-search--disabled .input-search__field {
border-color: var(--stroke-default);
box-shadow: none;
pointer-events: none;
}
.input-search--disabled .input-search__control::placeholder {
color: var(--gray-200);
}
.input-search--disabled .input-search__icon {
color: var(--gray-200);
}
.input-search--disabled .input-search__clear {
color: var(--gray-200);
}
/* Forced states */
.input-search__field.is-hover,
.input-search__field.is-focus {
box-shadow: 0 0 0 4px var(--blue-50);
}
.input-search--secondary .input-search__field.is-hover {
border-color: var(--stroke-accent);
box-shadow: none;
}
.input-search--secondary .input-search__field.is-focus,
.input-search--secondary .input-search__field.is-filled {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
/* End */
/* Start:/assets/css/components/tabs.css?178047690614914*/
/* ===========================
TAB MAIN (.tab-main)
=========================== */
/* --- Base --- */
.tab-main {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
color: var(--fg-primary);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
gap: 4px;
text-wrap: nowrap;
}
.tab-main.circle {
width:32px;
height:32px;
}
.tab-main__label {
font-family: var(--font-base);
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: inherit;
white-space: nowrap;
padding: 0 4px;
}
/* --- Badge (::before on .has-badge) --- */
.tab-main.has-badge::before {
content: '';
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 20px;
background: var(--light-blue-600) url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.19038 0.190381C8.44422 -0.0634602 8.85646 -0.0634602 9.1103 0.190381C9.36414 0.444221 9.36414 0.856462 9.1103 1.1103L3.6103 6.6103C3.35646 6.86414 2.94422 6.86414 2.69038 6.6103L0.190381 4.1103C-0.0634602 3.85646 -0.0634602 3.44422 0.190381 3.19038C0.444221 2.93654 0.856462 2.93654 1.1103 3.19038L3.15034 5.23042L8.19038 0.190381Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 8px 6px;
border: 2px solid var(--white);
border-radius: var(--radius-96);
z-index: 1;
}
/* Counter variant: --badge-count overrides checkmark */
.tab-main.has-badge[style*="--badge-count"]::before {
content: var(--badge-count);
background-image: none;
font-family: var(--font-base);
font-size: 10px;
line-height: 16px;
font-weight: 500;
color: var(--white);
text-align: center;
}
/* --- Disabled (shared) --- */
.tab-main--disabled {
cursor: default;
pointer-events: none;
color: var(--gray-200);
}
/* ===========================
Primary (.tab-main--primary)
=========================== */
.tab-main--primary {
padding: 8px 16px;
border-radius: var(--radius-96);
background: var(--white);
border: 1px dashed var(--gray-100);
}
.tab-main--primary:hover,
.tab-main--primary.is-hover {
background: var(--gray-10);
border-color: var(--gray-200);
}
.tab-main--primary.is-selected {
padding: 7px 15px;
background: var(--light-blue-10);
border: 2px solid var(--light-blue-600);
color: var(--light-blue-900);
}
.tab-main--primary.tab-main--disabled {
background: var(--gray-10);
border-color: transparent;
}
/* ===========================
Secondary (.tab-main--secondary)
=========================== */
.tab-main--secondary {
padding: 4px;
border-radius: var(--radius-96);
background: var(--white);
border: 1px dashed var(--gray-100);
}
.tab-main__color {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
}
.tab-main--secondary:hover,
.tab-main--secondary.is-hover {
background: var(--gray-10);
border-color: var(--gray-200);
}
.tab-main--secondary.is-selected {
padding: 3px;
background: var(--light-blue-10);
border: 2px solid var(--light-blue-600);
}
.tab-main--secondary.tab-main--disabled {
background: var(--gray-10);
border-color: transparent;
}
/* ===========================
Tertiary (.tab-main--tertiary)
=========================== */
.tab-main--tertiary {
border-radius: var(--radius-12);
background: var(--white);
border: 1px dashed var(--gray-100);
}
.tab-main__image {
width: 87px;
height: 96px;
object-fit: cover;
display: block;
border-radius: calc(var(--radius-12) - 1px);
}
.tab-main--tertiary:hover,
.tab-main--tertiary.is-hover {
background: var(--gray-10);
border-color: var(--gray-200);
}
.tab-main--tertiary.is-selected {
background: var(--light-blue-10);
border: 2px solid var(--light-blue-600);
}
.tab-main--tertiary.is-selected .tab-main__image {
border-radius: calc(var(--radius-12) - 2px);
}
.tab-main--tertiary.tab-main--disabled {
background: var(--gray-10);
border-color: transparent;
}
.tab-main--tertiary.tab-main--disabled .tab-main__image {
opacity: 0.4;
}
/* ===========================
Filters (.tab-main--filters)
=========================== */
.tab-main--filters {
padding: 8px 16px;
border-radius: var(--radius-96);
background: var(--gray-10);
border: 2px solid transparent;
}
.tab-main--filters:hover,
.tab-main--filters.is-hover {
background: var(--gray-25);
}
.tab-main--filters.is-selected {
background: var(--light-blue-10);
border-color: var(--light-blue-600);
}
.tab-main--filters.has-badge::before {
right: 2px;
}
.tab-main--filters.tab-main--disabled {
background: var(--gray-10);
}
/* ===========================
Filters-text (.tab-main--filters-text)
=========================== */
.tab-main--filters-text {
padding: 8px 16px;
border-radius: var(--radius-96);
background: var(--gray-10);
border: 2px solid transparent;
}
.tab-main--filters-text:hover,
.tab-main--filters-text.is-hover {
background: var(--gray-25);
}
.tab-main--filters-text.is-selected {
background: var(--light-blue-10);
border-color: var(--light-blue-600);
color: var(--light-blue-900);
}
.tab-main--filters-text.has-badge::before {
right: 2px;
}
.tab-main--filters-text.tab-main--disabled {
background: var(--gray-10);
}
/* ===========================
TAB ICON (.tab-icon)
=========================== */
/* --- Base --- */
.tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 48px;
height: 48px;
border-radius: var(--radius-12);
background: var(--gray-10);
color: var(--fg-primary);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
border: 1px solid transparent;
}
.tab-icon:hover,
.tab-icon.is-hover {
background: var(--gray-25);
}
/* --- Selected — blue (default) --- */
.tab-icon.is-selected {
background: var(--light-blue-10);
color: var(--light-blue-600);
border-color: var(--light-blue-50);
}
/* --- Selected — red --- */
.tab-icon--red.is-selected {
background: var(--red-5);
color: var(--red-600);
border-color: var(--red-25);
}
.tab-icon--red.is-selected .icon-solo-hear {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.89982 14.6651 9.84977 19.1041 11.4721 20.5408C11.6536 20.7016 11.7444 20.7819 11.8502 20.8135C11.9426 20.8411 12.0437 20.8411 12.1361 20.8135C12.2419 20.7819 12.3327 20.7016 12.5142 20.5408C14.1365 19.1041 19.0865 14.6651 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z' fill='%23DF2222' stroke='%23DF2222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* --- Selected — purple --- */
.tab-icon--purple.is-selected {
background: var(--purple-5);
color: var(--purple-600);
border-color: #EDE5FC;
}
.tab-icon--purple.is-selected .icon-compare {
--icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 16.8503V17.0005C2 19.2096 3.79086 21.0005 6 21.0005C8.20914 21.0005 10 19.2096 10 17.0005V16.8503C10 16.7918 10 16.7388 9.99985 16.6901C9.99892 16.4816 9.99232 16.3654 9.9455 16.2735C9.89757 16.1794 9.82108 16.1029 9.727 16.055C9.62004 16.0005 9.48003 16.0005 9.2 16.0005H2.8C2.51997 16.0005 2.37996 16.0005 2.273 16.055C2.17892 16.1029 2.10243 16.1794 2.0545 16.2735C2.00768 16.3654 2.00108 16.4816 2.00015 16.6901C2 16.7388 2 16.7918 2 16.8503Z' fill='%237238E7'/%3E%3Cpath d='M14 14.8503V15.0005C14 17.2096 15.7909 19.0005 18 19.0005C20.2091 19.0005 22 17.2096 22 15.0005V14.8503C22 14.7918 22 14.7387 21.9998 14.6901C21.9989 14.4816 21.9923 14.3654 21.9455 14.2735C21.8976 14.1794 21.8211 14.1029 21.727 14.055C21.62 14.0005 21.48 14.0005 21.2 14.0005H14.8C14.52 14.0005 14.38 14.0005 14.273 14.055C14.1789 14.1029 14.1024 14.1794 14.0545 14.2735C14.0077 14.3654 14.0011 14.4817 14.0002 14.6901C14 14.7388 14 14.7918 14 14.8503Z' fill='%237238E7'/%3E%3Cpath d='M2 17.0005V16.8503C2 16.7918 2 16.7388 2.00015 16.6901M2 17.0005C2 19.2096 3.79086 21.0005 6 21.0005C8.20914 21.0005 10 19.2096 10 17.0005M2 17.0005V16.8005C2 16.761 2 16.7243 2.00015 16.6901M21.9998 14.6901C21.9992 14.4755 21.9955 14.3471 21.9758 14.2214C21.9543 14.0845 21.9186 13.9502 21.8694 13.8207C21.8139 13.6748 21.7354 13.5374 21.5784 13.2627L18 7.00049L6 9.00049L2.42162 15.2626C2.2646 15.5374 2.18609 15.6748 2.13061 15.8207C2.08136 15.9502 2.0457 16.0845 2.02421 16.2214C2.00447 16.3471 2.00083 16.4755 2.00015 16.6901M6 9.00049L9.57838 15.2626C9.7354 15.5374 9.81391 15.6748 9.86939 15.8207C9.91864 15.9502 9.9543 16.0845 9.97579 16.2214C9.99553 16.3471 9.99917 16.4755 9.99985 16.6901M10 17.0005V16.8503C10 16.7918 10 16.7388 9.99985 16.6901M10 17.0005V16.8005C10 16.761 10 16.7243 9.99985 16.6901M14 15.0005V14.8503C14 14.7918 14 14.7388 14.0002 14.6901M14 15.0005C14 17.2096 15.7909 19.0005 18 19.0005C20.2091 19.0005 22 17.2096 22 15.0005M14 15.0005V14.8005C14 14.761 14 14.7243 14.0002 14.6901M18 7.00049L14.4216 13.2627C14.2646 13.5374 14.1861 13.6748 14.1306 13.8207C14.0814 13.9502 14.0457 14.0845 14.0242 14.2214C14.0045 14.3471 14.0008 14.4755 14.0002 14.6901M22 15.0005V14.8503C22 14.7918 22 14.7387 21.9998 14.6901M22 15.0005V14.8005C22 14.761 22 14.7243 21.9998 14.6901M12 3.00049V8.00049M9.99985 16.6901C9.99892 16.4816 9.99232 16.3654 9.9455 16.2735C9.89757 16.1794 9.82108 16.1029 9.727 16.055C9.62004 16.0005 9.48003 16.0005 9.2 16.0005H2.8C2.51997 16.0005 2.37996 16.0005 2.273 16.055C2.17892 16.1029 2.10243 16.1794 2.0545 16.2735C2.00768 16.3654 2.00108 16.4816 2.00015 16.6901M21.9998 14.6901C21.9989 14.4816 21.9923 14.3654 21.9455 14.2735C21.8976 14.1794 21.8211 14.1029 21.727 14.055C21.62 14.0005 21.48 14.0005 21.2 14.0005H14.8C14.52 14.0005 14.38 14.0005 14.273 14.055C14.1789 14.1029 14.1024 14.1794 14.0545 14.2735C14.0077 14.3654 14.0011 14.4817 14.0002 14.6901' stroke='%237238E7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* --- Disabled --- */
.tab-icon--disabled {
cursor: default;
pointer-events: none;
color: var(--gray-200);
}
.tab-icon--red.has-badge::before {
background-color: var(--red-600);
}
.tab-icon--purple.has-badge::before {
background-color: var(--purple-600);
}
/* ===========================
TAB IN LINE (.tab-inline)
=========================== */
/* --- Base --- */
.tab-inline {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
padding-bottom: 12px;
color: var(--gray-600);
transition: color 0.15s ease;
}
.tab-inline__label {
font-family: var(--font-base);
font-size: var(--text-16);
line-height: var(--lh-24);
color: inherit;
}
.tab-inline::before {
content: '';
position: absolute;
inset: -8px -4px;
}
.tab-inline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: transparent;
border-radius: 1px;
transition: background-color 0.15s ease;
}
.tab-inline:hover,
.tab-inline.is-hover {
color: var(--blue-700);
}
.tab-inline.is-selected {
color: var(--blue-700);
}
.tab-inline.is-selected::after {
background: var(--blue-700);
}
.tab-inline--disabled {
cursor: default;
pointer-events: none;
color: var(--gray-200);
}
/* --- Small (.tab-inline--sm) --- */
.tab-inline--sm .tab-inline__label {
font-size: var(--text-14);
line-height: var(--lh-20);
}
/* ===========================
TAB TECH (.tab-tech)
=========================== */
/* --- Base (checkmark) --- */
.tab-tech {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: var(--radius-96);
background: var(--light-blue-600);
}
.tab-tech::after {
content: '';
display: block;
width: 10px;
height: 7px;
background: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.19038 0.190381C8.44422 -0.0634602 8.85646 -0.0634602 9.1103 0.190381C9.36414 0.444221 9.36414 0.856462 9.1103 1.1103L3.6103 6.6103C3.35646 6.86414 2.94422 6.86414 2.69038 6.6103L0.190381 4.1103C-0.0634602 3.85646 -0.0634602 3.44422 0.190381 3.19038C0.444221 2.93654 0.856462 2.93654 1.1103 3.19038L3.15034 5.23042L8.19038 0.190381Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* --- Counter variant --- */
.tab-tech--count::after {
display: none;
}
.tab-tech__text {
font-family: var(--font-base);
font-size: 10px;
line-height: 1;
font-weight: 500;
color: var(--white);
text-align: center;
}
/* --- Color variants --- */
.tab-tech--purple {
background: var(--purple-600);
}
.tab-tech--red {
background: var(--red-600);
}
/* ===========================
TAB GROUP (.tab-group)
=========================== */
.tab-group {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.tab-group:has(.circle) {
gap: 12px;
}
.tab-group--inline {
gap: 24px;
}
/* ===========================
TAB PANELS (.tab-panels)
=========================== */
.tab-panels {
position: relative;
overflow: hidden;
}
.tab-panel {
display: none;
}
.tab-panel.is-active {
display: block;
animation: tabSlideRight 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-panel.is-active.is-slide-left {
animation: tabSlideLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tabSlideRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes tabSlideLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@media (min-width: 768px) {
/* --- Badge (::before on .has-badge) --- */
.tab-icon.has-badge::before {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 15px;
height: 15px;
background: currentColor url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.19038 0.190381C8.44422 -0.0634602 8.85646 -0.0634602 9.1103 0.190381C9.36414 0.444221 9.36414 0.856462 9.1103 1.1103L3.6103 6.6103C3.35646 6.86414 2.94422 6.86414 2.69038 6.6103L0.190381 4.1103C-0.0634602 3.85646 -0.0634602 3.44422 0.190381 3.19038C0.444221 2.93654 0.856462 2.93654 1.1103 3.19038L3.15034 5.23042L8.19038 0.190381Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 8px 6px;
border: 2px solid var(--white);
border-radius: var(--radius-96);
z-index: 1;
}
}
@media (min-width: 768px) {
.tab-icon.has-badge::before {
width: 20px;
height: 20px;
}
}
/* End */
/* Start:/assets/css/components/forms.css?17793622274105*/
/* ===========================
RADIO (.radio)
=========================== */
.radio {
display: flex;
align-items: center;
gap: var(--space-12);
position: relative;
cursor: pointer;
}
.radio__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.radio__mark {
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: var(--radius-96);
background: var(--white);
border: var(--stroke-w-2) solid var(--stroke-default);
position: relative;
transition: border-color 0.15s ease;
}
.radio:hover .radio__mark,
.radio.is-hover .radio__mark {
border-color: var(--blue-400);
}
.radio__input:checked + .radio__mark {
border-color: var(--stroke-accent);
}
.radio__input:checked + .radio__mark::after {
content: '';
position: absolute;
border-radius: 50%;
background: var(--stroke-accent);
border: 2px solid var(--white);
width: 16px;
height: 16px;
}
.radio__label {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--fg-primary);
}
.radio--disabled {
cursor: not-allowed;
pointer-events: none;
}
.radio--disabled .radio__mark {
border-color: var(--gray-25);
}
.radio--disabled .radio__label {
color: var(--gray-200);
}
/* ===========================
CHECKBOX (.checkbox)
=========================== */
.checkbox {
display: flex;
align-items: center;
gap: var(--space-12);
position: relative;
cursor: pointer;
}
.checkbox__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.checkbox__mark {
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: var(--radius-6);
background: var(--white);
border: var(--stroke-w-2) solid var(--stroke-default);
position: relative;
transition: border-color 0.15s ease, background-color 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox:hover .checkbox__mark,
.checkbox.is-hover .checkbox__mark {
border-color: var(--blue-400);
}
.checkbox__input:checked + .checkbox__mark {
background: var(--stroke-accent);
border-color: var(--stroke-accent);
}
.checkbox__input:checked + .checkbox__mark::after {
content: '';
display: block;
width: 10px;
height: 7px;
border-left: 2px solid var(--white);
border-bottom: 2px solid var(--white);
transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox__label {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--fg-primary);
}
.checkbox--disabled {
cursor: not-allowed;
pointer-events: none;
}
.checkbox--disabled .checkbox__mark {
border-color: var(--gray-25);
}
.checkbox--disabled .checkbox__label {
color: var(--gray-200);
}
/* ===========================
SWITCH (.switch)
=========================== */
.switch {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
position: relative;
}
.switch__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch__label {
flex: 1;
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--fg-primary);
}
.switch__track {
width: 46px;
height: 24px;
flex-shrink: 0;
border-radius: var(--radius-96);
background: var(--bg-accent-secondary);
padding: 2px;
display: flex;
align-items: center;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch:hover .switch__track,
.switch.is-hover .switch__track {
background: var(--bg-accent-secondary-dark);
}
.switch__input:checked ~ .switch__track {
background: var(--bg-accent-primary);
}
.switch__handle {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--white);
flex-shrink: 0;
transform: translateX(0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.switch__input:checked ~ .switch__track .switch__handle {
transform: translateX(22px);
}
.switch--disabled {
cursor: not-allowed;
pointer-events: none;
}
.switch--disabled .switch__label {
color: var(--gray-200);
}
.switch--disabled .switch__track {
background: var(--gray-10);
}
/* End */
/* Start:/assets/css/components/accordion.css?17804810482528*/
/* ===========================
ACCORDION (.accordion)
=========================== */
/* --- Base --- */
.accordion__header {
display: flex;
align-items: center;
gap: var(--space-8);
width: 100%;
cursor: pointer;
}
.accordion__icon {
flex-shrink: 0;
color: var(--blue-700);
display: none;
}
.accordion__title {
flex: 1;
text-align: left;
color: var(--fg-primary);
}
.accordion__chevron {
flex-shrink: 0;
margin-right: 4px;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
/* Body — smooth grid animation */
.accordion__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion__inner {
overflow: hidden;
min-height: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/*.accordion__inner > :last-child {*/
/* margin-top: var(--space-16);*/
/* margin-bottom: var(--space-24);*/
/*}*/
.accordion__text {
color: var(--gray-700);
}
.accordion__text > * {
margin-bottom: var(--space-12);
}
.accordion__text > *:last-child {
margin-bottom: 0;
}
/* --- Open state --- */
.accordion__item.is-open .accordion__body {
grid-template-rows: 1fr;
}
.accordion__item.is-open .accordion__chevron {
display: none;
transform: rotate(180deg);
}
/* --- Primary (.accordion--primary) --- */
.accordion--primary .accordion__item {
border-bottom: 1px solid var(--gray-25);
}
.accordion__header {
/*padding-top: var(--space-24);*/
padding-bottom: var(--space-24);
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion__item.is-open .accordion__header {
padding-bottom: var(--space-12);
}
/* Primary: hover chevron turns blue */
.accordion--primary .accordion__header:hover .accordion__chevron,
.accordion--primary .accordion__header.is-hover .accordion__chevron {
color: var(--blue-700);
}
/* --- Secondary (.accordion--secondary) --- */
.accordion--secondary {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.accordion--secondary .accordion__item {
background: var(--gray-5);
border-radius: var(--radius-20);
padding: var(--space-24);
}
/* ===========================
DESKTOP (1025px+)
=========================== */
@media (min-width: 768px) {
.accordion .accordion__icon {
display: block;
}
.accordion__item.is-open .accordion__header {
padding-bottom: var(--space-16);
}
}
/* End */
/* Start:/assets/css/components/tags.css?17793622275855*/
/* ===========================
TAG CARD (.tag-card)
=========================== */
.tag-card {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: auto;
min-width: 34px;
height: 56px;
padding: 0px 5px 16px 5px;
background: var(--purple-600);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 40 63.2129' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H40V62.2113C40 62.9934 39.1425 63.4728 38.4763 63.0632L22.095 52.9917C20.81 52.2017 19.19 52.2017 17.905 52.9917L1.52375 63.0632C0.857466 63.4728 0 62.9934 0 62.2113V0Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 40 63.2129' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H40V62.2113C40 62.9934 39.1425 63.4728 38.4763 63.0632L22.095 52.9917C20.81 52.2017 19.19 52.2017 17.905 52.9917L1.52375 63.0632C0.857466 63.4728 0 62.9934 0 62.2113V0Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: height 0.2s ease, background-color 0.2s ease;
cursor: pointer;
}
.tag-card__label {
font-family: var(--font-base);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
color: var(--white);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 5ch;
}
/* On-hover (parent card hovered) */
.tag-card.is-on-hover {
height: 72px;
}
/* Hover */
.tag-card:hover,
.tag-card.is-hover {
height: 64px;
background: var(--purple-700);
}
/* Active */
.tag-card:active,
.tag-card.is-active {
height: 84px;
background: var(--purple-800);
}
/* Disabled */
.tag-card--disabled {
background: var(--gray-10);
height: 72px;
cursor: default;
pointer-events: none;
}
.tag-card--disabled .tag-card__label {
color: var(--gray-200);
}
/* ===========================
TAG BANNER (.tag-banner)
=========================== */
.tag-banner {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border-radius: var(--radius-6);
background: var(--lime-600);
font-family: var(--font-base);
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--fg-primary);
}
.tag-banner--disabled {
background: var(--gray-10);
color: var(--gray-200);
}
/* ===========================
TAG COUNTER (.tag-counter)
=========================== */
.tag-counter {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border-radius: var(--radius-6);
background: var(--red-600);
border: 2px solid var(--white);
font-family: var(--font-base);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
color: var(--white);
}
.tag-counter--disabled {
background: var(--gray-10);
border-color: transparent;
color: var(--gray-200);
}
/* ===========================
TAG INFO (.tag-info)
=========================== */
.tag-info {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 12px;
border-radius: var(--radius-12);
background: var(--white);
border: 1px solid var(--gray-50);
font-family: var(--font-base);
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--fg-primary);
width: fit-content;
}
.tag-info--disabled {
background: var(--gray-10);
border-color: transparent;
color: var(--gray-200);
}
/* ===========================
TAG RATE (.tag-rate)
=========================== */
.tag-rate {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-rate__stars {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-rate__star {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--yellow-600);
}
.tag-rate__star--empty {
color: var(--gray-100);
}
/* Partial fill: uses --star-fill for arbitrary %. Works because .icon sets mask-image. */
.tag-rate__star--partial {
--star-fill: 50%;
color: transparent;
background: linear-gradient(to right, var(--yellow-600) var(--star-fill), var(--gray-100) var(--star-fill));
}
.tag-rate__star--half {
--star-fill: 50%;
color: transparent;
background: linear-gradient(to right, var(--yellow-600) 50%, var(--gray-100) 50%);
}
.tag-rate__label {
font-family: var(--font-base);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
color: var(--fg-primary);
}
.tag-rate__counter {
font-family: var(--font-base);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
color: var(--gray-400);
letter-spacing: 0.7;
}
.tag-rate__content {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Secondary variant */
.tag-rate--secondary {
gap: 8px;
}
.tag-rate--secondary .tag-rate__label {
font-size: var(--text-14);
line-height: var(--lh-20);
}
.tag-rate--secondary .tag-rate__counter {
font-size: var(--text-14);
line-height: var(--lh-20);
}
/* ===========================
TAG DISCOUNT (.tag-discount)
=========================== */
.tag-discount {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 2px;
border-radius: var(--radius-6);
background: var(--lime-600);
font-family: var(--font-base);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
color: var(--fg-primary);
}
.tag-discount--disabled {
background: var(--gray-10);
color: var(--gray-200);
}
@media screen and (min-width: 768px) {
.tag-card:hover,
.tag-card.is-hover {
height:84px;
}
.tag-card {
min-width: 40px;
height: 64px;
}
.tag-card__label {
font-size: var(--text-14);
line-height: var(--lh-20);
}
}
/* End */
/* Start:/assets/css/components/modal.css?17804792838884*/
/* ===========================
MODAL OVERLAY (.modal-overlay)
=========================== */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 10, 10, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: var(--space-16);
overflow-y: auto;
}
.modal-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* Scroll lock */
body.modal-open {
overflow: hidden;
padding-right: var(--scrollbar-width, 0px);
}
/* ===========================
MODAL CARD (.modal)
=========================== */
.modal {
position: relative;
width: 100%;
max-width: 488px;
background: var(--white);
border-radius: var(--radius-20);
padding: var(--space-24) var(--space-16);
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.modal-overlay.is-active .modal {
transform: translateY(0);
opacity: 1;
}
/* --- Header --- */
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
}
.modal__title {
color: var(--fg-primary);
margin: 0;
}
.modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
color: var(--fg-secondary);
background: none;
border: none;
padding: 0;
transition: color 0.15s ease;
}
.modal__close:hover {
color: var(--fg-primary);
}
/* --- Body --- */
.modal__body {
display: flex;
flex-direction: column;
gap: var(--space-32);
margin-top: var(--space-32);
}
/* --- Fields group --- */
.modal__fields {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
/* --- Footer --- */
.modal__footer {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.modal__footer .btn {
height: fit-content;
}
/* --- Privacy text --- */
.modal__privacy {
color: var(--gray-600);
width: 100%;
}
.modal__privacy a {
color: var(--fg-accent);
transition: color 0.15s ease;
text-decoration:underline;
}
.modal__privacy a:hover {
color: var(--fg-accent-dark);
}
/* ===========================
MODAL — Review variant (.modal--review)
=========================== */
.modal--review {
max-width: 560px;
padding: 0;
}
.modal--review .modal__header {
padding: var(--space-24) var(--space-16);
border-bottom: 1px solid var(--stroke-lighter);
}
.modal--review .modal__body {
padding: var(--space-16);
margin-top: 0;
gap: var(--space-24);
max-height: 70vh;
overflow-y: auto;
}
/* ===========================
MODAL — Delete variant (.modal--delete)
=========================== */
.modal--delete .modal__body {
margin-top: var(--space-16);
gap: var(--space-48);
}
.modal--delete .modal__desc {
margin: 0;
}
.modal__actions {
display: flex;
align-items: center;
gap: var(--space-24);
}
/* ===========================
MODAL — Quickorder / Rent variants
=========================== */
.modal--quickorder .modal__body,
.modal--rent .modal__body {
gap: var(--space-32);
}
.modal--quickorder .modal__footer,
.modal--rent .modal__footer {
margin-top: var(--space-16);
}
.quickorder-product {
display: flex;
gap: var(--space-16);
align-items: flex-start;
}
.quickorder-product__img {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--radius-12);
overflow: hidden;
background: var(--blue-10);
border: 1px solid var(--blue-25);
}
.quickorder-product__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quickorder-product__info {
display: flex;
flex-direction: column;
gap: var(--space-24);
min-width: 0;
flex: 1;
}
.quickorder-product__details {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.quickorder-product__title {
color: var(--fg-primary);
}
.quickorder-product__prices {
display: flex;
align-items: center;
gap: var(--space-8);
flex-wrap: wrap;
row-gap: var(--space-4);
}
.quickorder-product__price {
color: var(--fg-primary);
}
.quickorder-product__old {
color: var(--gray-400);
text-decoration: line-through;
}
.quickorder-qty {
display: inline-flex;
align-items: center;
gap: var(--space-16);
background: var(--gray-10);
border-radius: var(--radius-12);
padding: 8px 12px;
width: fit-content;
}
.quickorder-qty__btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--fg-secondary);
transition: color 0.15s;
padding: 0;
}
.quickorder-qty__btn:hover {
color: var(--fg-primary);
}
.quickorder-qty__btn:disabled {
color: #BDBDBD;
cursor: default;
}
.quickorder-qty__value {
min-width: 16px;
text-align: center;
font-family: var(--font-base);
font-size: var(--text-14);
font-weight: 500;
line-height: var(--lh-20);
color: var(--fg-primary);
}
/* ===========================
TEXTAREA inside .input
=========================== */
textarea.input__control {
resize: vertical;
min-height: var(--lh-24);
height: var(--lh-24);
font-family: var(--font-base);
}
/* ===========================
STAR RATING (.star-rating)
=========================== */
.star-rating {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
position: relative;
}
.star-rating__star {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--gray-100);
}
/* Full star (committed / hover) */
.star-rating__star.is-active,
.star-rating__star.is-hover {
color: var(--yellow-600);
}
/* Half star — gradient on icon (committed / hover) */
.star-rating__star.is-half .icon,
.star-rating__star.is-hover-half .icon {
background: linear-gradient(to right, var(--yellow-600) 50%, var(--gray-100) 50%);
}
.star-rating__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Error state */
.star-rating__hint {
width: 100%;
max-height: 0;
overflow: hidden;
font-size: var(--text-12);
line-height: var(--lh-16);
color: var(--red-700);
opacity: 0;
transition: max-height 0.3s ease, opacity 0.2s ease 0.08s;
margin-top: 4px;
}
.star-rating--error .star-rating__hint {
max-height: 24px;
opacity: 1;
}
/* ===========================
TOAST (.toast)
=========================== */
.toast {
position: fixed;
bottom: calc(var(--tabbar-height, 0px) + 16px);
left: 50%;
z-index: 1100;
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-16) var(--space-24);
background: var(--black);
border-radius: var(--radius-20);
box-shadow: 0 4px 24px rgba(10, 10, 10, 0.2);
transform: translateX(-50%) translateY(100px);
opacity: 0;
visibility: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.toast.is-active {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.toast__icon {
flex-shrink: 0;
color: var(--lime-600);
}
.toast__text {
color: var(--white);
}
.toast__close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
color: var(--gray-400);
background: none;
border: none;
padding: 0;
margin-left: var(--space-8);
transition: color 0.15s ease;
}
.toast__close:hover {
color: var(--white);
}
/* ===========================
COOKIE CONSENT (.cookie-consent)
=========================== */
.cookie-consent {
position: fixed;
bottom: 32px;
left: 50%;
z-index: 950;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
padding: var(--space-16);
background: var(--black);
border-radius: var(--radius-20);
box-shadow: 0 0 16px rgba(113, 113, 113, 0.1), 0 16px 16px rgba(113, 113, 113, 0.1);
transform: translateX(-50%) translateY(100px);
opacity: 0;
visibility: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
max-width: calc(100vw - calc(var(--container-padding) * 2));
width: 100%;
}
.cookie-consent.is-active {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Hide behind modals */
body.modal-open .cookie-consent {
opacity: 0;
visibility: hidden;
}
.cookie-consent__text {
color: var(--white);
margin: 0;
width: 100%;
}
#cookie-accept {
width: 162px;
}
.cookie-consent__text a {
color: #73C4FF;
text-decoration: underline;
transition: color 0.15s ease;
}
.cookie-consent__text a:hover {
color: #9DD5FF;
}
@media (min-width: 768px ) {
.modal {
padding: var(--space-32) var(--space-32);
}
.cookie-consent {
flex-direction: row;
gap: var(--space-40);
}
}
@media (min-width: 1024px ) {
.cookie-consent {
max-width: 700px;
}
}
/* End */
/* Start:/assets/css/components/header.css?178047643917044*/
/* ===========================
HEADER (.header) — mobile-first
=========================== */
.header {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-page);
}
/* ===========================
TOP BAR — hidden on mobile
=========================== */
.header__top {
display: none;
border-bottom: var(--stroke-w-1) solid var(--stroke-lighter);
background: #fff;
}
.header__top-inner {
max-width: 1920px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-16) var(--space-32) var(--space-12);
}
.header__top-menu {
display: flex;
align-items: center;
gap: var(--space-16);
margin: 0;
padding: 0;
height: 16px;
}
.header__top-right {
display: flex;
align-items: center;
gap: var(--space-16);
}
.header__top-link--dropdown {
gap: 4px;
}
.header__top-link--dropdown .icon {
transition: transform 0.2s ease;
}
.header__top-link--dropdown.is-open .icon {
transform: rotate(180deg);
}
/* --- Dropdown --- */
.header__dropdown {
position: relative;
}
.header__dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-16);
background: var(--white);
border-radius: var(--radius-12);
box-shadow: 0 0 16px rgba(113, 113, 113, 0.1), 0 16px 16px rgba(113, 113, 113, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.header__dropdown.is-open .header__dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.header__dropdown-link {
color: var(--fg-primary);
white-space: nowrap;
transition: color 0.15s ease;
}
.header__dropdown-link:hover {
color: var(--fg-accent);
}
/* ===========================
MAIN BAR — mobile base
=========================== */
.header__main {
background: var(--bg-page);
}
.header__main-inner {
max-width: 1920px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-12);
padding: var(--space-4) var(--container-padding);
}
/* --- Bar top: logo + phone + tg --- */
.header__bar-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.header__bar-top-right {
display: flex;
align-items: center;
gap: var(--space-16);
}
/* --- Bar bottom: catalog + search --- */
.header__bar-bottom {
display: flex;
align-items: center;
gap: var(--space-8);
}
#catalog-btn {
width:48px;
height:48px;
}
/* --- Logo --- */
.header__logo {
flex-shrink: 0;
width: 113px;
height: 40px;
}
.header__logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* --- Phone --- */
.header__phone {
white-space: nowrap;
}
/* --- Telegram (mobile only) --- */
.header__tg-link {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* --- Search: full width + secondary style on mobile --- */
.header__search {
flex: 1;
min-width: 0;
align-items: center;
border-width: var(--stroke-w-1);
border-color: var(--stroke-default);
}
.header__search:hover {
border-color: var(--stroke-accent);
box-shadow: none;
}
.header__search:focus-within {
border-color: var(--stroke-accent);
box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
/* --- Catalog button: icon-only on mobile --- */
#catalog-btn .btn__label {
display: none;
}
/* --- Hidden on mobile --- */
.header__sep {
display: none;
width: 1px;
height: 24px;
background: var(--stroke-lighter);
flex-shrink: 0;
}
.header__nav-link {
display: none;
white-space: nowrap;
}
.header__icons {
display: none;
align-items: center;
gap: var(--space-24);
}
.header__callback-btn {
display: none;
}
/* ===========================
DESKTOP (1024px+)
=========================== */
@media (min-width: 1024px) {
/* Show top bar */
.header__top {
display: block;
overflow: visible;
max-height: 50px;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.header.is-top-hidden .header__top {
overflow: hidden;
max-height: 0;
opacity: 0;
}
/* Header sticky */
.header {
position: sticky;
top: 0;
z-index: 100;
}
/* Main bar: border + horizontal padding */
.header__main {
border-bottom: var(--stroke-w-1) solid var(--stroke-lighter);
height: 72px;
}
.header__main-inner {
flex-direction: row;
align-items: center;
gap: 0;
padding: var(--space-12) var(--container-padding);
}
/* Unwrap rows so children become flex items */
.header__bar-top,
.header__bar-top-right,
.header__bar-bottom {
display: contents;
}
/* --- Ordering --- */
.header__logo { order: 1; }
#catalog-btn { order: 2; margin-left: var(--space-24); }
.header__search { order: 3; margin-left: var(--space-12); }
.header__sep { order: 4; margin-left: var(--space-24); }
.header__nav-link { order: 5; margin-left: var(--space-24); }
.header__icons { order: 6; margin-left: auto; }
.header__phone { order: 7; margin-left: var(--space-40); }
.header__callback-btn { order: 8; margin-left: var(--space-12); }
.header__tg-link { order: 9; }
/* --- Show desktop elements --- */
.header__sep {
display: block;
}
.header__nav-link {
display: inline-flex;
}
.header__callback-btn {
display: inline-flex;
}
/* --- Hide mobile telegram link --- */
.header__tg-link {
display: none;
}
/* --- Search: fixed width + primary style --- */
.header__search {
flex: none;
width: 240px;
border-width: var(--stroke-w-2);
border-color: var(--stroke-accent);
}
.header__search:hover,
.header__search:focus-within {
box-shadow: 0 0 0 4px var(--blue-50);
}
}
@media (min-width: 1024px) and (max-width: 1280px) {
.header__phone {
margin-left: 40px;
}
}
@media (min-width: 1025px) {
.header__callback-btn { margin-left: var(--space-24); }
.header__icons {
display: flex;
}
}
/* ===========================
HEADER — FULL DESKTOP (1440px+)
=========================== */
@media (min-width: 1440px) {
#catalog-btn .btn__label {
display: inline;
}
#catalog-btn {
width: fit-content;
}
}
/* ===========================
CATALOG MEGA-MENU (.catalog-menu)
=========================== */
/* Hidden on mobile */
.catalog-menu {
display: none;
}
.catalog-menu__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--opacity-dark-18);
z-index: -1;
visibility: hidden;
}
.catalog-menu__grid {
padding: 0;
}
/* Desktop dropdown (1024px+) */
@media (min-width: 1024px) {
.catalog-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.catalog-menu.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.catalog-menu.is-open ~ .catalog-menu__overlay {
visibility: visible;
}
.catalog-menu__panel {
position: relative;
background: var(--white);
z-index: 1;
}
.catalog-menu__inner {
max-width: 1920px;
margin: 0 auto;
display: flex;
padding: var(--space-24) var(--space-32) var(--space-48);
}
.catalog-menu__section {
flex: 1;
min-width: 0;
}
.catalog-menu__label {
display: block;
color: var(--gray-700);
margin-bottom: var(--space-16);
}
.catalog-menu__grid {
display: grid;
grid-template-rows: repeat(6, auto);
grid-auto-flow: column;
gap: var(--space-16) var(--space-32);
justify-items: start;
}
.catalog-menu__link {
color: var(--fg-primary);
transition: color 0.15s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.catalog-menu__link:hover {
color: var(--fg-accent);
}
.catalog-menu__divider {
flex-shrink: 0;
width: 1px;
background: var(--stroke-lighter);
margin: 0 var(--space-32);
align-self: stretch;
}
/* Info section + its divider: hidden at 1024, shown at 1440+ */
.catalog-menu__divider--wide,
.catalog-menu__info {
display: none;
}
/* Button icon swap: menu → close when open */
#catalog-btn.is-open .icon-menu {
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L12 12M12 4L4 12' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
}
/* ===========================
CATALOG MEGA-MENU — FULL DESKTOP (1440px+)
=========================== */
@media (min-width: 1440px) {
/* Show info section + divider */
.catalog-menu__divider--wide {
display: block;
}
.catalog-menu__info {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: 467px;
flex-shrink: 0;
padding-bottom: var(--space-24);
border-bottom: 1px solid var(--stroke-lighter);
align-items: flex-start;
height: fit-content;
}
.catalog-menu__info-header {
display: flex;
align-items: center;
gap: var(--space-8);
}
.catalog-menu__info-title {
color: var(--fg-primary);
}
.catalog-menu__info-text {
color: var(--gray-700);
max-width: 392px;
margin: 0;
}
}
/* ===========================
NAVIGATION MODAL (.nav-modal) — mobile/tablet
=========================== */
.nav-modal {
position: fixed;
inset: 0;
z-index: 200;
background: var(--white);
display: flex;
flex-direction: column;
transform: translateX(-100%);
visibility: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-modal.is-open {
transform: translateX(0);
visibility: visible;
padding-bottom: var(--tabbar-height);
}
/* --- Header --- */
.nav-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-16);
flex-shrink: 0;
}
.nav-modal__title {
color: var(--fg-primary);
margin: 0;
}
.nav-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
color: var(--fg-secondary);
background: none;
border: none;
padding: 0;
transition: color 0.15s ease;
}
.nav-modal__close:hover {
color: var(--fg-primary);
}
/* --- Body --- */
.nav-modal__body .accordion__inner > :last-child {
margin-top: 0;
}
.nav-modal__body {
display: flex;
flex-direction: column;
padding: 0 var(--space-16) var(--space-32);
flex: 1;
}
/* --- Category cards --- */
.nav-modal__cards {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: 0;
}
.nav-modal__card {
display: flex;
align-items: center;
height: var(--space-80);
background: var(--blue-5);
border-radius: var(--radius-20);
overflow: hidden;
position: relative;
}
.nav-modal__card-title {
padding-left: var(--space-16);
z-index: 1;
position: relative;
}
.nav-modal__card-img {
position: absolute;
right: 0;
bottom: 0;
height: 100%;
width: auto;
max-width: 60%;
object-fit: contain;
object-position: right bottom;
}
/* --- All products link --- */
.nav-modal__all-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-16) 0;
border-bottom: 1px solid var(--stroke-lighter);
color: var(--fg-primary);
transition: color 0.15s ease;
margin-top: var(--space-16);
}
.nav-modal__all-link:hover {
color: var(--fg-accent);
}
.nav-modal__all-link .icon {
color: var(--fg-secondary);
}
/* --- Accordion sections --- */
.nav-modal__sections .accordion__inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
align-items: flex-start;
margin: 0;
padding: 0;
}
/* --- Contacts --- */
.nav-modal__contacts {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin-top: var(--space-32);
}
.nav-modal__address {
display: flex;
align-items: flex-start;
gap: var(--space-8);
color: var(--fg-primary);
}
.nav-modal__address .icon {
color: var(--fg-secondary);
flex-shrink: 0;
}
.nav-modal__phone-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-modal__phone-info {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.nav-modal__phone {
color: var(--fg-primary);
transition: color 0.15s ease;
}
.nav-modal__phone:hover {
color: var(--fg-accent);
}
.nav-modal__hours {
color: var(--gray-600);
}
/* Override tg icon color inside filled button */
.nav-modal .icon-tg {
background-color: currentColor;
}
/* --- Footer --- */
.nav-modal__footer {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin-top: auto;
padding-top: var(--space-32);
}
.nav-modal__footer-divider {
height: 1px;
background: var(--stroke-lighter);
}
.nav-modal__copyright {
color: var(--gray-600);
}
.nav-modal__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
}
.nav-modal__legal-link {
color: var(--gray-400);
transition: color 0.15s ease;
}
.nav-modal__legal-link:hover {
color: var(--fg-accent);
}
.nav-modal__legal-sep {
width: 1px;
height: 12px;
background: var(--gray-100);
}
/* Tablet (768px+) — more padding */
@media (min-width: 768px) {
.nav-modal__header {
padding: var(--space-24);
}
.nav-modal__card-title {
padding-left: var(--space-16);
}
.nav-modal__body {
padding: 0 var(--space-24) var(--space-32);
}
.nav-modal__card-img {
max-width: 240px;
}
.nav-modal__card {
height: var(--space-120);
}
}
/* Hidden on desktop (1024px+) */
@media (min-width: 1024px) {
.nav-modal {
display: none;
}
}
/* ===========================
SEARCH DROPDOWN (.search-dropdown)
=========================== */
.search-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: var(--space-4);
background: var(--white);
border: 1px solid var(--stroke-default);
border-radius: var(--radius-12);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 100;
max-height: 400px;
overflow-y: auto;
}
.search-dropdown.is-visible {
display: block;
}
/* Desktop: fixed width tied to input */
@media (min-width: 1025px) {
.header__search {
position: relative;
}
.search-dropdown {
width: 360px;
}
}
/* Mobile/tablet: full width relative to bar-bottom */
@media (max-width: 1024px) {
.header__bar-bottom {
position: relative;
}
}
/* --- Dropdown item --- */
.search-dropdown__item:first-of-type {
padding-top: 16px;
}
.search-dropdown__item:last-of-type {
padding-bottom: 16px;
}
.search-dropdown__item {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-8) var(--space-16);
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
}
.search-dropdown__item:hover {
background: var(--blue-5);
}
.search-dropdown__img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: var(--radius-8);
flex-shrink: 0;
background: var(--blue-10);
}
.search-dropdown__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.search-dropdown__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-dropdown__prices {
display: flex;
align-items: center;
gap: var(--space-8);
}
.search-dropdown__old-price {
text-decoration: line-through;
color: var(--fg-secondary);
}
/* Discount badge inside search dropdown uses .tag-discount from tags.css */
.search-dropdown__rating {
display: flex;
align-items: center;
gap: var(--space-4);
font-size: var(--text-12);
line-height: var(--lh-16);
color: var(--yellow-600);
}
.search-dropdown__rating-count {
color: var(--fg-secondary);
}
/* --- Dropdown empty / all-results --- */
.search-dropdown__empty {
padding: var(--space-16) var(--space-12);
font-size: var(--text-14);
color: var(--fg-secondary);
text-align: center;
}
.search-dropdown__all {
display: block;
padding: var(--space-12);
text-align: center;
font-size: var(--text-14);
font-weight: 500;
color: var(--fg-accent);
border-top: 1px solid var(--stroke-lighter);
transition: background 0.15s ease;
}
.search-dropdown__all:hover {
background: var(--blue-5);
}
/* --- Dropdown loading --- */
.search-dropdown__loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-16) var(--space-12);
}
.search-dropdown__spinner {
width: 24px;
height: 24px;
border: 2px solid var(--stroke-default);
border-top-color: var(--stroke-accent);
border-radius: 50%;
animation: search-spin 0.6s linear infinite;
}
@keyframes search-spin {
to { transform: rotate(360deg); }
}
/* End */
/* Start:/assets/css/components/tabbar.css?17793622271539*/
/* ===========================
TAB BAR (.tabbar) — mobile/tablet only
=========================== */
:root {
--tabbar-height: 76px;
}
.tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-16) var(--space-24) var(--space-24);
background: var(--white);
box-shadow: 0 0 16px rgba(113, 113, 113, 0.05), 0 -16px 16px rgba(113, 113, 113, 0.05);
}
/* Reserve space for tabbar */
body {
padding-bottom: var(--tabbar-height);
}
.tabbar__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
background: none;
border: none;
cursor: pointer;
text-decoration: none;
color: var(--gray-400);
transition: color 0.15s ease;
padding: 0;
}
.tabbar__item.is-selected {
color: var(--fg-primary);
}
.tabbar__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.tabbar__counter {
position: absolute;
top: -8px;
left: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 0 var(--space-4);
border-radius: var(--radius-6);
background: var(--bg-status-5);
border: var(--stroke-w-2) solid var(--white);
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
color: var(--white);
}
/* Hidden on desktop (1025px+) */
@media (min-width: 1025px) {
.tabbar {
display: none;
}
:root {
--tabbar-height: 0px;
}
}
/* End */
/* Start:/assets/css/components/footer.css?17793622279419*/
@media (min-width: 1025px) {
body:has(.seo-text) footer {
background-color: var(--gray-5);
}
}
/* ===========================
BANNER CTA (.banner-cta)
=========================== */
.banner-cta-section {
margin-top: var(--space-40);
margin-bottom: var(--space-64);
width: 100%;
}
.banner-cta {
position: relative;
border-radius: var(--radius-20);
overflow: hidden;
padding: var(--space-24);
margin: 0 -8px;
}
.banner-cta__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
object-position: 20% 45%;
}
.banner-cta__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 37%, transparent 130%);
z-index: 1;
}
.banner-cta__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.banner-cta__title {
color: var(--white);
max-width: 277px;
}
.banner-cta__bg:not(.mobile) {
display: none;
}
.banner-cta__subtitle {
color: var(--gray-25);
margin: 0;
max-width: 300px;
}
.banner-cta__form {
display: flex;
gap: var(--space-8);
align-items: stretch;
margin-top: var(--space-32);
}
.banner-cta .input {
min-width: 0;
}
.banner-cta__input {
min-width: 0;
width: 240px;
}
/* Mobile: icon-only submit */
.banner-cta__submit .btn__label {
display: none;
}
.banner-cta__privacy {
color: var(--gray-50);
margin: 0;
max-width: 400px;
}
.banner-cta__privacy-link {
color: #73C4FF;
text-decoration: underline;
}
/* ===========================
FOOTER (.footer)
=========================== */
.footer__inner {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding-bottom: var(--space-32);
}
.footer__main {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
/* Info: display:contents on mobile for reordering */
.footer__info {
display: contents;
}
.footer__logo {
order: 1;
display: inline-flex;
}
.footer__logo img {
width: 113px;
height: 40px;
}
/* --- Nav accordion (mobile) --- */
.footer__nav {
order: 2;
}
.footer__nav-col {
display: contents;
}
.footer__nav-col .accordion__item.is-open .accordion__header
.footer__nav-col ul {
padding: 0;
}
.footer__nav-col .accordion__item.is-open .accordion__header {
padding-bottom:var(--space-20);
}
.footer__nav .accordion__inner {
gap: var(--space-12);
margin-bottom: 0;
padding: 0;
}
.footer__nav .accordion__item.is-open .accordion__inner {
margin-bottom: 22px;
}
.footer__nav-col .accordion__inner > :last-child {
margin: 0;
}
/* --- Contacts (mobile) --- */
.footer__contacts {
order: 3;
display: flex;
gap: var(--space-32);
align-items: flex-end;
margin-top: 30px;
}
.footer__contact-group {
display: flex;
flex-direction: column;
gap: var(--space-20);
flex: 1;
}
.footer__contact-block {
display: flex;
align-items: flex-start;
gap: var(--space-12);
flex-direction: column;
}
.footer__contact-block .icon {
color: var(--gray-700);
flex-shrink: 0;
margin-top: 2px;
}
/* Mobile: address before phone */
.footer__contact-address {
order: -1;
}
.footer__contact-details {
display: flex;
flex-direction: column;
}
.footer__phone-number {
color: var(--fg-primary);
transition: color 0.15s ease;
}
.footer__phone-number:hover {
color: var(--fg-accent);
}
.footer__phone-hours {
color: var(--gray-400);
}
.footer__address-text {
color: var(--fg-primary);
}
/* --- Bottom --- */
.footer__bottom {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.footer__divider {
display: block;
height: 1px;
background: var(--stroke-lighter);
margin: 4px 0;
}
.footer__bottom-inner {
display: flex;
flex-direction: column;
gap: var(--space-32);
}
.footer__copyright {
color: var(--gray-400);
}
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-8) var(--space-16);
align-items: center;
}
.footer__legal-sep {
width: 1px;
height: 12px;
background: var(--gray-200);
}
@media (min-width: 768px) {
.footer__main {
gap: var(--space-32);
}
.footer__nav-col .accordion__item.is-open .accordion__header {
padding-bottom: 24px;
}
.footer__contacts {
margin-top: 8px;
}
.footer__bottom-inner {
gap: var(--space-40);
}
}
@media (min-width: 420px) and (max-width: 1024px) {
.footer__nav .accordion__inner {
display: grid;
grid-template-columns: minmax(140px, 184px) 1fr;
grid-template-rows: repeat(calc(var(--rows) / 2), auto);
grid-auto-flow: column;
justify-items: start;
}
.footer__nav .footer__nav-col:first-of-type .accordion__header:first-of-type {
padding-top: 0;
}
}
@media (min-width: 460px) {
.banner-cta__title {
max-width: unset;
}
.banner-cta__title br {
display: none;
}
.banner-cta__privacy > br {
display: none;
}
.banner-cta__form {
gap:var(--space-12);
}
.banner-cta {
padding: var(--space-40) 32px;
}
.banner-cta__bg.mobile {
display: none;
}
.banner-cta__bg:not(.mobile) {
display: block;
object-position: 50%;
}
.banner-cta__overlay {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}
.banner-cta__submit .btn__label {
display: inline;
}
}
/* ===========================
DESKTOP (1025px+)
=========================== */
@media (min-width: 1025px) {
.footer__nav .accordion__title {
color: var(--gray-700);
}
/* --- Banner --- */
.banner-cta-section {
margin-bottom: var(--space-120);
margin-top: var(--space-40);
}
.banner-cta {
padding: var(--space-40) var(--space-32);
margin: 0;
}
.banner-cta__overlay {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, transparent 40%);
}
.banner-cta__input {
flex: none;
}
/* --- Footer layout --- */
.footer__inner {
gap: 56px;
}
.footer__main {
flex-direction: row;
justify-content: space-between;
}
/* Info: column on desktop */
.footer__info {
display: flex;
flex-direction: column;
gap: var(--space-40);
width: 292px;
flex-shrink: 0;
}
/* Contacts: column on desktop */
.footer__contacts {
flex-direction: column;
gap: var(--space-40);
align-items: flex-start;
margin-top: 0px;
}
/* Desktop: phone before address (natural order) */
.footer__contact-address {
order: 0;
}
/* --- Nav columns --- */
.footer__nav {
display: flex;
gap: var(--space-64);
}
.footer__nav-col {
display: flex;
flex-direction: column;
gap: var(--space-32);
}
/* Force accordion always open */
.footer__nav .accordion__body {
grid-template-rows: 1fr;
}
.footer__nav .accordion__chevron {
display: none;
}
.footer__nav .accordion__header {
cursor: default;
pointer-events: none;
padding: 0 0 var(--space-24);
}
/* Remove item borders */
.footer__nav .accordion__item {
border-bottom: none;
}
/* Inner gap + remove bottom margin */
.footer__nav .accordion__inner {
gap: var(--space-16);
}
.footer__nav .accordion__inner > :last-child {
margin-bottom: 0;
}
/* --- Bottom row --- */
.footer__bottom-inner {
flex-direction: row;
align-items: center;
}
}
/* ===========================
FULL DESKTOP (1440px+)
=========================== */
@media (min-width: 1440px) {
.footer__main {
padding-left: var(--space-32);
padding-right: var(--space-32);
}
.footer__nav {
gap: var(--space-120);
}
/* Links upgrade to 20px */
.footer__nav .text-btn--md {
font-size: var(--text-20);
line-height: var(--lh-28);
}
}
/* ===========================
SCROLL TO TOP (.scroll-top)
=========================== */
.scroll-top {
position: fixed;
bottom: calc(var(--tabbar-height, 0px) + 16px);
right: var(--space-16);
z-index: 900;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--stroke-lighter);
box-shadow: 0 4px 16px rgba(10, 10, 10, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--fg-secondary);
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.15s ease, color 0.15s ease;
padding: 0;
}
.scroll-top .icon {
transform: rotate(180deg);
}
.scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
background: var(--gray-25);
color: var(--fg-primary);
}
@media (min-width: 1025px) {
.scroll-top {
right: var(--space-32);
bottom: var(--space-32);
}
}
/* End */
/* Start:/assets/css/components/breadcrumbs.css?17793622271358*/
/* ===========================
BREADCRUMBS (.breadcrumbs)
=========================== */
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
row-gap: var(--space-4);
margin-top: var(--space-48);
margin-bottom: var(--space-8);
}
.breadcrumbs__link {
font-size: var(--text-14);
line-height: var(--lh-20);
}
.breadcrumbs__link {
position: relative;
font-family: var(--font-base);
font-weight: 400;
color: var(--gray-600);
white-space: nowrap;
transition: color 0.15s ease;
}
/* 40px tall click overlay */
.breadcrumbs__link::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 40px;
transform: translateY(-50%);
}
.breadcrumbs__link:hover {
color: var(--fg-accent-dark);
}
.breadcrumbs__sep {
font-family: var(--font-base);
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--fg-secondary);
flex-shrink: 0;
}
.breadcrumbs__current {
font-family: var(--font-base);
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
color: var(--black);
white-space: nowrap;
}
@media (min-width: 1025px) {
.breadcrumbs {
margin-top: var(--space-64);
margin-bottom: var(--space-16);
}
}
/* End */
/* Start:/assets/css/components/product-card.css?17804952239833*/
/* ===========================
PRODUCT CARD (.product-card)
=========================== */
.product-card {
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
.product-card .tab-icon {
width: 32px;
height: 32px;
}
.product-card .tab-icon .icon {
max-width: 16px;
max-height: 16px;
}
.product-card .tab-icon .icon {
max-width: 16px;
max-height: 16px;
}
/* --- Image container --- */
.product-card__image {
position: relative;
background: var(--blue-10);
border: 1px solid var(--blue-25);
border-radius: var(--radius-12);
overflow: hidden;
height: 164px;
}
/* Tag Card position inside image */
.product-card__image .tag-card {
position: absolute;
top: -1px;
left: 10px;
z-index: 2;
}
.product-card__image .tag-card[data-sort-trigger] {
cursor: pointer;
}
/* --- Card link wrapper ---
display:contents — ссылка не создаёт блок, её дети участвуют в flex карточки.
Клик по image/info всплывает через DOM до → навигация работает.
Клик по dots/buttons не проходит через → навигации нет. */
.product-card__link {
display: contents;
}
.product-card__image { order: 1; cursor: pointer; }
.product-card__dots { order: 2; }
.product-card__info { order: 3; cursor: pointer; }
.product-card__buttons { order: 4; }
/* --- Action icons --- */
.product-card__actions {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
gap: var(--space-8);
z-index: 3;
}
/* Action buttons: always visible on mobile/tablet */
.product-card__action {
display: inline-flex;
}
/* Mobile: скрыть избранное и сравнение */
.product-card__action[data-action="favorites"],
.product-card__action[data-action="compare"] {
display: none;
}
/* --- Image slider (Swiper inside card) --- */
.product-card__slider {
width: 100%;
height: 100%;
overflow: hidden;
}
.pd-related .swiper-slide:hover {
z-index: 10;
}
.product-card__slider .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.product-card__slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* --- Pagination bars (always bar-style) --- */
.product-card__dots {
display: flex;
justify-content: center;
gap: 4px;
margin-top: var(--space-4);
opacity: 1;
position: unset;
z-index: 3;
}
.product-card__dots .swiper-pagination-bullet {
width: 9.6px;
height: 4px;
border-radius: var(--radius-96);
background: var(--blue-25);
cursor: pointer;
transition: background 0.2s;
margin: 0 !important;
opacity: 1;
}
.product-card__dots .swiper-pagination-bullet-active {
background: var(--bg-accent-primary);
}
/* --- Info block --- */
.product-card__info {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-top: var(--space-12);
}
/* Title: 2 lines max, then ellipsis */
.product-card__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--fg-primary);
}
/* --- Price block --- */
.product-card__price-block {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Prices row */
.product-card__prices {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-12);
row-gap: var(--space-2);
}
.product-card__price {
color: var(--fg-primary);
}
.product-card__old-price {
color: var(--gray-400);
text-decoration: line-through;
}
/* ===========================
PRODUCT CARD — Buttons
=========================== */
.product-card__buttons {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-top: var(--space-16);
position: relative;
z-index: 3;
}
.product-card__cart-btn {
width: 100%;
}
.product-card__quick-btn {
width: 100%;
}
.product-card__notify-label-desktop {
display: none;
}
.product-card__notify-label-mobile {
display: inline;
}
.product-row .product-row-slider {
min-width: 0;
width: 100%;
overflow: visible;
height: 304px;
}
.product-row .product-row-slider > .swiper-wrapper > .swiper-slide {
width: 160px;
}
@media (min-width: 768px) {
.product-card__image {
height: 240px;
}
.product-row .product-row-slider > .swiper-wrapper > .swiper-slide {
width: 220px;
}
.product-card__image .tag-card {
left: 20px;
}
.product-card__dots {
margin-top: var(--space-8);
}
.product-card__info {
margin-top: var(--space-16);
}
.product-row .product-row-slider {
height: 368px;
}
}
/* ===========================
DESKTOP (≥1025px) — Hover card
=========================== */
@media (min-width: 1025px) {
.product-card__notify-label-desktop {
display: inline;
}
.product-card__notify-label-mobile {
display: none;
}
/* Dots: утягиваем поверх image отрицательным margin, показываем при ховере */
.product-card__dots {
position: relative;
z-index: 3;
margin-top: -4px;
padding: 0 8px;
gap: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.product-card__dots .swiper-pagination-bullet {
flex: none;
width: 54px;
}
.product-card:hover .product-card__dots {
opacity: 1;
pointer-events: auto;
}
/* Компенсация отрицательного margin dots */
.product-card__info {
margin-top: 16px;
}
.product-card__actions {
top: 20px;
right: 20px;
}
.product-card {
border: 1px solid transparent;
border-radius: var(--radius-16);
padding: 12px;
margin: -12px;
z-index: 1;
transition: background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
/* Hide buttons by default on desktop (shown on hover) */
.product-card__buttons {
display: none;
}
.product-card__quick-btn {
display: none;
}
/* Show all action buttons as flex items; non-selected are transparent */
.product-card__action {
display: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Selected actions always visible */
.product-card__action.is-selected {
/*display: inline-flex;*/
opacity: 1;
pointer-events: auto;
}
/* --- Hover state --- */
.product-card:hover {
background: var(--white);
border-color: var(--gray-25);
border-radius: var(--radius-16) var(--radius-16) 0 0;
box-shadow: 0 0 16px rgba(113, 113, 113, 0.1),
0 16px 16px rgba(113, 113, 113, 0.1);
z-index: 2;
}
.product-card:hover .product-card__action {
display: inline-flex;
opacity: 1;
pointer-events: auto;
}
.product-card:hover .product-card__image {
background: #fff;
border-color: transparent;
}
/* Buttons: absolutely positioned below the card, overlapping neighbors */
.product-card:hover .product-card__buttons {
z-index: 3;
display: flex;
position: absolute;
left: 0;
right: 0;
bottom: 0;
transform: translateY(100%);
flex-direction: column;
gap: var(--space-8);
padding: var(--space-8) 12px 12px;
background: var(--white);
border: 1px solid var(--gray-25);
border-top: none;
border-radius: 0 0 var(--radius-16) var(--radius-16);
box-shadow: 0 8px 16px rgba(113, 113, 113, 0.1);
margin-top: 0;
}
.product-card:hover .product-card__quick-btn {
display: inline-flex;
}
/* Desktop hover buttons use md sizing */
.product-card:hover .product-card__cart-btn {
border-radius: var(--radius-12);
padding: var(--space-12) var(--space-16);
font-size: var(--text-16);
line-height: var(--lh-24);
}
}
/* ===========================
PRODUCT ROW (.product-row) — Swiper-based
=========================== */
.product-row {
min-width: 0;
width: 100%;
overflow: hidden;
padding: 0 var(--container-padding);
}
@media (min-width: 769px) {
.product-card .tab-icon {
width: 48px;
height: 48px;
}
.product-card .tab-icon .icon {
max-width: 24px;
max-height: 24px;
}
}
@media (min-width: 1025px) {
.product-row .product-row-slider > .swiper-wrapper > .swiper-slide {
width: 298px;
}
.product-row .product-row-slider {
height: 434px;
}
.product-card__image {
height: 302px;
}
/* Extra bottom space for hover buttons overlay */
.product-row {
padding-bottom: 100px;
margin-bottom: -100px;
padding-top: 20px;
margin-top: -20px;
}
.product-page .pd-related.pg-bestseller {
margin-top: 80px;
}
.pd-related.pg-bestseller {
z-index: 4;
}
}
@media (min-width: 1440px) {
.product-row .product-row-slider > .swiper-wrapper > .swiper-slide {
width: 364px;
}
.product-row .product-row-slider {
height: 434px;
}
.product-page .pd-related.pg-bestseller {
z-index: 4;
}
.pd-related.pg-bestseller {
margin-top: 20px;
}
.product-page ~ .banner-cta-section {
margin-top: 200px;
}
}
/* End */
/* Start:/assets/css/components/wysiwyg-content.css?17793622273741*/
/* ===========================
WYSIWYG CONTENT (.block-wysiwyg-content)
Reusable utility for rich-text / editor output.
Handles typography, spacing and element styles
for h2–h6, p, ul, ol, li, blockquote, img.
=========================== */
/* --- Reset & base spacing --- */
.block-wysiwyg-content > * {
margin: 0;
}
.block-wysiwyg-content > * + * {
margin-top: var(--space-12);
}
/* Extra space before headings */
.block-wysiwyg-content > h2,
.block-wysiwyg-content > h3,
.block-wysiwyg-content > h4,
.block-wysiwyg-content > h5,
.block-wysiwyg-content > h6 {
margin-top: var(--space-40);
}
/* Space after headings to following content */
.block-wysiwyg-content > h2 + *,
.block-wysiwyg-content > h3 + *,
.block-wysiwyg-content > h4 + *,
.block-wysiwyg-content > h5 + *,
.block-wysiwyg-content > h6 + * {
margin-top: var(--space-24);
}
/* First child — no top margin */
.block-wysiwyg-content > *:first-child {
margin-top: 0;
}
/* Images — extra spacing */
.block-wysiwyg-content > img {
margin-top: var(--space-40);
}
.block-wysiwyg-content > img + * {
margin-top: var(--space-40);
}
/* --- Headings --- */
.block-wysiwyg-content h2 {
font-family: var(--font-base);
font-size: var(--text-24);
line-height: var(--lh-32);
font-weight: 500;
}
.block-wysiwyg-content h3 {
font-family: var(--font-base);
font-size: var(--text-20);
line-height: var(--lh-28);
font-weight: 500;
}
/* h4, h5, h6 — identical, one step below h3 */
.block-wysiwyg-content h4,
.block-wysiwyg-content h5,
.block-wysiwyg-content h6 {
font-family: var(--font-base);
font-size: var(--text-18);
line-height: var(--lh-24);
font-weight: 500;
}
/* --- Body text (mobile-first: 14/20) --- */
.block-wysiwyg-content p {
font-size: var(--text-14);
line-height: var(--lh-20);
color: var(--fg-tertiary);
text-align: justify;
}
.block-wysiwyg-content li {
font-size: var(--text-14);
line-height: var(--lh-20);
color: var(--fg-tertiary);
}
/* --- Lists --- */
.block-wysiwyg-content ul,
.block-wysiwyg-content ol {
padding-left: var(--space-24);
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.block-wysiwyg-content ul {
list-style: disc;
}
.block-wysiwyg-content ol {
list-style: decimal;
}
/* --- Blockquote --- */
.block-wysiwyg-content blockquote {
margin-top: var(--space-24);
margin-bottom: var(--space-12);
padding: var(--space-20) var(--space-24);
border-left: 3px solid var(--stroke-accent);
background: var(--bg-surface-darker);
border-radius: 0 var(--radius-12) var(--radius-12) 0;
font-size: var(--text-14);
line-height: var(--lh-20);
color: var(--fg-tertiary);
font-style: italic;
}
/* --- Images --- */
.block-wysiwyg-content img {
width: 100%;
height: auto;
border-radius: var(--radius-20);
display: block;
}
/* ===========================
RESPONSIVE: 769px+
Body text 14/20 → 16/24
=========================== */
@media (min-width: 769px) {
.block-wysiwyg-content p,
.block-wysiwyg-content li {
font-size: var(--text-16);
line-height: var(--lh-24);
}
.block-wysiwyg-content blockquote {
font-size: var(--text-16);
line-height: var(--lh-24);
padding: var(--space-24) var(--space-32);
}
}
/* ===========================
RESPONSIVE: 1025px+
Headings scale up
=========================== */
@media (min-width: 1025px) {
.block-wysiwyg-content h2 {
font-size: var(--text-32);
line-height: var(--lh-40);
}
.block-wysiwyg-content h3 {
font-size: var(--text-24);
line-height: var(--lh-32);
}
.block-wysiwyg-content h4,
.block-wysiwyg-content h5,
.block-wysiwyg-content h6 {
font-size: var(--text-20);
line-height: var(--lh-28);
}
}
/* End */
/* Start:/assets/css/components/utils.css?17793622273701*/
/* ===========================
UTILITIES
=========================== */
.mb-0 { margin-bottom: 0; }
/* ===========================
CUSTOM SCROLLBAR
=========================== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: rgba(132, 132, 132, 0.4) var(--gray-10);
}
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: var(--gray-10);
border-radius: var(--radius-16);
}
::-webkit-scrollbar-thumb {
background: rgba(132, 132, 132, 0.4);
border-radius: var(--radius-16);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(132, 132, 132, 0.6);
}
/* ===========================
ERROR PAGE (.error-page)
=========================== */
.error-page {
margin-top: var(--space-48);
}
.error-page__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-32);
}
.error-page__content {
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: 480px;
align-items: center;
z-index: 2;
}
.error-page__title {
color: var(--fg-primary);
margin: 0px;
}
.error-page__text {
color: var(--gray-700);
max-width: 280px;
margin: 0;
}
.error-page__link {
color: var(--fg-accent);
text-decoration: underline;
}
.error-page__link:hover {
color: var(--fg-accent-dark);
}
.error-page__image {
position: relative;
width: 100%;
max-width: 551px;
top: -80px;
}
.error-page__image video {
width: 100%;
object-fit: cover;
height: 260px;
}
.error-page__image img {
width: 100%;
height: auto;
}
.error-page__image::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, var(--white) 70%);
pointer-events: none;
}
.block-wysiwig {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
}
.block-wysiwig ul,
.block-wysiwig ol {
padding-inline-start: 1rem;
}
.block-wysiwig.block-wysiwig-medium {
font-size: var(--text-16);
line-height: var(--lh-24);
}
.block-wysiwig h1,
.block-wysiwig h2,
.block-wysiwig h3,
.block-wysiwig h4,
.block-wysiwig h5,
.block-wysiwig h6 {
font-family: var(--font-base);
font-size: var(--text-18);
line-height: var(--lh-28);
font-weight: 500;
margin-bottom: 12px;
margin-top: 32px;
color: #09081C;
}
.block-wysiwig > :first-child {
margin-top: 0;
}
.block-wysiwig > :last-child {
margin-bottom: 0;
}
.block-wysiwig > * {
margin-bottom: var(--space-12);
}
.delivery-page~.banner-cta-section,
.faq-page~.banner-cta-section {
margin-top: 120px;
}
@media (min-width: 475px) {
.error-page__text {
max-width: 460px;
}
}
@media (min-width: 768px) {
.error-page {
margin-top: var(--space-64);
}
.block-wysiwig h1, .block-wysiwig h2, .block-wysiwig h3, .block-wysiwig h4, .block-wysiwig h5, .block-wysiwig h6 {
margin-bottom: 12px;
}
}
@media (min-width: 1025px) {
.delivery-page~.banner-cta-section,
.faq-page~.banner-cta-section {
margin-top: 200px;
}
.error-page__image video {
height: 400px;
}
.block-wysiwig {
font-size: var(--text-16);
line-height: var(--lh-24);
}
.block-wysiwig h1, .block-wysiwig h2, .block-wysiwig h3, .block-wysiwig h4, .block-wysiwig h5, .block-wysiwig h6 {
margin-bottom: 16px;
}
.error-page {
margin-top: var(--space-120);
}
/* text-heading-5 → text-heading-3 */
.error-page__title {
font-size: var(--text-48);
line-height: var(--lh-58);
}
/* text-body-sm → text-body */
.error-page__text {
font-size: var(--text-16);
line-height: var(--lh-24);
}
.error-page__image {
max-width: 950px;
}
}
/* End */
/* Start:/assets/css/components/typography.css?177936222715741*/
/* ===========================
TYPOGRAPHY
=========================== */
.text-heading-1 {
font-family: var(--font-head);
font-size: var(--text-72);
line-height: var(--lh-80);
font-weight: 400;
}
.text-heading-2 {
font-family: var(--font-head);
font-size: var(--text-64);
line-height: var(--lh-72);
font-weight: 400;
}
.text-heading-3 {
font-family: var(--font-head);
font-size: var(--text-48);
line-height: var(--lh-58);
font-weight: 400;
}
.text-heading-4 {
font-family: var(--font-head);
font-size: var(--text-40);
line-height: var(--lh-48);
font-weight: 400;
}
.text-heading-5 {
font-family: var(--font-head);
font-size: var(--text-36);
line-height: var(--lh-44);
font-weight: 400;
}
.text-heading-6 {
font-family: var(--font-head);
font-size: var(--text-32);
line-height: var(--lh-40);
font-weight: 400;
}
.text-heading-7 {
font-family: var(--font-base);
font-size: var(--text-24);
line-height: var(--lh-32);
font-weight: 500;
}
.text-title-sm {
font-family: var(--font-base);
font-size: var(--text-18);
line-height: var(--lh-28);
font-weight: 500;
}
.text-body-lg {
font-size: var(--text-20);
line-height: var(--lh-28);
font-weight: 400;
}
.text-body {
font-size: var(--text-16);
line-height: var(--lh-24);
font-weight: 400;
}
.text-body-sm {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
}
.text-caption-default {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
}
.text-caption {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
}
.text-hint {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
}
.text-label-lg {
font-size: var(--text-20);
line-height: var(--lh-28);
font-weight: 500;
}
.text-label {
font-size: var(--text-16);
line-height: var(--lh-24);
font-weight: 500;
}
.text-label-sm {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 400;
}
.text-label-sm-strong {
font-size: var(--text-14);
line-height: var(--lh-20);
font-weight: 500;
}
.text-label-xs {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 400;
}
.text-label-xs-strong {
font-size: var(--text-12);
line-height: var(--lh-16);
font-weight: 500;
}
/* ===========================
RESPONSIVE TYPOGRAPHY (475px+)
=========================== */
@media (min-width: 475px) {
.text-xs-heading-1 { font-family: var(--font-head); font-size: var(--text-72); line-height: var(--lh-80); font-weight: 400; }
.text-xs-heading-2 { font-family: var(--font-head); font-size: var(--text-64); line-height: var(--lh-72); font-weight: 400; }
.text-xs-heading-3 { font-family: var(--font-head); font-size: var(--text-48); line-height: var(--lh-58); font-weight: 400; }
.text-xs-heading-4 { font-family: var(--font-head); font-size: var(--text-40); line-height: var(--lh-48); font-weight: 400; }
.text-xs-heading-5 { font-family: var(--font-head); font-size: var(--text-36); line-height: var(--lh-44); font-weight: 400; }
.text-xs-heading-6 { font-family: var(--font-head); font-size: var(--text-32); line-height: var(--lh-40); font-weight: 400; }
.text-xs-heading-7 { font-family: var(--font-base); font-size: var(--text-24); line-height: var(--lh-32); font-weight: 500; }
.text-xs-title-sm { font-family: var(--font-base); font-size: var(--text-18); line-height: var(--lh-28); font-weight: 500; }
.text-xs-body-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 400; }
.text-xs-body { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 400; }
.text-xs-body-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-xs-caption-default { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-xs-caption { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-xs-hint { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-xs-label-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; }
.text-xs-label { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; }
.text-xs-label-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-xs-label-sm-strong { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 500; }
.text-xs-label-xs { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-xs-label-xs-strong { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 500; }
}
/* ===========================
RESPONSIVE TYPOGRAPHY (769px+)
=========================== */
@media (min-width: 769px) {
.text-md-heading-1 { font-family: var(--font-head); font-size: var(--text-72); line-height: var(--lh-80); font-weight: 400; }
.text-md-heading-2 { font-family: var(--font-head); font-size: var(--text-64); line-height: var(--lh-72); font-weight: 400; }
.text-md-heading-3 { font-family: var(--font-head); font-size: var(--text-48); line-height: var(--lh-58); font-weight: 400; }
.text-md-heading-4 { font-family: var(--font-head); font-size: var(--text-40); line-height: var(--lh-48); font-weight: 400; }
.text-md-heading-5 { font-family: var(--font-head); font-size: var(--text-36); line-height: var(--lh-44); font-weight: 400; }
.text-md-heading-6 { font-family: var(--font-head); font-size: var(--text-32); line-height: var(--lh-40); font-weight: 400; }
.text-md-heading-7 { font-family: var(--font-base); font-size: var(--text-24); line-height: var(--lh-32); font-weight: 500; }
.text-md-title-sm { font-family: var(--font-base); font-size: var(--text-18); line-height: var(--lh-28); font-weight: 500; }
.text-md-body-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 400; }
.text-md-body { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 400; }
.text-md-body-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-md-caption-default { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-md-caption { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-md-hint { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-md-label-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; }
.text-md-label { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; }
.text-md-label-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-md-label-sm-strong { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 500; }
.text-md-label-xs { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-md-label-xs-strong { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 500; }
}
/* ===========================
RESPONSIVE TYPOGRAPHY (1025px+)
=========================== */
@media (min-width: 1025px) {
.text-tb-heading-1 { font-family: var(--font-head); font-size: var(--text-72); line-height: var(--lh-80); font-weight: 400; }
.text-tb-heading-2 { font-family: var(--font-head); font-size: var(--text-64); line-height: var(--lh-72); font-weight: 400; }
.text-tb-heading-3 { font-family: var(--font-head); font-size: var(--text-48); line-height: var(--lh-58); font-weight: 400; }
.text-tb-heading-4 { font-family: var(--font-head); font-size: var(--text-40); line-height: var(--lh-48); font-weight: 400; }
.text-tb-heading-5 { font-family: var(--font-head); font-size: var(--text-36); line-height: var(--lh-44); font-weight: 400; }
.text-tb-heading-6 { font-family: var(--font-head); font-size: var(--text-32); line-height: var(--lh-40); font-weight: 400; }
.text-tb-heading-7 { font-family: var(--font-base); font-size: var(--text-24); line-height: var(--lh-32); font-weight: 500; }
.text-tb-title-sm { font-family: var(--font-base); font-size: var(--text-18); line-height: var(--lh-28); font-weight: 500; }
.text-tb-body-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 400; }
.text-tb-body { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 400; }
.text-tb-body-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-tb-caption-default { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-tb-caption { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-tb-hint { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-tb-label-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; }
.text-tb-label { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; }
.text-tb-label-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-tb-label-sm-strong { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 500; }
.text-tb-label-xs { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-tb-label-xs-strong { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 500; }
}
/* ===========================
RESPONSIVE TYPOGRAPHY (1281px+)
=========================== */
@media (min-width: 1281px) {
.text-lg-heading-1 { font-family: var(--font-head); font-size: var(--text-72); line-height: var(--lh-80); font-weight: 400; }
.text-lg-heading-2 { font-family: var(--font-head); font-size: var(--text-64); line-height: var(--lh-72); font-weight: 400; }
.text-lg-heading-3 { font-family: var(--font-head); font-size: var(--text-48); line-height: var(--lh-58); font-weight: 400; }
.text-lg-heading-4 { font-family: var(--font-head); font-size: var(--text-40); line-height: var(--lh-48); font-weight: 400; }
.text-lg-heading-5 { font-family: var(--font-head); font-size: var(--text-36); line-height: var(--lh-44); font-weight: 400; }
.text-lg-heading-6 { font-family: var(--font-head); font-size: var(--text-32); line-height: var(--lh-40); font-weight: 400; }
.text-lg-heading-7 { font-family: var(--font-base); font-size: var(--text-24); line-height: var(--lh-32); font-weight: 500; }
.text-lg-title-sm { font-family: var(--font-base); font-size: var(--text-18); line-height: var(--lh-28); font-weight: 500; }
.text-lg-body-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 400; }
.text-lg-body { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 400; }
.text-lg-body-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-lg-caption-default { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-lg-caption { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-lg-hint { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-lg-label-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; }
.text-lg-label { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; }
.text-lg-label-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-lg-label-sm-strong { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 500; }
.text-lg-label-xs { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-lg-label-xs-strong { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 500; }
}
/* ===========================
RESPONSIVE TYPOGRAPHY (1441px+)
=========================== */
@media (min-width: 1441px) {
.text-xl-heading-1 { font-family: var(--font-head); font-size: var(--text-72); line-height: var(--lh-80); font-weight: 400; }
.text-xl-heading-2 { font-family: var(--font-head); font-size: var(--text-64); line-height: var(--lh-72); font-weight: 400; }
.text-xl-heading-3 { font-family: var(--font-head); font-size: var(--text-48); line-height: var(--lh-58); font-weight: 400; }
.text-xl-heading-4 { font-family: var(--font-head); font-size: var(--text-40); line-height: var(--lh-48); font-weight: 400; }
.text-xl-heading-5 { font-family: var(--font-head); font-size: var(--text-36); line-height: var(--lh-44); font-weight: 400; }
.text-xl-heading-6 { font-family: var(--font-head); font-size: var(--text-32); line-height: var(--lh-40); font-weight: 400; }
.text-xl-heading-7 { font-family: var(--font-base); font-size: var(--text-24); line-height: var(--lh-32); font-weight: 500; }
.text-xl-title-sm { font-family: var(--font-base); font-size: var(--text-18); line-height: var(--lh-28); font-weight: 500; }
.text-xl-body-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 400; }
.text-xl-body { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 400; }
.text-xl-body-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-xl-caption-default { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-xl-caption { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-xl-hint { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-xl-label-lg { font-family: var(--font-base); font-size: var(--text-20); line-height: var(--lh-28); font-weight: 500; }
.text-xl-label { font-family: var(--font-base); font-size: var(--text-16); line-height: var(--lh-24); font-weight: 500; }
.text-xl-label-sm { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 400; }
.text-xl-label-sm-strong { font-family: var(--font-base); font-size: var(--text-14); line-height: var(--lh-20); font-weight: 500; }
.text-xl-label-xs { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 400; }
.text-xl-label-xs-strong { font-family: var(--font-base); font-size: var(--text-12); line-height: var(--lh-16); font-weight: 500; }
}
/* End */
/* Start:/assets/css/base/style.css?17911958916249*/
font.tablebodytext {
display: none;
}
/* ===========================
VARIABLES
=========================== */
:root {
/* --- Font families --- */
--font-base: 'Onest', sans-serif;
--font-head: 'Santello Regular', 'Onest', sans-serif;
/* --- Container Size ---*/
--container-size: 1544px;
/* --- Base colors --- */
--white: #FFFFFF;
--black: #0A0A0A;
/* Blue */
--blue-5: #F5F8FE;
--blue-10: #EEF2FE;
--blue-25: #E6ECFD;
--blue-50: #DCE4FD;
--blue-100: #CDD9FC;
--blue-200: #B2C4FA;
--blue-300: #95AEF8;
--blue-400: #7897F6;
--blue-500: #5B81F4;
--blue-600: #3E6BF2;
--blue-700: #3961DB;
--blue-800: #3254BA;
--blue-900: #27408C;
--blue-950: #1E2F62;
/* Gray */
--gray-5: #FAFAFA;
--gray-10: #F5F5F5;
--gray-25: #EEEEEE;
--gray-50: #E4E4E4;
--gray-100: #D3D3D3;
--gray-200: #BDBDBD;
--gray-300: #A9A9A9;
--gray-400: #969696;
--gray-500: #848484;
--gray-600: #717171;
--gray-700: #5D5D5D;
--gray-800: #4A4A4A;
--gray-900: #363636;
--gray-950: #232323;
/* Light-blue */
--light-blue-10: #E8F5FF;
--light-blue-25: #DEF1FF;
--light-blue-50: #D1ECFF;
--light-blue-600: #0094FF;
--light-blue-700: #0186E6;
--light-blue-800: #0273C4;
--light-blue-900: #045793;
/* Yellow */
--yellow-600: #FFA723;
--yellow-700: #E69721;
/* Purple */
--purple-5: #F8F5FE;
--purple-600: #7238E7;
--purple-700: #6833D1;
--purple-800: #592DB2;
/* Lime */
--lime-400: #8DFFA0;
--lime-600: #5CFF77;
/* Red */
--red-5: #FFF4F4;
--red-25: #FEE3E3;
--red-500: #F84646;
--red-600: #F72525;
--red-700: #DF2222;
--red-800: #BE1F1F;
--red-900: #8F1919;
/* Orange */
--orange-10: #FBF0EA;
--orange-25: #FAE9E1;
--orange-700: #C24E15;
/* Opacity */
--opacity-light-27: #FFFFFF45;
--opacity-light-50: #FFFFFF80;
--opacity-light-74: #FFFFFFBD;
--opacity-dark-18: #0A0A0A2E;
/* --- Semantic: Background --- */
--bg-page: var(--white);
--bg-surface: var(--white);
--bg-surface-darker: var(--gray-5);
--bg-surface-darkest: var(--gray-10);
--bg-surface-inverse: var(--black);
--bg-surface-tp: var(--opacity-light-27);
--bg-neutral-primary: var(--black);
--bg-neutral-secondary: var(--white);
--bg-neutral-secondary-dark: var(--gray-10);
--bg-neutral-secondary-darker: var(--gray-25);
--bg-accent-primary: var(--blue-600);
--bg-accent-primary-dark: var(--blue-700);
--bg-accent-primary-darkest: var(--blue-800);
--bg-accent-secondary: var(--blue-10);
--bg-accent-secondary-dark: var(--blue-25);
--bg-accent-secondary-darker: var(--blue-50);
--bg-status-5: var(--red-600);
--bg-status-5-dark: var(--red-700);
/* --- Semantic: Foreground / Text --- */
--fg-primary: var(--black);
--fg-secondary: var(--gray-700);
--fg-tertiary: var(--gray-600);
--fg-inverse: var(--white);
--fg-accent: var(--blue-700);
--fg-accent-on-accent: var(--white);
--fg-accent-dark: var(--blue-800);
--fg-status-5: var(--red-700);
--fg-status-5-light: var(--red-500);
/* --- Semantic: Stroke / Border --- */
--stroke-lighter: var(--gray-25);
--stroke-default: var(--gray-50);
--stroke-darker: var(--gray-100);
--stroke-accent: var(--blue-600);
--stroke-accent-dark: var(--blue-700);
/* --- Disabled --- */
--disabled-bg: var(--gray-200);
--disabled-fg: var(--gray-10);
--disabled-stroke: var(--gray-25);
/* --- Typography scale --- */
--text-10: 10px;
--text-12: 12px;
--text-14: 14px;
--text-16: 16px;
--text-18: 18px;
--text-20: 20px;
--text-24: 24px;
--text-32: 32px;
--text-36: 36px;
--text-40: 40px;
--text-48: 48px;
--text-64: 64px;
--text-72: 72px;
--lh-16: 16px;
--lh-20: 20px;
--lh-24: 24px;
--lh-28: 28px;
--lh-32: 32px;
--lh-40: 40px;
--lh-44: 44px;
--lh-48: 48px;
--lh-58: 58px;
--lh-72: 72px;
--lh-80: 80px;
/* --- Spacing --- */
--space-2: 2px;
--space-4: 4px;
--space-8: 8px;
--space-10: 10px;
--space-11: 11px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-36: 36px;
--space-40: 40px;
--space-48: 48px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-120: 120px;
--space-160: 160px;
--space-200: 200px;
/* --- Container --- */
--container-padding: var(--space-16);
/* --- Radius --- */
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;
--radius-20: 20px;
--radius-32: 32px;
--radius-40: 40px;
--radius-96: 96px;
/* --- Stroke width --- */
--stroke-w-1: 1px;
--stroke-w-1-3: 1.3px;
--stroke-w-1-5: 1.5px;
--stroke-w-2: 2px;
}
/* ===========================
FONTS
=========================== */
/* Santello Regular — heading font, load from /fonts/ */
@font-face {
font-family: 'Santello Regular';
src: url('/assets/fonts/SANTELLO.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ===========================
BASE
=========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-base);
font-size: var(--text-16);
line-height: var(--lh-24);
color: var(--fg-primary);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-80);
}
.container {
max-width: var(--container-size);
margin-left:auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
@media (min-width: 1025px) {
:root {
--container-padding: var(--space-32);
}
.main {
gap: var(--space-120);
}
}
@media (min-width: 1440px) {
.main {
gap: var(--space-160);
}
}
a { color: inherit; text-decoration: none; }
a:not([class]) { color: var(--blue-700) }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; border: none; outline: none; background: transparent; }
img { max-width: 100%; height: auto; display: block; }
ul[class], ol[class] { list-style: none;}
video{max-width: 100%!important;}
.breadcrumbs__current{white-space: break-spaces!important;}
/* End */
/* /assets/css/vendor/reboot.min.css?177936222710257 */
/* /assets/css/vendor/swiper-bundle.min.css?177936222718454 */
/* /assets/css/base/fonts.css?17793622275347 */
/* /assets/css/components/icon.css?178047690631569 */
/* /assets/css/components/buttons.css?177936222714706 */
/* /assets/css/components/inputs.css?177936222710320 */
/* /assets/css/components/tabs.css?178047690614914 */
/* /assets/css/components/forms.css?17793622274105 */
/* /assets/css/components/accordion.css?17804810482528 */
/* /assets/css/components/tags.css?17793622275855 */
/* /assets/css/components/modal.css?17804792838884 */
/* /assets/css/components/header.css?178047643917044 */
/* /assets/css/components/tabbar.css?17793622271539 */
/* /assets/css/components/footer.css?17793622279419 */
/* /assets/css/components/breadcrumbs.css?17793622271358 */
/* /assets/css/components/product-card.css?17804952239833 */
/* /assets/css/components/wysiwyg-content.css?17793622273741 */
/* /assets/css/components/utils.css?17793622273701 */
/* /assets/css/components/typography.css?177936222715741 */
/* /assets/css/base/style.css?17911958916249 */