@layer base, reset, typography, grid, components, page_elements, utilities;

/*
 * Webasyst Default 5.0 theme family
 *
 * @link http://www.webasyst.com/
 * @author Webasyst LLC
 * @copyright 2015 Webasyst LLC
 * @package Webasyst
 */

@layer base {
    :root {
        color-scheme:                      light dark;
        /* Color palette */
        --white:                           #fff;
        --white-auto:                      light-dark(var(--white), var(--text-color-additional));
        --white_tr_8:                      rgba(255, 255, 255, 8%);
        --white_tr_10:                     rgba(255, 255, 255, 10%);
        --white_tr_25:                     rgba(255, 255, 255, 25%);
        --white_tr_50:                     rgba(255, 255, 255, 50%);
        --black:                           #000;
        --black-auto:                      light-dark(var(--black), var(--text-color-additional));
        --black_tr_8:                      rgba(0, 0, 0, 8%);
        --black_tr_10:                     rgba(0, 0, 0, 10%);
        --black_tr_25:                     rgba(0, 0, 0, 25%);
        --black_tr_50:                     rgba(0, 0, 0, 50%);
        --bg_tr_8:                         light-dark(var(--black_tr_8), var(--white_tr_8));
        --bg_tr_10:                        light-dark(var(--black_tr_10), var(--white_tr_10));
        --bg_tr_25:                        light-dark(var(--black_tr_25), var(--white_tr_25));
        --bg_tr_50:                        light-dark(var(--black_tr_50), var(--white_tr_50));
        --gray:                            #808080;
        --gray1:                           #333;
        --gray2:                           #4f4f4f;
        --gray3:                           #828282;
        --gray4:                           #bdbdbd;
        --gray5:                           #e0e0e0;
        --gray6:                           #f2f2f2;
        --gray7:                           #fafafa;
        --gray20:                          #cccccc;

        --gray-strong:                     #666666;
        --gray-main:                       #888888;
        --gray-muted:                      #999999;
        --gray-subtle:                     #bbbbbb;
        /* Brand colors */
        --accent-color:                    #A538DC;
        --accent-color-light:              color-mix(in srgb, var(--accent-color) 100%, white 30%);
        --accent-color-lighter:            color-mix(in srgb, var(--accent-color) 75%, white 50%);
        --accent-color-dark:               color-mix(in srgb, var(--accent-color) 75%, black 25%);
        --red:                             #f43434;
        --blue:                            #3080ed;
        --blue-light:                      color-mix(in srgb, var(--blue) 100%, white 30%);
        --blue-lighter:                    color-mix(in srgb, var(--blue) 75%, white 50%);
        --blue-dark:                       color-mix(in srgb, var(--blue) 75%, black 25%);
        --green:                           #14b00e;
        --orange:                          #f2994a;
        --yellow:                          #d8a900;
        --purple:                          #9b51e0;
        --purple-light:                    color-mix(in srgb, var(--purple) 100%, white 30%);
        --purple-lighter:                  color-mix(in srgb, var(--purple) 75%, white 50%);
        --purple-dark:                     color-mix(in srgb, var(--purple) 75%, black 25%);
        /* Layout */
        --gap:                             0;
        --element-border-radius:           .75rem;
        --divider-color:                   var(--bg_tr_10);
        /* Typography */
        --font-size:                       16px;
        --font-family:                     "Helvetica Neue", sans-serif;
        /* Headings */
        --h1-size:                         2.25em;
        --h2-size:                         2em;
        --h3-size:                         1.625em;
        --h4-size:                         1.375em;
        --h5-size:                         1.125em;
        --h6-size:                         1em;
        /* Semantic colors with light-dark support */
        --bg-color:                        light-dark(var(--bg-color-light), var(--bg-color-dark));
        --bg-color-accent:                 light-dark(color-mix(in srgb, var(--bg-color) 100%, white 30%), color-mix(in srgb, var(--bg-color) 100%, white 12%));
        --text-color:                      light-dark(var(--black), var(--gray5));
        --text-color-secondary:            light-dark(var(--gray-strong), var(--gray-subtle));
        --text-color-additional:           light-dark(var(--gray-muted), var(--gray-main));
        --hint-color:                      light-dark(var(--gray3), var(--gray3));
        --link-color:                      light-dark(var(--accent-color), var(--accent-color));
        --link-hover-color:                light-dark(var(--accent-color-light), var(--accent-color-light));
        --link-visited-color:              light-dark(var(--accent-color-dark), var(--accent-color-dark));
        /* Button system */
        --button-bg-color:                 light-dark(var(--accent-color), var(--accent-color));
        --button-text-color:               light-dark(var(--white), var(--white));
        --button-hover-bg-color:           light-dark(var(--accent-color-light), var(--accent-color-light));
        --button-hover-text-color:         light-dark(var(--white), var(--white));
        --button-active-bg-color:          light-dark(var(--accent-color-dark), var(--accent-color-dark));
        --button-active-text-color:        light-dark(var(--white), var(--white));
        --button-disabled-bg-color:        light-dark(var(--accent-color-lighter), var(--accent-color-lighter));
        --button-disabled-text-color:      light-dark(var(--white), var(--white));
        --button-gray-bg-color:            light-dark(var(--gray6), var(--gray6));
        --button-gray-text-color:          light-dark(var(--gray3), var(--gray3));
        --button-gray-hover-bg-color:      light-dark(var(--gray7), var(--gray7));
        --button-gray-hover-text-color:    light-dark(var(--white), var(--white));
        --button-gray-active-bg-color:     light-dark(var(--gray5), var(--gray5));
        --button-gray-active-text-color:   light-dark(var(--gray3), var(--gray3));
        --button-gray-disabled-bg-color:   light-dark(var(--gray3), var(--gray3));
        --button-gray-disabled-text-color: light-dark(var(--white), var(--white));
        --button-blue-bg-color:            light-dark(var(--blue), var(--blue));
        --button-blue-text-color:          light-dark(var(--white), var(--white));
        --button-blue-hover-bg-color:      light-dark(var(--blue-light), var(--blue-light));
        --button-blue-hover-text-color:    light-dark(var(--white), var(--white));
        --button-blue-active-bg-color:     light-dark(var(--blue-dark), var(--blue-dark));
        --button-blue-active-text-color:   light-dark(var(--white), var(--white));
        --button-blue-disabled-bg-color:   light-dark(var(--blue-lighter), var(--blue-lighter));
        --button-blue-disabled-text-color: light-dark(var(--white), var(--white));
        /* Header colors */
        --header-link-color:               light-dark(var(--gray3), var(--gray3));
        --header-link-hover-color:         light-dark(var(--gray2), var(--gray2));
        --header-apps-link-color:          light-dark(var(--gray3), var(--gray3));
        --header-apps-link-selected-color: light-dark(var(--gray2), var(--gray2));
        --header-cart-total-bg-color:      light-dark(var(--red), var(--red));
        --header-search-input-bg-color:    var(--bg_tr_8);
        --header-search-input-bg-color-hover:    light-dark(var(--black_tr_10), var(--white_tr_25));
        --header-search-input-color:       light-dark(var(--gray), var(--gray));
        --header-menu-pages-link-color:    light-dark(var(--gray1), var(--text-color-additional));
        --header-sitename-color:           light-dark(var(--black), var(--gray-subtle));
        /* Form colors */
        --input-color:                     light-dark(var(--gray1), var(--gray4));
        --input-placeholder-color:         light-dark(var(--gray), var(--gray));
        --input-bg-color:                  var(--bg_tr_10);
        --input-disabled-bg-color:         light-dark(var(--gray6), var(--gray6));
        --input-disabled-color:            light-dark(var(--gray4), var(--gray4));
        --input-border-color:              var(--bg_tr_25);
        /* Footer colors */
        --footer-link-color:               light-dark(var(--gray3), var(--gray3));
        --footer-link-hover-color:         light-dark(var(--link-hover-color), var(--link-hover-color));
        --footer-notice-color:             light-dark(var(--gray4), var(--gray4));
        --footer-divider-color:            var(--divider-color);
        --footer-app-color:                light-dark(var(--gray), var(--gray));
        --footer-subscribe-link-color:     light-dark(var(--link-color), var(--link-color));
        /* Shadows */
        --shadow:                          0 .3125rem 1.875rem rgba(0, 0, 0, 0.06);
        --shadow1:                         0 .625rem 3.75rem rgba(0, 0, 0, 0.1);

        --bg-gray-color:                   light-dark(var(--gray6), var(--white_tr_10));
    }

    @supports not (color: light-dark(white, black)) {
        :root {
            color-scheme:                      light;
            --white-auto:                      var(--white);
            --black-auto:                      var(--black);
            --divider-color:                   var(--black_tr_10);
            --bg-color:                        var(--bg-color-light);
            --bg-color-accent:                 color-mix(in srgb, var(--bg-color) 100%, white 30%);
            --bg_tr_8:                         var(--black_tr_8);
            --bg_tr_10:                        var(--black_tr_10);
            --bg_tr_25:                        var(--black_tr_25);
            --bg_tr_50:                        var(--black_tr_50);
            --text-color:                      var(--black);
            --text-color-secondary:            var(--gray-strong);
            --text-color-additional:           var(--gray-muted);
            --hint-color:                      var(--gray3);
            --link-color:                      var(--accent-color);
            --link-hover-color:                var(--accent-color-light);
            --link-visited-color:              var(--accent-color-dark);
            --button-bg-color:                 var(--accent-color);
            --button-text-color:               var(--white);
            --button-hover-bg-color:           var(--accent-color-light);
            --button-hover-text-color:         var(--white);
            --button-active-bg-color:          var(--accent-color-dark);
            --button-active-text-color:        var(--white);
            --button-disabled-bg-color:        var(--accent-color-lighter);
            --button-disabled-text-color:      var(--white);
            --button-gray-bg-color:            var(--gray6);
            --button-gray-text-color:          var(--gray3);
            --button-gray-hover-bg-color:      var(--gray7);
            --button-gray-hover-text-color:    var(--white);
            --button-gray-active-bg-color:     var(--gray5);
            --button-gray-active-text-color:   var(--gray3);
            --button-gray-disabled-bg-color:   var(--gray3);
            --button-gray-disabled-text-color: var(--white);
            --button-blue-bg-color:            var(--blue);
            --button-blue-text-color:          var(--white);
            --button-blue-hover-bg-color:      var(--blue-light);
            --button-blue-hover-text-color:    var(--white);
            --button-blue-active-bg-color:     var(--blue-dark);
            --button-blue-active-text-color:   var(--white);
            --button-blue-disabled-bg-color:   var(--blue-lighter);
            --button-blue-disabled-text-color: var(--white);
            --header-link-color:               var(--gray3);
            --header-link-hover-color:         var(--gray2);
            --header-apps-link-color:          var(--gray3);
            --header-apps-link-selected-color: var(--gray2);
            --header-cart-total-bg-color:      var(--red);
            --header-search-input-bg-color:    var(--black_tr_8);
            --header-search-input-bg-color-hover:    var(--black_tr_10);
            --header-search-input-color:       var(--gray);
            --header-menu-pages-link-color:    var(--gray1);
            --header-sitename-color:           var(--black);
            --input-color:                     var(--gray1);
            --input-placeholder-color:         var(--gray);
            --input-bg-color:                  var(--black_tr_10);
            --input-disabled-bg-color:         var(--gray6);
            --input-disabled-color:            var(--gray4);
            --input-border-color:              var(--black_tr_25);
            --footer-link-color:               var(--gray3);
            --footer-link-hover-color:         var(--link-hover-color);
            --footer-notice-color:             var(--gray4);
            --footer-app-color:                var(--gray);
            --footer-subscribe-link-color:     var(--link-color);
            --bg-gray-color:                   var(--gray6);
        }

        .sub-links li a { color: var(--gray1); }
        .bg-gray { background-color: var(--gray6); }
    }
}

@layer reset {
    /* CSS Reset with modern approach */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, /* ol, ul, li, */ fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, credentials, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; }
    *, ::after, ::before { box-sizing: border-box; }
    /* Global focus management */
    :focus-visible { outline: .125rem solid var(--link-color); outline-offset: .125rem; }
}

@layer grid {
    .container { --container-min-width: 650px; --container-max-width: 970px; --container-padding: 1rem; min-width: var(--container-min-width); max-width: var(--container-max-width); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
    /* Mobile */
    @media (max-width: 768px) {
        .container {
            --container-min-width: 0
        }
    }
    /* Tablet */
    @media (min-width: 769px) and (max-width: 1024px) {
        .container {
            --container-padding: .75rem
        }
    }
    /* Wide screen */
    @media (min-width: 1300px) {
        .container {
            --container-max-width: 1160px
        }
    }

    .row { display: flex; flex-wrap: wrap; }
    .row.gap4 { --gap: 4px; gap: var(--gap); }
    .row.gap6 { --gap: 6px; gap: var(--gap); }
    .row.gap8 { --gap: 8px; gap: var(--gap); }
    .row.gap16 { --gap: 16px; gap: var(--gap); }
    .row.gap20 { --gap: 20px; gap: var(--gap); }
    .row.gap32 { --gap: 32px; gap: var(--gap); }
    .row.cols1 > .col { --cols-count: 1; }
    .row.cols1 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 100%; }

    @media (max-width: 768px) {
        .row.cols1-mobile > .col { flex: 0 0 auto; --cols-count: 1; --col-width: 100% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols1-tablet > .col { flex: 0 0 auto; --cols-count: 1; --col-width: 100% }
    }

    .row.cols2 > .col { --cols-count: 2; }
    .row.cols2 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 50%; }

    @media (max-width: 768px) {
        .row.cols2-mobile > .col { flex: 0 0 auto; --cols-count: 2; --col-width: 50% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols2-tablet > .col { flex: 0 0 auto; --cols-count: 2; --col-width: 50% }
    }

    .row.cols3 > .col { --cols-count: 3; }
    .row.cols3 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 33.33333333%; }

    @media (max-width: 768px) {
        .row.cols3-mobile > .col { flex: 0 0 auto; --cols-count: 3; --col-width: 33.33333333% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols3-tablet > .col { flex: 0 0 auto; --cols-count: 3; --col-width: 33.33333333% }
    }

    .row.cols4 > .col { --cols-count: 4; }
    .row.cols4 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 25%; }

    @media (max-width: 768px) {
        .row.cols4-mobile > .col { flex: 0 0 auto; --cols-count: 4; --col-width: 25% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols4-tablet > .col { flex: 0 0 auto; --cols-count: 4; --col-width: 25% }
    }

    .row.cols5 > .col { --cols-count: 5; }
    .row.cols5 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 20%; }

    @media (max-width: 768px) {
        .row.cols5-mobile > .col { flex: 0 0 auto; --cols-count: 5; --col-width: 20% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols5-tablet > .col { flex: 0 0 auto; --cols-count: 5; --col-width: 20% }
    }

    .row.cols6 > .col { --cols-count: 6; }
    .row.cols6 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 16.66666667%; }

    @media (max-width: 768px) {
        .row.cols6-mobile > .col { flex: 0 0 auto; --cols-count: 6; --col-width: 16.66666667% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols6-tablet > .col { flex: 0 0 auto; --cols-count: 6; --col-width: 16.66666667% }
    }

    .row.cols7 > .col { --cols-count: 7; }
    .row.cols7 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 14.285714286%; }

    @media (max-width: 768px) {
        .row.cols7-mobile > .col { flex: 0 0 auto; --cols-count: 7; --col-width: 14.285714286% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols7-tablet > .col { flex: 0 0 auto; --cols-count: 7; --col-width: 14.285714286% }
    }

    .row.cols8 > .col { --cols-count: 8; }
    .row.cols8 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 12.5%; }

    @media (max-width: 768px) {
        .row.cols8-mobile > .col { flex: 0 0 auto; --cols-count: 8; --col-width: 12.5% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols8-tablet > .col { flex: 0 0 auto; --cols-count: 8; --col-width: 12.5% }
    }

    .row.cols9 > .col { --cols-count: 9; }
    .row.cols9 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 11.111111111%; }

    @media (max-width: 768px) {
        .row.cols9-mobile > .col { flex: 0 0 auto; --cols-count: 9; --col-width: 11.111111111% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols9-tablet > .col { flex: 0 0 auto; --cols-count: 9; --col-width: 11.111111111% }
    }

    .row.cols10 > .col { --cols-count: 10; }
    .row.cols10 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 10%; }

    @media (max-width: 768px) {
        .row.cols10-mobile > .col { flex: 0 0 auto; --cols-count: 10; --col-width: 10% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols10-tablet > .col { flex: 0 0 auto; --cols-count: 10; --col-width: 10% }
    }

    .row.cols11 > .col { --cols-count: 11; }
    .row.cols11 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 9.090909091%; }

    @media (max-width: 768px) {
        .row.cols11-mobile > .col { flex: 0 0 auto; --cols-count: 11; --col-width: 9.090909091% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols11-tablet > .col { flex: 0 0 auto; --cols-count: 11; --col-width: 9.090909091% }
    }

    .row.cols12 > .col { --cols-count: 12; }
    .row.cols12 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 8.33333333%; }

    @media (max-width: 768px) {
        .row.cols12-mobile > .col { flex: 0 0 auto; --cols-count: 12; --col-width: 8.33333333% }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .row.cols12-tablet > .col { flex: 0 0 auto; --cols-count: 12; --col-width: 8.33333333% }
    }

    .col { flex: 1 0 0; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w1 { --cols-count: 12; --col-width: 8.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w2 { --cols-count: 6; --col-width: 16.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w3 { --cols-count: 4; --col-width: 25%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w4 { --cols-count: 3; --col-width: 33.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w5 { --cols-count: 2.4; --col-width: 41.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w6 { --cols-count: 2; --col-width: 50%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w7 { --cols-count: 1.7; --col-width: 58.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w8 { --cols-count: 1.5; --col-width: 66.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w9 { --cols-count: 1.33; --col-width: 75%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w10 { --cols-count: 1.2; --col-width: 83.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w11 { --cols-count: 1.09; --col-width: 91.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    .col.w12 { --cols-count: 1; --col-width: 100%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
    :is(.row.cols1,.row.cols2,.row.cols3,.row.cols4,.row.cols5,.row.cols6,.row.cols7,.row.cols8,.row.cols9,.row.cols10,.row.cols11,.row.cols12) > .col { flex: 0 0 auto; }
}

@layer components {
    /* Form elements */
    input, textarea, select { margin: 0; padding: 0.938em 0.75em; border-radius: var(--element-border-radius); transition: background-color 300ms linear; font-family: var(--font-family); }
    input, textarea { font-size: 1em; color: var(--gray1); }
    select { max-width: 100%; }
    input[type="button"]:focus { outline: none; outline-offset: -2px; }
    fieldset { border: .0625rem solid var(--gray); border-radius: var(--element-border-radius); padding: .625rem; position: relative; background: var(--gray5); margin-bottom: .625rem; }
    fieldset p label { width: 98%; }
    fieldset p input[type="text"] { width: 98%; }
    fieldset p select { width: 99%; }
    input::-webkit-input-placeholder { color: var(--input-placeholder-color); }
    input:-moz-placeholder,
    input::-moz-placeholder { color: var(--input-placeholder-color); }
    label, button { cursor: pointer; }
    /* Enhanced form inputs */
    input, textarea { border: .0625em solid var(--input-border-color); padding: 0.938em 0.75em; font-weight: 400; color: var(--text-color-secondary); background-color: var(--input-bg-color); appearance: none; }
    input:focus, textarea:focus { border-color: var(--input-border-color); outline: 0; }
    input[type=checkbox],
    input[type=radio] {
        width:               1.125rem;
        height:        1.125rem;
        background-color:    transparent;
        background-repeat:   no-repeat;
        background-position: center;
        background-size:     .7em;
        border:              .0625rem solid var(--input-border-color);
        border-radius:       min(.25em, var(--element-border-radius));
        appearance:          none;
        vertical-align:      middle;
        padding:             0;
    }
    input[type=radio] { border-radius: 50%; }
    input:checked { border-color: var(--link-color); }
    input:checked[type=checkbox] { background-color: var(--accent-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M5.81 11.333c-.276.44-.682.667-1.154.667-.486 0-.866-.2-1.22-.654L.341 7.488C.118 7.208 0 6.914 0 6.594c0-.654.498-1.188 1.141-1.188.393 0 .708.147 1.023.56l2.44 3.164L9.783.667c.275-.44.63-.667 1.023-.667C11.423 0 12 .44 12 1.108c0 .294-.157.614-.328.894l-5.862 9.33Z' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
    input:checked[type=radio] { box-shadow: inset 0 0 0 .21875rem var(--bg-color-accent); background-color: var(--link-color); }
    select {
        background-color:    transparent;
        color:         var(--text-color-secondary);
        background-repeat:   no-repeat;
        border:              .0625rem solid var(--input-border-color);
        appearance:          none;
        vertical-align:      middle;
        font-weight:         400;
        line-height:         1.15;
        background-image:    var(--chevron-svg);
        background-position: right 0.525em center;
        background-size:     1em;
        padding-right:       1.75em;
    }
    select:focus { border-color: var(--link-color); outline: 0; }
    select:disabled { opacity: .5; cursor: default; }
    select option { background-color: var(--bg-color-accent); }
    select option:hover { background-color: var(--accent-color); }
    /* Buttons */
    .button, button,
    input[type=button],
    input[type=submit],
    input[type=reset] {
        display:          inline-flex;
        justify-content: center;
        outline:          0;
        padding:          0.938em 1.25em;
        font-size:        1em;
        font-weight:      600;
        border:           0 none;
        border-radius:    var(--element-border-radius);
        background-color: var(--button-bg-color);
        color:            var(--button-text-color);
        position:         relative;
        transition:       background-color 200ms linear;
        font-family:      var(--font-family);
        line-height: normal;
    }

    .button:hover, button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { cursor: pointer; background-color: var(--button-hover-bg-color); color: var(--button-hover-text-color); }

    .button.blink, button.blink, input[type=button].blink, input[type=submit].blink, input[type=reset].blink { transition: transform 200ms linear; }
    .button.blink:not(:disabled,.disabled):hover, button.blink:not(:disabled,.disabled):hover, input[type=button].blink:not(:disabled,.disabled):hover, input[type=submit].blink:not(:disabled,.disabled):hover, input[type=reset].blink:not(:disabled,.disabled):hover { background-color: var(--button-bg-color); overflow: hidden; transform: scale(1.05);}
    .button.blink:not(:disabled,.disabled):hover::after, button.blink:not(:disabled,.disabled):hover::after, input[type=button].blink:not(:disabled,.disabled):hover::after, input[type=submit].blink:not(:disabled,.disabled):hover::after, input[type=reset].blink:not(:disabled,.disabled):hover::after, .s-order-page .s-order-section > .s-section-body .wa-form-body .wa-submit-button:hover:not(:disabled,.disabled)::after { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0.2), transparent ); transform: skewX(-20deg); animation: sweep 3s infinite; filter: blur(1px); }
    @keyframes sweep {
        0% { left: -50%; opacity: 0; transform: skewX(-20deg) scaleY(0.5); }
        20% { opacity: 1; transform: skewX(-20deg) scaleY(1); }
        80% { opacity: 1; transform: skewX(-20deg) scaleY(1); }
        100% { left: 150%; opacity: 0; transform: skewX(-20deg) scaleY(0.5); }
    }
    .button:active, button:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active { background-color: var(--button-active-bg-color); color: var(--button-active-text-color); }

    .button:disabled, button:disabled, input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled { background-color: var(--button-disabled-bg-color); color: var(--button-disabled-text-color); cursor: not-allowed; }

    .button.small, button.small, input[type=button].small, input[type=submit].small, input[type=reset].small { font-size: 0.9em; }

    .button.large, button.large, input[type=button].large, input[type=submit].large, input[type=reset].large { font-size: 1.6em; font-weight: 500; }

    .button.gray, button.gray, input[type=button].gray, input[type=submit].gray, input[type=reset].gray {
        --button-bg-color:                 var(--button-gray-bg-color);
        --button-text-color:               var(--button-gray-text-color);
        --button-hover-bg-color:           var(--button-gray-hover-bg-color);
        --button-hover-text-color:         var(--button-gray-hover-text-color);
        --button-active-bg-color:          var(--button-gray-active-bg-color);
        --button-active-text-color:        var(--button-gray-active-text-color);
        --button-disabled-bg-color:        var(--button-gray-disabled-bg-color);
        --button-disabled-text-color:      var(--button-gray-disabled-text-color);
    }
    /* Form validation */
    input.error, textarea.error { border: .125em solid var(--red); }

    .errormsg { color: var(--red); margin-left: 10.625rem; display: block; }
    /* Captcha */
    .wa-field .wa-captcha-img { margin-top: -.125rem; }

    .wa-captcha { padding: .4375rem 0 .625rem; }
    .wa-captcha p { margin: 0 !important; }
    .wa-captcha strong { font-size: 1.2em; }
    .wa-captcha p img { float: left !important; }
    .wa-captcha .wa-captcha-refresh { font-size: 0.8em; text-decoration: underline; color: var(--gray3); }
    .wa-captcha .wa-captcha-input { display: inline !important; margin-left: .625rem; }
    .wa-captcha .errormsg { margin-left: .625rem; display: block; }
    /* Auth adapters */
    .wa-auth-adapters ul { padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
    .wa-auth-adapters ul li { list-style: none; }
    .wa-auth-adapters ul li a, .wa-auth-adapters ul li span { display: flex; align-items: center; gap: .25rem }
    .wa-auth-adapters ul li a img, .wa-auth-adapters ul li span img { position: relative; }
    .wa-auth-adapters p { color: #888; font-size: 0.9em; width: 80%; }

    .wa-auth-adapters.wa-connect { padding-top: 20px; clear: left; }
    /* Form wrapper */
    .wa-form { margin: 1rem 0; overflow: visible; display: flex; flex-direction: column; gap: 1rem; }
    .wa-form .wa-field { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem;}
    .wa-form .wa-field:not(:has(.wa-name)) { grid-template-columns: 1fr; padding-left: 11rem; }
    .wa-form .wa-field .wa-name { font-size: 0.95em; color: #888; padding-top: .5rem; }
    .wa-form .wa-field .wa-value { position: relative; }
    .wa-form .wa-field .wa-value input[type="text"],
    .wa-form .wa-field .wa-value input[type="email"],
    .wa-form .wa-field .wa-value input[type="password"] { width: 30%; min-width: 260px; margin: 0; }
    .wa-form .wa-field .wa-value input.wa-error { border: 2px solid var(--red); }
    .wa-form .wa-field .wa-value .wa-error-msg { font-size: 0.9em; color: var(--red); display: block; }
    .wa-form .wa-field .wa-value textarea { min-width: 300px; height: 70px; }
    .wa-form .wa-field .wa-value .wa-captcha-input,
    .wa-form .wa-field .wa-value .wa-subscribe-form .wa-captcha .wa-captcha-input { min-width: 73px !important; }
    .wa-form .wa-field .wa-value .wa-captcha img { margin-left: 0; }
    .wa-form .wa-field .wa-value .errormsg { margin-left: 0; }
    .wa-form .wa-field .wa-value.wa-submit { margin-top: 10px; }
    .wa-form .wa-field .wa-value p label { display: block; margin: 0; }
    .wa-form .wa-field .wa-value p span { color: #777; font-size: 0.9em; display: block; }
    .wa-form .wa-field .wa-value p i.icon16 { float: left; left: -20px; margin-top: 2px; position: absolute; }
    .wa-form .wa-field .wa-value p label,
    .wa-form .wa-field .wa-value p input { display: block; margin-bottom: 5px; }
    .wa-form .wa-field .wa-value p input[type="radio"],
    .wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline-block; }
    .wa-form .wa-field .wa-value p .field.wa-required span::after { content: " *"; color: #faa; }
    .wa-form .wa-field .wa-value p input[type="radio"],
    .wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline-block; }
    .wa-form .wa-field .wa-value p .field.wa-required span::after { content: " *"; color: #faa; }
    .wa-form .wa-field .wa-value label,
    .wa-form .wa-field .wa-value p input { display: block; margin-bottom: 5px; }
    .wa-form .wa-field .wa-value p input[type="radio"],
    .wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline-block; }
    .wa-form .wa-field .wa-value p .field.wa-required span::after { content: " *"; color: #faa; }
    .wa-form .wa-field .wa-value select { border-radius: var(--element-border-radius); padding: 0.85em 2.25em 0.85em 0.75em; line-height: 1; text-overflow: ellipsis; }
    .wa-form .wa-field .wa-value p label { display: block; margin: 0; }
    .wa-form .wa-field .wa-value p { line-height: 1.6em; margin-bottom: 23px; position: relative; }
    .wa-form .wa-field .wa-value p span { color: #777; font-size: 0.9em; display: block; }
    .wa-form .wa-field .wa-value p i.icon16 { float: left; left: -20px; margin-top: 2px; position: absolute; }
    .wa-form .wa-field .wa-value label,
    .wa-form .wa-field .wa-value p input { display: block; margin-bottom: 5px; }
    .wa-form .wa-field .wa-value p input[type="radio"],
    .wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline-block; }
    .wa-form .wa-field .wa-value p .field.wa-required span::after { content: " *"; color: #faa; }
    .wa-form .wa-field .wa-value.wa-submit { margin-top: 10px; }
    .wa-form .wa-field .wa-value p label { display: block; margin: 0; }
    .wa-form .wa-field .wa-value p { line-height: 1.6em; margin-bottom: 23px; position: relative; }
    .wa-form .wa-field .wa-value p span { color: #777; font-size: 0.9em; display: block; }
    .wa-form .wa-field .wa-value p i.icon16 { float: left; left: -20px; margin-top: 2px; position: absolute; }
    .wa-form .wa-field .wa-value label,
    .wa-form .wa-field .wa-value p input { display: block; margin-bottom: 5px; }
    .wa-form .wa-field .wa-value p input[type="radio"],
    .wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline-block; }
    .wa-form .wa-field .wa-value p .field.wa-required span::after { content: " *"; color: #faa; }
    .wa-form .wa-field .wa-value p:last-child { margin-bottom: 0; }
    .wa-form .wa-field .wa-value select { border-radius: var(--element-border-radius); padding: 0.85em 2.25em 0.85em 0.75em; line-height: 1; text-overflow: ellipsis; }
    .wa-form .wa-field.wa-separator { height: 10px; }
    .wa-form .wa-field.wa-required .wa-name::after { content: " *"; color: var(--red); }
    .wa-form .wa-field.wa-field-email .wa-value input { min-width: 300px; }
    .wa-form .wa-field.wa-field-password .wa-value input,
    .wa-form .wa-field.wa-field-password_confirm .wa-value input { min-width: 200px; width: 200px; }
    form .wa-form .wa-field.fld_type_checkbox { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; }
    form .wa-form .wa-field.fld_type_checkbox .wa-value { margin-top: 0; margin-right: 3px; }
    form .wa-form .wa-value .h-agreement-checkbox-wrapper input[type=checkbox] { position: static; }
    form .wa-form .wa-value .h-agreement-checkbox-wrapper .h-agreement-checkbox-html-label { display: inline; margin-left: 10px; }

    @media (max-width: 768px) {
        .wa-form .wa-field {
            grid-template-columns: 1fr;
            gap: 0.5rem;
            padding-left: 0!important;
        }
    }

    .wa-signup-form .wa-form .wa-field.wa-field-email .wa-value input { min-width: 300px; }
    .wa-signup-form .wa-form .wa-field.wa-field-password .wa-value input,
    .wa-signup-form .wa-form .wa-field.wa-field-password_confirm .wa-value input { min-width: 160px; width: 160px; }
    /* Additional components */
    .breadcrumbs { color: var(--link-color); margin-bottom: 35px; display: flex; align-items: center; gap: 10px; }
    .breadcrumbs a { color: var(--gray4) !important; }
    .breadcrumbs span.chevron::after { left: 0; color: var(--gray4); }

    @media (max-width: 768px) {
        .breadcrumbs {
            display: none
        }
    }

    .tags { line-height: 1.6em; }
    .tags a { color: var(--green) !important; display: inline !important; padding: 0 4px !important; }
    .tags a:hover { color: red !important; }

    .welcome { text-align: center; background: url('img/webasyst.svg') no-repeat top center; padding-top: 300px; background-size: 256px 256px; margin-bottom: 30px; }
    .welcome h1 { font-weight: normal; font-size: 2em; }

    .schedule { position: relative; display: inline-block; }

    .schedule:hover .schedule-dropdown { display: block; }

    .schedule .schedule-dropdown {
        display:          none;
        position:         absolute;
        background-color: var(--bg-color-accent);
        min-width:        200px;
        box-shadow:       0 8px 16px rgba(0, 0, 0, 0.2);
        z-index:          1;
        border-radius:    var(--element-border-radius);
        top:              100%;
        left:             0;
        list-style:       none;
        font-size:        .875em;
        padding:          1rem;
        margin:           0;
    }

    .schedule .schedule-dropdown .s-day-wrapper { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .schedule .schedule-dropdown .s-day-wrapper:not(:last-child) { margin-bottom: .5rem; }

    .schedule .schedule-dropdown .s-day-wrapper .s-time { white-space: nowrap; }

    .staff { background: var(--gray4); padding: 2px 6px; color: var(--white); font-size: 0.9em; border-radius: min(.3125rem, var(--element-border-radius)); white-space: nowrap; line-height: normal; }

    .attach { display: flex; flex-direction: row; align-items: center; position: relative; width: fit-content; margin-bottom: 0.5rem; }

    .attach::before {
        content:           "";
        position:          absolute;
        top:               18px;
        left:              15px;
        background-image:  url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%22612.675px%22%20height%3D%22612.675px%22%20viewBox%3D%220%200%20612.675%20612.675%22%20style%3D%22enable-background%3Anew%200%200%20612.675%20612.675%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%0A%09%09%09%3Cpath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23777%22%20d%3D%22M581.209%2C223.007L269.839%2C530.92c-51.592%2C51.024-135.247%2C51.024-186.839%2C0c-51.592-51.023-51.592-133.737%2C0-184.761%20L363.248%2C69.04c34.402-34.009%2C90.15-34.009%2C124.553%2C0c34.402%2C34.008%2C34.402%2C89.166%2C0%2C123.174l-280.249%2C277.12%20c-17.19%2C17.016-45.075%2C17.016-62.287%2C0c-17.19-16.993-17.19-44.571%2C0-61.587L394.37%2C161.42l-31.144-30.793L114.144%2C376.975%20c-34.402%2C34.009-34.402%2C89.166%2C0%2C123.174c34.402%2C34.009%2C90.15%2C34.009%2C124.552%2C0l280.249-277.12%20c51.592-51.023%2C51.592-133.737%2C0-184.761c-51.593-51.023-135.247-51.023-186.839%2C0L36.285%2C330.784l1.072%2C1.071%20c-53.736%2C68.323-49.012%2C167.091%2C14.5%2C229.88c63.512%2C62.79%2C163.35%2C67.492%2C232.46%2C14.325l1.072%2C1.072l326.942-323.31%20L581.209%2C223.007z%22%2F%3E%0A%09%09%3C%2Fg%3E%0A%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        width:             20px;
        height:            100%;
        background-size:   contain;
    }

    .attach .remove-attach { font-weight: 700; padding: 7px; margin-left: auto; }
    .attach [type=file] {
        cursor:           pointer;
        position:         relative;
        width:            290px;
        background-color: transparent;
        padding:          15px 10px 15px 20px;
        border:           2px dashed var(--gray5);
        transition:       200ms background linear;
        border-radius:    var(--element-border-radius);
        color:            var(--link-color);
        box-sizing:       border-box;
    }

    .attach [type=file].is-highlighted { background: #fafadf75; }
    .attach [type=file]::-webkit-file-upload-button,
    .attach [type=file]::file-selector-button { visibility: hidden; width: 0; }

    .s-subscribe-section.is-extended .s-hidden { display: block; }
    .s-subscribe-section .s-subscribe-section--title { font-size: 1.25em; font-weight: 400; }
    .s-subscribe-section form { position: relative; }
    .s-subscribe-section form .s-subscribe-section--title { font-size: 1.25em; color: var(--black); }
    .s-subscribe-section form .s-subscribe-section--title span { display: block; font-size: .875em; color: var(--gray); }
    .s-subscribe-section form input { font-size: .875rem; border: 1px solid transparent; outline: none; }

    @media (max-width: 768px) {
        .s-subscribe-section form input { margin-right: 0 !important; width: 100% }
    }
    .s-subscribe-section form input:focus,
    .s-subscribe-section form input:hover { background: var(--gray5); }

    @media (max-width: 768px) {
        .s-subscribe-section form [type="submit"] {
            width: 100%
        }
    }

    .s-subscribe-section form .s-hidden {
        display:       none;
        position:      absolute;
        top:           100%;
        left:          0;
        width:         340px;
        padding:       1em;
        background:    var(--white);
        z-index:       1;
        box-shadow:    0 0 16px rgba(0, 0, 0, .15);
        border-radius: 3px;
    }

    .s-subscribe-section form .s-hidden .wa-captcha { margin: 0; padding: 0; }
    .s-subscribe-section form .s-hidden .wa-captcha p { display: flex; align-items: center; }
    .s-subscribe-section form .s-hidden .wa-captcha p input { width: 1em; border: 1px solid var(--gray4); flex: 1 1 auto; padding: 10px 16px; }
    .s-subscribe-section form .s-hidden .wa-captcha p img { margin: 0; }
    .s-subscribe-section form .s-hidden .wa-captcha p strong { margin: 0 .5em; }
    .s-subscribe-section form .s-hidden .wa-captcha p a { display: inline; }

    .s-subscribe-personal-data { color: var(--gray4); }

    .search .search-wrapper { position: relative; }
    .search .search-wrapper input { width: 100%; background: transparent; -webkit-appearance: none; appearance: none; margin-right: 0; padding-left: 1em; padding-right: 32px; box-sizing: border-box; }
    .search .search-wrapper input:focus { outline: 0; }
    .search .search-wrapper input:focus + button { color: var(--gray3); }
    .search .search-wrapper input[type="search" i]::-webkit-search-cancel-button { appearance: none; }
    .search .search-wrapper input::placeholder { color: var(--gray4); }
    .search .search-wrapper button {
        position:   absolute;
        border:     none;
        outline:    none;
        box-shadow: none;
        padding:    0;
        color:      var(--gray4);
        background: transparent;
        top:        50%;
        transform:  translateY(-50%);
        right:      1em;
    }

    .search .search-wrapper button:hover::after { content: none; }
    .search .search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */ border: 0; padding: 0; }

    #cookie-agreement { position: fixed; bottom: 1rem; left: 1rem; z-index: 9999; max-width: 12rem; animation: slideIn 0.4s ease-out; }
    #cookie-agreement .cookie-agreement-content { background: var(--bg-color-accent); border-radius: var(--element-border-radius); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.07)) drop-shadow(0 8px 4px rgba(0, 0, 0, 0.04)); color: var(--text-color); }

    @keyframes slideIn {
        from { opacity: 0; transform: translateY(1rem); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* Navigation menus
    ------------------- */
    ul.menu-v { margin: 0; padding: 0; }
    ul.menu-v li { list-style: none; padding: 0; line-height: 1.3em; }
    ul.menu-v li:not(:last-child) { border-bottom: .0625rem solid var(--divider-color); }
    ul.menu-v li a { padding: .8125rem 1.875rem .8125rem 1rem; display: block; text-decoration: none; }
    ul.menu-v li.collapsible { background: url('img/rarr.png') no-repeat; background-position: right center; background-size: 2rem 1rem; }

    @media (max-width: 768px) {
        ul.menu-v li.collapsible {
            background: none
        }
    }
    ul.menu-v li.bottom-padded { margin-bottom: 1.25rem; }
    ul.menu-v li .count { float: right; color: var(--gray3); }
    ul.menu-v li .count i.icon16 { margin: 0 -0.3125rem; }
    ul.menu-h { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
    ul.menu-h li { list-style: none; line-height: 1.3em; }
    ul.menu-h li a { padding: .8125rem .625rem .8125rem .625rem; display: block; text-decoration: none; }
    ul.tree { list-style: none; padding-left: 0; }
    ul.tree li { border: none; }
    ul.tree li a { padding: .3125rem .625rem; display: block; text-decoration: none; }
    ul.tree li.selected a { background: transparent; }
    ul.tree li ul { padding-left: 1.25rem; list-style: none; }
    ul.tree li ul li a { padding: .1875rem .375rem; }

    .paging-nav { text-align: center; }
    .paging-nav ul { display: inline-flex; gap: .5rem; font-size: 1rem; list-style: none; }
    .paging-nav ul li { line-height: normal; padding: 0; color: var(--gray1); }
    .paging-nav ul li a {
        display:         inline-flex;
        list-style:      none;
        width:           2.5rem;
        height:          2.5rem;
        justify-content: center;
        align-items:     center;
        line-height:     normal;
        background:      var(--white);
        border:          1px solid var(--gray5);
        border-radius:   var(--element-border-radius);
        padding:         0;
        color:           var(--gray1);
    }

    .paging-nav ul li.selected a { border: 2px solid var(--link-color); color: var(--link-color); }

    .sub-links { margin-bottom: 32px; padding-left: 0; gap: 16px; }
    .sub-links li { list-style: none; line-height: 1.5em; }
    .sub-links li a { text-decoration: none; font-size: 90%; color: var(--header-menu-pages-link-color); }
    .sub-links li a:hover { color: var(--link-color); }
}

@layer typography {
    /* Base typography */
    html { scroll-behavior: smooth; height: 100vh; }
    /* Mobile */
    @media (max-width: 768px) {
        html { --h1-size: 2rem; --h2-size: 1.7142rem; --h3-size: 1.4285rem; --h4-size: 1.1428rem; --h5-size: 1rem; --h6-size: 1rem }
    }
    /* Tablet */
    @media (min-width: 769px) and (max-width: 1024px) {
        html { --h1-size: 2rem; --h2-size: 1.7142rem; --h3-size: 1.4285rem; --h4-size: 1.1428rem; --h5-size: 1rem; --h6-size: 1rem }
    }
    /* Wide screen */
    @media (min-width: 1300px) {
    }
    body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-family); font-size: var(--font-size); background: var(--bg-color); line-height: 100%; color: var(--text-color); }
    body.is-shadow-shown { position: relative; }
    body.is-shadow-shown::after,
    body:has(.mobile-nav.opened)::after,
    body:has(.search-active)::after {
        display:    block;
        content:    "";
        position:   fixed;
        inset:      0;
        background: rgba(0, 0, 0, .25);
        z-index:    99;
    }
    body.is-shadow-shown .globalheader { position: relative; z-index: 100; }
    /* Links */
    a { color: var(--link-color); outline: 0 none; text-decoration: none; transition: color 300ms linear; }
    a:focus { outline: none; outline-offset: -4px; }
    a:visited { color: var(--link-visited-color); }
    a.not-visited:visited { color: var(--link-color); }
    a:hover { color: var(--link-hover-color); }
    a img { border: 0; }
    /* Headings */
    h1, .h1 { font-size: var(--h1-size); }
    h2, .h2 { font-size: var(--h2-size); }
    h3, .h3 { font-size: var(--h3-size); }
    h4, .h4 { font-size: var(--h4-size); }
    h5, .h5 { font-size: var(--h5-size); }
    h6, .h6 { font-size: var(--h6-size); }
    h1, h2, h3, h4, .h1, .h2, .h3, .h4 { line-height: 120%; font-weight: 400; }
    /* Text elements */
    p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset, blockquote, figure { margin-bottom: 20px; }
    p { line-height: 1.4em; }
    p a { text-decoration: underline; }
    /* Lists */
    ul, ol { padding-top: 0; line-height: 1.4em; }
    ul.unstyled, ol.unstyled { list-style: none; padding: 0; margin: 0; }
    ol { list-style: decimal; }
    /* Code blocks */
    pre { margin-top: 16px; font-size: 90%; line-height: 24px; color: rgba(0, 0, 0, .75); background: rgba(0, 0, 0, .03); padding: 16px 20px; word-wrap: normal; }
    /* Blockquotes */
    blockquote { color: rgba(0, 0, 0, .6); font-size: 0.9em; font-style: italic; border-left: 1px solid rgba(0, 0, 0, .1); padding-left: 24px; background: var(--gray5); }
    blockquote cite { font-size: 0.9em; }
    /* Horizontal rules */
    hr { background-color: var(--divider-color); height: 1px; border: 0; }
    /* Hint text */
    .hint,
    .breadcrumbs,
    .breadcrumbs a,
    .breadcrumbs span.rarr,
    table.features tr.divider td,
    .bestsellers .bestsellers-header,
    ul.thumbs li span.summary,
    .review .summary,
    .review .summary .date,
    ul.albums li .count,
    .album-note,
    .credentials .username,
    .credentials .username a { color: var(--hint-color); }
    /* Tables
    --------- */
    table { border-collapse: collapse; border-spacing: 0; }
    table th { color: var(--gray3); padding: 0 10px 7px; }
    table td { padding: 10px; border: 1px solid rgba(0, 0, 0, 0.1); }
    table.not-bordered td { border: none; }
    table.lined { margin-top: 25px; width: 100%; border-spacing: 0; border-collapse: collapse; }
    table.lined th { padding-left: 7px; padding-right: 7px; }
    table.lined td { padding: 15px 7px; border-bottom: 1px solid var(--gray5); }
    table.lined td.min-width { width: 1%; }
    table.lined td p { margin: 0; }
    table.lined td input.numerical { width: 50px; margin-right: 5px; text-align: right; }
    table.lined tr.no-border td { border: none; }
    table.lined tr.thin td { padding-top: 13px; padding-bottom: 0; }
    table.lined tr.service td { padding-top: 5px; padding-bottom: 5px; padding-left: 25px; font-size: 0.8em; color: #555; }
}

@layer utilities {
    /* Layout utilities */
    .block { padding: 25px 30px; }

    .inline { display: inline !important; }

    .inline-link { text-decoration: none !important; display: inline-block; }
    .inline-link b { border-bottom: 1px dotted; font-weight: normal; position: relative; top: -0.13em; }
    .inline-link b i { font-style: normal; position: relative; top: 0.13em; }

    .small { font-size: 0.875em; }

    .smaller { font-size: 0.75em; }

    .smallest { font-size: 0.625em; }

    .large { font-size: 1.125em; }

    .larger { font-size: 1.25em; }

    .largest { font-size: 1.5em; }

    .bold, .fw-bold { font-weight: 700; }

    .semibold, .fw-semibold { font-weight: 600; }

    .fw-normal { font-weight: 400; }

    .strike { text-decoration: line-through; }

    .highlighted { background: #ffc; }

    .hint { color: var(--hint-color); font-size: 0.9em; }
    .hint a,
    .hint:visited,
    .hint a:visited { color: var(--gray3); }
    .gray,
    .gray .dropdown ul,
    .gray a,
    .gray:visited,
    .gray a:visited { color: var(--gray3); }

    .text-left { text-align: left; }

    .text-center { text-align: center; }

    .text-right { text-align: right; }

    .shadowed { box-shadow: 0 5px 15px var(--gray3); }

    .nowrap { white-space: nowrap; }

    .hr { border-top: 1px solid var(--gray20); margin-bottom: 15px; }

    .uppercase { text-transform: uppercase; }

    .blurred { -ms-filter: blur(5px); filter: blur(5px); }

    .userpic { border-radius: 50%; background-size: auto; }

    .strike { text-decoration: line-through; }

    .highlighted { background: #ffc; }

    .breadcrumbs { color: var(--link-color); margin-bottom: 35px; display: flex; align-items: center; gap: 10px; }
    .breadcrumbs a { color: var(--gray4) !important; }
    .breadcrumbs span.chevron::after { left: 0; color: var(--gray4); }

    .tags { line-height: 1.6em; }
    .tags a { color: var(--green) !important; display: inline !important; padding: 0 4px !important; }
    .tags a:hover { color: red !important; }

    .welcome { text-align: center; background: url('img/webasyst.svg') no-repeat; background-position: top center; padding-top: 300px; background-size: 256px 256px; margin-bottom: 30px; }
    .welcome h1 { font-weight: normal; font-size: 2em; }

    .staff { background: var(--bg_tr_25); padding: 2px 6px; color: var(--white); font-size: 0.9em; border-radius: min(.3125rem, var(--element-border-radius)); white-space: nowrap; line-height: normal; }
    /* Chevron utility */
    .chevron::after {
        content:        '';
        display:        inline-flex;
        border-style:   solid;
        border-width:   0 .1em 0.1em 0;
        width:          0.45em;
        height:         0.45em;
        vertical-align: middle;
        position:       relative;
        top:            0;
        left:           0.25em;
    }

    .chevron.down::after { transform: rotate(45deg); top: -0.2em; }

    .chevron.right::after { transform: rotate(-45deg); }
    /* Badge utility */
    .s-badge { display: inline-block; padding: 0.35em 0.45em; font-size: 90%; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 5px; }

    .s-badge.rounded { border-radius: 50rem; }

    .s-badge.red { background: var(--red); color: var(--white); }
    /* Visibility utilities */
    .overflow-hidden { overflow: clip; }

    .is-hidden { display: none; }
    /* Loading states */
    .s-loading-section {
        position:        fixed;
        top:             0;
        left:            0;
        display:         flex;
        width:           100%;
        height:          100%;
        justify-content: center;
        align-items:     center;
        background:      rgba(255, 255, 255, .5);
        z-index:         100;
    }

    .s-loading-section .s-loading-content { display: inline-block; }
    /* Icons */
    .icon10 {
        background-repeat: no-repeat;
        height:            10px;
        width:             10px;
        display:           inline-block;
        text-indent:       -9999px;
        text-decoration:   none !important;
        background-image:  url("img/icons.png");
        background-size:   260px 160px;
        vertical-align:    top;
        margin:            0.3em 0.1em 0 0;
    }
    .icon10.darr { background-image: url('img/darr.png'); background-size: 16px 16px; }
    .icon10.star,
    .icon10.star-full { background-position: 0 -100px; }
    .icon10.star-half { background-position: -10px -100px; }
    .icon10.star-empty { background-position: -20px -100px; }
    .icon16 {
        background-repeat: no-repeat;
        height:            16px;
        width:             16px;
        display:           inline-block;
        text-indent:       -9999px;
        text-decoration:   none !important;
        background-image:  url("img/icons.png");
        background-size:   260px 160px;
        vertical-align:    top;
        margin:            0.2em 0.25em 0 0;
    }
    .icon16.rss { background-position: -16px 0; }
    .icon16.facebook { background-position: -32px 0; }
    .icon16.twitter { background-position: -48px 0; }
    .icon16.vk { background-position: -64px 0; }
    .icon16.gplus { background-position: -80px 0; }
    .icon16.pinterest { background-position: -96px 0; }
    .icon16.youtube { background-position: -112px 0; }
    .icon16.instagram { background-position: -128px 0; }
    .icon16.userpic20 { border-radius: 50%; background-size: 20px 20px; }
    .icon16.color { border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); width: 12px; height: 12px; background-image: none; }
    .icon16.like { background-position: 0 -16px; margin-top: 0; }
    .icon16.star,
    .icon16.star-full { background-position: -16px -16px; }
    .icon16.star-half { background-position: -32px -16px; }
    .icon16.star-empty { background-position: -48px -16px; }
    .icon16.star-hover { background-position: -64px -16px; }
    .icon16.remove { background-position: -96px -16px; }
    .icon16.saved { background-position: -112px -16px; }
    .icon16.stock-red { background-position: -128px -16px; }
    .icon16.stock-yellow { background-position: -144px -16px; }
    .icon16.stock-green { background-position: -160px -16px; }
    .icon16.stock-transparent { background-position: -176px -16px; }
    .icon16.checkmark { background-position: -192px -16px; }
    .icon16.compare { background-position: -208px -16px; }
    .icon16.compare.active { background-position: -224px -16px; }
    .icon16.uarr { background: url('img/uarr.png'); background-position: 0 0; background-size: 16px 16px; }
    .icon16.loading { background-image: url('img/loading16.gif'); background-position: 0 0; background-size: 16px 16px; }
    .icon24 {
        background-repeat: no-repeat;
        height:            24px;
        width:             24px;
        display:           inline-block;
        text-indent:       -9999px;
        text-decoration:   none !important;
        background-image:  url("img/icons.png");
        background-size:   260px 160px;
        vertical-align:    top;
        margin:            0.2em 0.25em 0 0;
    }
    .icon24.rss { background-position: 0 -50px; }
    .icon24.facebook { background-position: -24px -50px; }
    .icon24.twitter { background-position: -48px -50px; }
    .icon24.vk { background-position: -72px -50px; }
    .icon24.instagram { background-position: -96px -50px; }
    .icon24.youtube { background-position: -120px -50px; }
    .icon24.pinterest { background-position: -144px -50px; }
    .icon24.gplus { background-position: -168px -50px; }
    .icon24.loading { background-image: url('img/loading.gif'); background-size: 24px 24px; height: 24px; width: 24px; display: inline-block; }
    .icon32.loading { background-image: url('img/loading.gif'); background-size: 32px 32px; height: 32px; width: 32px; display: inline-block; }

    .wa-inline-block { display: inline-block; }
    /* Flexbox utilities */
    .wa-flex { display: flex; }
    .wa-flex.space-025 { gap: 0.25rem; }
    .wa-flex.space-05 { gap: 0.5rem; }
    .wa-flex.space-075 { gap: 0.75rem; }
    .wa-flex.space-1 { gap: 1rem; }
    .wa-flex.space-2 { gap: 2rem; }
    .wa-flex.space-3 { gap: 3rem; }
    .wa-flex.space-4 { gap: 4rem; }
    .wa-flex.space-5 { gap: 5rem; }
    .wa-flex-wrap { flex-wrap: wrap; }
    .wa-flex-nowrap { flex-wrap: nowrap; }
    .wa-flex-row { flex-direction: row; }
    .wa-flex-column { flex-direction: column; }
    .wa-flex-fill { flex: 1 1 auto; }
    .justify-content-start { justify-content: flex-start; }
    .justify-content-end { justify-content: flex-end; }
    .justify-content-center { justify-content: center; }
    .justify-content-between { justify-content: space-between; }
    .justify-content-around { justify-content: space-around; }
    .justify-content-evenly { justify-content: space-evenly; }
    .align-content-start { align-content: flex-start; }
    .align-content-end { align-content: flex-end; }
    .align-content-center { align-content: center; }
    .align-content-between { align-content: space-between; }
    .align-content-around { align-content: space-around; }
    .align-content-stretch { align-content: stretch; }
    .align-items-start { align-items: flex-start; }
    .align-items-end { align-items: flex-end; }
    .align-items-center { align-items: center; }
    .align-items-baseline { align-items: baseline; }
    .align-items-stretch { align-items: stretch; }
    /* Spacing utilities */
    .wa-pb-0 { padding-bottom: 0; }
    .wa-pb-4 { padding-bottom: .25rem; }
    .wa-pb-8 { padding-bottom: .5rem; }
    .wa-pb-12 { padding-bottom: .75rem; }
    .wa-pb-16 { padding-bottom: 1rem; }
    .wa-pb-18 { padding-bottom: 1.125rem; }
    .wa-pb-20 { padding-bottom: 1.25rem; }
    .wa-pb-22 { padding-bottom: 1.375rem; }
    .wa-pb-24 { padding-bottom: 1.5rem; }
    .wa-pb-28 { padding-bottom: 1.75rem; }
    .wa-pb-32 { padding-bottom: 2rem; }

    .wa-pt-0 { padding-top: 0; }
    .wa-pt-4 { padding-top: .25rem; }
    .wa-pt-8 { padding-top: .5rem; }
    .wa-pt-12 { padding-top: .75rem; }
    .wa-pt-16 { padding-top: 1rem; }
    .wa-pt-18 { padding-top: 1.125rem; }
    .wa-pt-20 { padding-top: 1.25rem; }
    .wa-pt-22 { padding-top: 1.375rem; }
    .wa-pt-24 { padding-top: 1.5rem; }
    .wa-pt-28 { padding-top: 1.75rem; }
    .wa-pt-32 { padding-top: 2rem; }

    .wa-pl-0 { padding-left: 0; }
    .wa-pl-4 { padding-left: .25rem; }
    .wa-pl-8 { padding-left: .5rem; }
    .wa-pl-12 { padding-left: .75rem; }
    .wa-pl-16 { padding-left: 1rem; }
    .wa-pl-18 { padding-left: 1.125rem; }
    .wa-pl-20 { padding-left: 1.25rem; }
    .wa-pl-22 { padding-left: 1.375rem; }
    .wa-pl-24 { padding-left: 1.5rem; }
    .wa-pl-28 { padding-left: 1.75rem; }
    .wa-pl-32 { padding-left: 2rem; }

    .wa-pr-0 { padding-right: 0; }
    .wa-pr-4 { padding-right: .25rem; }
    .wa-pr-8 { padding-right: .5rem; }
    .wa-pr-12 { padding-right: .75rem; }
    .wa-pr-16 { padding-right: 1rem; }
    .wa-pr-18 { padding-right: 1.125rem; }
    .wa-pr-20 { padding-right: 1.25rem; }
    .wa-pr-22 { padding-right: 1.375rem; }
    .wa-pr-24 { padding-right: 1.5rem; }
    .wa-pr-28 { padding-right: 1.75rem; }
    .wa-pr-32 { padding-right: 2rem; }

    .wa-mb-0 { margin-bottom: 0; }
    .wa-mb-4 { margin-bottom: .25rem; }
    .wa-mb-8 { margin-bottom: .5rem; }
    .wa-mb-12 { margin-bottom: .75rem; }
    .wa-mb-16 { margin-bottom: 1rem; }
    .wa-mb-18 { margin-bottom: 1.125rem; }
    .wa-mb-20 { margin-bottom: 1.25rem; }
    .wa-mb-22 { margin-bottom: 1.375rem; }
    .wa-mb-24 { margin-bottom: 1.5rem; }
    .wa-mb-28 { margin-bottom: 1.75rem; }
    .wa-mb-32 { margin-bottom: 2rem; }
    .wa-mb-auto { margin-bottom: auto; }

    .wa-mt-0 { margin-top: 0; }
    .wa-mt-4 { margin-top: .25rem; }
    .wa-mt-8 { margin-top: .5rem; }
    .wa-mt-12 { margin-top: .75rem; }
    .wa-mt-16 { margin-top: 1rem; }
    .wa-mt-18 { margin-top: 1.125rem; }
    .wa-mt-20 { margin-top: 1.25rem; }
    .wa-mt-22 { margin-top: 1.375rem; }
    .wa-mt-24 { margin-top: 1.5rem; }
    .wa-mt-28 { margin-top: 1.75rem; }
    .wa-mt-32 { margin-top: 2rem; }
    .wa-mt-auto { margin-top: auto; }

    .wa-mr-0 { margin-right: 0; }
    .wa-mr-4 { margin-right: .25rem; }
    .wa-mr-8 { margin-right: .5rem; }
    .wa-mr-12 { margin-right: .75rem; }
    .wa-mr-16 { margin-right: 1rem; }
    .wa-mr-18 { margin-right: 1.125rem; }
    .wa-mr-20 { margin-right: 1.25rem; }
    .wa-mr-22 { margin-right: 1.375rem; }
    .wa-mr-24 { margin-right: 1.5rem; }
    .wa-mr-28 { margin-right: 1.75rem; }
    .wa-mr-32 { margin-right: 2rem; }
    .wa-mr-auto { margin-right: auto; }

    .wa-ml-0 { margin-left: 0; }
    .wa-ml-4 { margin-left: .25rem; }
    .wa-ml-8 { margin-left: .5rem; }
    .wa-ml-12 { margin-left: .75rem; }
    .wa-ml-16 { margin-left: 1rem; }
    .wa-ml-18 { margin-left: 1.125rem; }
    .wa-ml-20 { margin-left: 1.25rem; }
    .wa-ml-22 { margin-left: 1.375rem; }
    .wa-ml-24 { margin-left: 1.5rem; }
    .wa-ml-28 { margin-left: 1.75rem; }
    .wa-ml-32 { margin-left: 2rem; }
    .wa-ml-auto { margin-left: auto; }
    /* Typography utilities */
    .font-size-big { font-size: var(--h5-size); }

    .bg-gray { background-color: var(--bg-gray-color); }
    .bg-tr-8 { background-color: var(--bg_tr_8); }
    .bg-tr-10 { background-color: var(--bg_tr_10); }
    .bg-tr-25 { background-color: var(--bg_tr_25); }
    .bg-tr-50 { background-color: var(--bg_tr_50); }

    .w-100 { width: 100%; }

    .h-100 { height: 100%; }

    .text-white { color: var(--white); }
    .text-white-auto { color: var(--white-auto); }

    .text-black { color: var(--black); }
    .text-black-auto { color: var(--black-auto); }

    .text-gray { color: var(--gray4); }
    /* Layout responsive */
    @media (max-width: 1024px) {
        .left-sidebar > .sidebar { order: 1; }
        .left-sidebar > .content { order: 0; }
    }
    /* Tablet responsive */
    @media (min-width: 768px) and (max-width: 1024px) {
        body { -webkit-text-size-adjust: 100%; }
        header h2 { margin-right: 10px; }
        header .apps li { margin: 2px 10px 2px 0; }
    }
    /* Mobile responsive */
    @media (max-width: 768px) {
        .flyout .container { padding: 0; }
        header .apps.unfolded { display: block; }
        header .cart,
        header .cart.fixed { min-width: 0 !important; position: static; }
        header .cart > .container { padding: 0; }
        header .cart a { height: 1em; padding: 16px 9px 15px 17px; }
        header .cart a .h-cart-title { display: none; }
        header .cart.fixed a { background: transparent; padding: 16px 9px 15px 17px; border-radius: 0; box-shadow: none; }
        header .cart.fixed a:hover { background: transparent; }
        header .cart #cart-content { display: none; }

        .content img { max-width: 100%; }

        .wa-form .wa-field .wa-name { float: none; padding-bottom: 0; margin-bottom: 5px; }
        .wa-form .wa-field .wa-value { margin-left: 0; margin-bottom: 13px; }
        .wa-form .wa-field .wa-value p span { display: block; }
        .wa-form .wa-field .wa-value input[type="text"],
        .wa-form .wa-field .wa-value input[type="email"],
        .wa-form .wa-field .wa-value input[type="password"] { min-width: 200px; }

        .wa-auth-adapters p { width: 80%; }

        .wa-captcha input.wa-captcha-input { width: 100px; }

        .errormsg { margin-left: 0; }
        table td { padding: 5px; }
        html.my ul.menu-h li a { padding: 10px; }

        .comment-form-fields label { float: left; }

        .sub-links li { font-size: 110%; margin-bottom: 5px; }

        .sidebar .likebox { display: none; }

        .connect.inline .likebox { display: block; width: auto; }

        .wa-signup-form .wa-form .wa-field.wa-field-email .wa-value input { min-width: 240px; }
        .wa-signup-form .wa-form .wa-field.wa-field-password .wa-value input,
        .wa-signup-form .wa-form .wa-field.wa-field-password_confirm .wa-value input { min-width: 160px; width: 160px; }
    }

    .wa-hide { display: none; }
    .wa-show { display: revert; }
    /* Mobile */
    @media (max-width: 768px) {
        .wa-hide-m { display: none; }
        .wa-show-m { display: revert; }
    }
    /* Tablet */
    @media (min-width: 769px) and (max-width: 1024px) {
        .wa-hide-t { display: none; }
        .wa-show-t { display: revert; }
    }
    /* Desktop */
    @media (min-width: 1025px) {
        .wa-hide-d { display: none; }
        .wa-show-d { display: revert; }
    }
}

@layer page_elements {
    header.globalheader { --globalheader-mb: 2rem; position: relative; box-shadow: var(--shadow1); margin-bottom: var(--globalheader-mb); padding: .875rem 0 1rem 0; background-color: var(--bg-color-accent); }
    header.globalheader:has(.mobile-nav.opened,.search-active) { z-index: 100; }

    @media (max-width: 768px) {
        header.globalheader {
            box-shadow: none
        }
        header.globalheader .auth { display: none; }
        header.globalheader .auth li a { font-size: 1em; }
        header.globalheader .auth li a i.icon16 { margin-top: 0; }
    }
    header.globalheader .appnav:empty { margin: 0; min-height: 0; }

    @media (max-width: 768px) {
        header.globalheader .appnav:has(.category-btn-item.submenu-is-shown) .is-inline-nav { display: none; }
        header.globalheader .appnav:has(.category-btn-item.submenu-is-shown) > .is-pages { display: none; }
    }
    header.globalheader .appnav.search-active .search input { width: 100%; padding-left: 24px; }
    header.globalheader .appnav.search-active .search button { left: auto; right: 1em; }
    header.globalheader .appnav.search-active > *:not(.search) { display: none !important; }
    header.globalheader .mobile-nav { position: absolute; left: 0px; right: 0px; z-index: 9; top: 100%; background-color: var(--bg-color); }
    header.globalheader .mobile-nav.opened { padding-bottom: 1rem; }
    header.globalheader .mobile-nav .nav-negative { padding-left: 0; margin: 0; line-height: 1; }
    header.globalheader .mobile-nav .nav-negative li { list-style: none; display: block; }
    header.globalheader .mobile-nav .nav-negative li.selected a { color: var(--text-color); background: transparent; font-weight: bold; }
    header.globalheader .mobile-nav .nav-negative li a { text-decoration: none; color: var(--header-link-color); display: block; padding: 1rem; }
    header.globalheader .mobile-nav .nav-negative.auth li { display: flex; align-items: center; }

    @media (max-width: 768px) {
        header.globalheader .mobile-nav .nav-negative.auth { display: block; margin-top: 0 }
        header.globalheader .mobile-nav .nav-negative.auth.nav-negative { display: flex; }
        header.globalheader .mobile-nav .nav-negative.auth.nav-negative li a { display: inline-flex; padding: 0.625rem 0rem 0.625rem 1rem; color: var(--header-link-color); }
        header.globalheader .mobile-nav .nav-negative.auth.nav-negative li a svg { margin-top: -0.0625rem; }
    }
    header a { color: var(--header-link-color); }
    header a:hover { color: var(--header-link-hover-color); }
    header a:visited { color: var(--header-link-color); }
    header h2 { margin: 0; font-size: 1em; font-weight: 500; white-space: nowrap; color: var(--header-sitename-color); }

    @media (max-width: 768px) {
        header h2 { margin-right: 0 !important; overflow: hidden; margin-left: 8px; text-overflow: ellipsis; }
    }
    header h2 a { color: var(--header-sitename-color); }
    header h2 a:hover { color: var(--header-sitename-color); }
    header h2 a:visited { color: var(--header-sitename-color); }

    @media (max-width: 768px) {
        header h2 a img {
            display: none
        }
    }
    header h2 a span { display: none; }

    @media (max-width: 768px) {
        header h2 a span {
            display: inline
        }
    }
    header .apps { padding: 6px 0; margin: 0; display: flex; align-items: center; gap: 20px; list-style: none; }
    header .apps li { flex: 1 0 auto; }
    header .apps li.apps-overflow { position: relative; }
    header .apps .apps-overflow-toggle { display: inline-flex; align-items: flex-start; position: relative; text-decoration: none; }
    header .apps .apps-overflow-toggle.chevron.down::after { top: 0.25em !important; left: 0.4em !important; }
    header .apps .apps-overflow-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 8px 0; margin: 0; list-style: none; background: var(--bg-color); box-shadow: var(--shadow1); z-index: 20; border-radius: var(--element-border-radius); }
    header .apps .apps-overflow-menu li { margin: 0; flex: 0 0 auto; }
    header .apps .apps-overflow-menu a { display: block; white-space: nowrap; padding: 0.5rem 1rem; color: var(--header-link-color); }
    header .apps .apps-overflow-menu a:hover { color: var(--header-link-hover-color); background: var(--bg-color-accent); }
    header .apps .apps-overflow.open .apps-overflow-menu { display: block; }
    header .auth { display: flex; vertical-align: top; margin: 1px 0 0 16px; padding: 0; }
    header .auth li { display: inline-block; vertical-align: top; list-style: none; }
    header .auth li a.auth-logout { color: var(--header-apps-link-color); margin-left: 12px; }
    header .auth li a.auth-logout:hover { color: var(--header-apps-link-selected-color); }
    header .auth li .userpic20 { margin: 0; width: 20px; height: 20px; }
    header .auth li a svg { vertical-align: bottom; }
    header .cart .container { min-width: min-content; width: 100%; }
    header .cart .cart-summary { white-space: nowrap; }
    header .cart a { display: inline-flex; align-items: center; }
    header .cart a .cart-total {
        background-color: var(--header-cart-total-bg-color);
        border-radius:    50%;
        color:            var(--white);
        font-size:        12px;
        padding:          2px 6px;
        line-height:      14px;
        font-weight:      400;
        display:          inline-block;
        text-align:       center;
        white-space:      nowrap;
        vertical-align:   baseline;
    }
    header .cart a .cart-total:empty { padding: 0; }
    header .cart a .ruble { line-height: 1em; font-size: 10px; }
    header .cart a.cart-to-checkout { display: none; text-align: center; font-weight: bold; padding: 11px 18px; color: var(--link-color); font-size: 1.1em; }
    header .cart a.cart-to-checkout:hover { background-color: var(--white) !important; }
    header .cart .cart-just-added { position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box; display: none; padding: 9px 18px; font-size: 0.9em; }
    header .cart.fixed {
        position:        fixed;
        top:             0;
        left:            0;
        right:           0;
        z-index:         999;
        padding-left:    var(--container-padding);
        padding-right:   var(--container-padding);
        text-align:      right;
        max-width:       var(--container-max-width);
        margin:          0 auto;
        justify-content: flex-end;
    }
    header .cart.fixed a { text-align: center; border-top: none; background-color: var(--red); color: var(--white); padding: 4px 10px 6px 10px; box-shadow: var(--shadow1); border-radius: 0 0 clamp(0px, var(--element-border-radius), 1rem) clamp(0px, var(--element-border-radius), 1rem); }
    header .cart.fixed a:hover { background-color: #d33 !important; }
    header .cart.fixed a.cart-to-checkout { display: block; border: none; background: var(--white); box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.2); }
    header .cart.fixed a.cart-to-checkout:hover { color: var(--red) !important; }
    header .cart.fixed a .cart-total { background-color: var(--white); color: var(--red); }
    header .cart.fixed .cart-just-added { background: var(--gray5); display: inline-block; border-radius: 10px; margin-top: 4px; position: relative; width: auto; }
    header #mobile-nav-toggle {
        /* mobile only */
        display:       none;
        border:        none;
        padding:       .3125rem;
        margin:        0 .3125rem 0 1rem;
        min-width:     1.875rem;
        height:        1.875rem;
        color:         var(--header-apps-link-color);
        background:    transparent;
        border-radius: 0;
        outline:       none;
        font-size:     1.2em;
    }
    header #mobile-nav-toggle::after { content: none; }
    header #mobile-nav-toggle .hamburger-icon { transition: all 0.3s ease; }
    header #mobile-nav-toggle .hamburger-icon .hamburger-line { transition: all 0.3s ease; transform-origin: center; }
    header #mobile-nav-toggle.opened .hamburger-line-1 { transform: rotate(45deg) translate(.0625rem, .3125rem); }
    header #mobile-nav-toggle.opened .hamburger-line-2 { opacity: 0; }
    header #mobile-nav-toggle.opened .hamburger-line-3 { transform: rotate(-45deg) translate(.0625rem, -0.3125rem); }
    header #globalnav { margin-bottom: 1.125rem; }

    @media (max-width: 768px) {
    }
    header #globalnav .globalnav-bar { color: var(--gray3); }

    @media (max-width: 768px) {
        header #globalnav .globalnav-bar {
            gap: 0 !important
        }
    }
    header #globalnav .globalnav-bar nav { flex: 0 1 auto; min-width: 0; }
    header #globalnav .globalnav-bar.selected a { color: var(--header-link-hover-color); }

    @media (max-width: 768px) {
        header #globalnav > .container {
            padding: 0 0.5rem
        }
    }

    @media (max-width: 768px) {
        header #globalnav nav {
            display: none !important
        }
    }
    header .search { min-width: 12rem; }
    header .search [type="search"] { width: 100%; border: 0; background-color: var(--header-search-input-bg-color); color: var(--header-search-input-color); transition: background-color 300ms linear; }
    header .search [type="search"]:focus,
    header .search [type="search"]:hover { background-color: var(--header-search-input-bg-color-hover); }

    @media (max-width: 768px) {
        header .search { min-width: auto; font-size: .875rem }
        header .search .search-wrapper input { width: 0; padding-left: 24px; }
        header .search .search-wrapper button { right: auto; left: 1em; }
    }
    header .pages { padding: 0; margin: 0; display: flex; align-items: center; gap: 1.25rem; }
    header .pages.is-inline-nav { padding-top: .8309rem; padding-bottom: .8309rem; }

    @media (max-width: 768px) {
        header .pages { display: flex; flex-wrap: wrap; gap: 18px; }
    }
    header .pages li { display: inline-block; list-style: none; }
    header .pages li.category-btn-item { display: inline-flex; }
    header .pages li.category-btn-item > a.button { display: inline; color: var(--button-text-color); font-weight: normal; padding: 0.907em 1.83em 0.907em 1.25em; }
    header .pages li.category-btn-item > a.button::after { top: -0.25em !important; left: 0.6em !important; transition: transform 0.3s ease; }

    @media (max-width: 768px) {
        header .pages li.category-btn-item > a {
            font-size: .875rem
        }
    }
    header .pages li.category-btn-item > a:hover::after { transform: rotate(226deg) !important; top: 0 !important; }

    @media (max-width: 768px) {
        header .pages li.category-btn-item.submenu-is-shown > a::after { transform: rotate(226deg) !important; top: 0 !important; }
    }
    header .pages li a { display: block; color: var(--header-menu-pages-link-color); transition: opacity 200ms linear; padding-right: 0.4rem; }
    header .pages li a:hover { opacity: .6; }
    header .pages li a.button { display: inline; color: var(--button-text-color); font-weight: 600; padding: 0.907em 1.35em 0.907em 1em; }
    header .pages li a.button::after { top: -0.25em !important; left: 0.4em !important; width: .5em !important; height: .5em !important; border-width: 0 .15em .15em 0 !important; }

    @media (max-width: 768px) {
        header .pages li a.button {
            font-size: .875rem
        }
    }
    header .pages li.selected a { font-weight: bold; border-radius: 3px; background: transparent; }
    header ul.flyout-nav li .flyout {
        visibility: hidden;
        opacity:    0;
        position:   absolute;
        top:        99%;
        left:       0;
        right:      0;
        min-height: 150px;
        padding:    15px 30px;
        text-align: left;
        z-index:    101;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        background-color: var(--bg-color);
        max-height: 150px;
        overflow: hidden;
    }
    header ul.flyout-nav li .flyout a { text-transform: none; }
    header ul.flyout-nav li .flyout ul.menu-v li { border: none; vertical-align: top; text-align: left; margin: 0 20px 20px 0; }
    header ul.flyout-nav li .flyout ul.menu-v li.collapsible { background: none; }
    header ul.flyout-nav li .flyout ul.menu-v li a { font-weight: bold; padding-left: 0; font-size: 1.1em; }
    header ul.flyout-nav li .flyout ul.menu-v li ul.menu-v li { display: block; margin: 0; font-size: 0.9em; }
    header ul.flyout-nav li .flyout ul.menu-v li ul.menu-v li a { font-weight: normal; }
    header ul.flyout-nav li .flyout ul.menu-v li ul.menu-v li ul { display: none; }
    header ul.flyout-nav li .flyout ul.menu-v.brands { text-align: center; }
    header ul.flyout-nav li .flyout ul.menu-v.brands a { font-size: 1.2em; font-weight: normal; }
    header ul.flyout-nav li .flyout .departments ul.menu-v li { width: 173px; }
    header ul.flyout-nav li .flyout .tags { font-size: 120%; }
    header ul.flyout-nav li.submenu-is-shown .flyout { visibility: visible; opacity: 1; max-height: none; overflow: auto; }
    /* Footer
    --------- */
    footer.globalfooter { box-shadow: var(--shadow1); z-index: 0; padding-top: 25px; min-height: 40px; background-color: var(--bg-color-accent); }
    footer .footer-block { word-break: break-word; }
    footer .footer-block a { display: block; padding: 1px 0; margin-bottom: 16px; }
    footer .footer-block a.top { display: block; }
    footer .footer-block.contact-us .social { display: flex; gap: 10px; margin-bottom: 16px; }
    footer .footer-block.contact-us .social a {
        color:           var(--black) !important;
        width:           32px;
        height:          32px;
        background:      var(--gray6);
        border-radius:   min(.625rem, var(--element-border-radius));
        display:         flex;
        align-items:     center;
        justify-content: center;
        transition:      opacity 200ms linear;
    }
    footer .footer-block.contact-us .social a:hover { opacity: .6; }
    footer a { color: var(--footer-link-color); }
    footer a:hover { color: var(--footer-link-hover-color); }
    footer a:visited { color: var(--footer-link-color); }
    footer .appfooter { position: relative; text-align: center; padding: 20px 0; color: var(--footer-app-color); border-top: 2px solid var(--footer-divider-color); min-height: 1.5em; margin-top: 20px; }
    footer .appfooter .poweredby { flex: 0 0 auto; font-size: 0.875rem; }
    footer .appfooter .poweredby a { text-decoration: underline; }
    footer .appfooter .webasyst-magic-wand {
        display:         inline-block;
        width:           16px;
        height:          16px;
        background:      url("img/webasyst.svg") no-repeat;
        margin-right:    4px;
        position:        relative;
        top:             2px;
        z-index:         -1;
        background-size: 16px 16px;
    }
    footer .footer-note { color: var(--footer-notice-color); font-size: 0.9em; }
    footer .s-footer-notice { color: var(--footer-notice-color); margin-top: 16px; font-size: 0.9em; line-height: 1.3em; text-align: left; }
    footer .s-footer-notice a { color: inherit; text-decoration: underline; }
}

/* Main
------- */
main { flex: 1 }
main.maincontent { margin: 0; background: var(--bg-color); }
main.maincontent .container { padding-bottom: 40px; }


.right-sidebar > .sidebar { order: 1; }
.right-sidebar > .content { order: 0; }

.sidebar > *:not(:empty) { margin: 0 !important; background: var(--bg_tr_8); border-radius: var(--element-border-radius); padding: 20px; }
.sidebar > *:not(:last-child) { margin-bottom: 20px !important; }
.content { position: relative; }

.likebox { margin-bottom: 25px; overflow: hidden; }

.connect.inline .likebox { width: 260px; display: inline-block; vertical-align: top; margin-right: 50px; }

.leadbox { background: #fafadf; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.1); }
.leadbox h4 { font-size: 1.5em; line-height: 1.2em; }

.mailer-subscribe { padding: 7px 47px 32px; margin-bottom: 32px; border-bottom: 2px solid var(--footer-divider-color); }
@media (max-width: 768px) {
    .mailer-subscribe { padding: 0 0 2rem 0; margin-bottom: 2rem }
}

.mailer-subscribe a { color: var(--footer-subscribe-link-color); }

.s-loading-section { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(255, 255, 255, .5); z-index: 100; }
.s-loading-section .s-loading-content { display: inline-block; }

/* My account (hide core app nav elements)
------------------------------------------ */

html.my ul.menu-h li a { padding: 5px 7px; }
html.my ul.menu-h li.selected a { color: var(--white); }
html.my .sidebar { display: none; }

/* OTHER */
.wa-login-form-actions button,
.wa-signup-form-actions button,
.wa-forgotpassword-form-actions button,
.wa-set-password-form-wrapper button,
.wa-login-form-actions [type=button],
.wa-signup-form-actions [type=button],
.wa-forgotpassword-form-actions [type=button],
.wa-set-password-form-wrapper [type=button],
.wa-login-form-actions [type=submit],
.wa-signup-form-actions [type=submit],
.wa-forgotpassword-form-actions [type=submit],
.wa-confirm-signup-button,
.wa-set-password-form-wrapper [type=submit] { font-size: 18px; font-weight: bold; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; }



.wa-login-submit { color: var(--white); }